/* ===== bundled external stylesheets ===== */

/* ===== google-noto-sans-kr.css ===== */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanskr/v39/PbyxFmXiEBPT4ITbgNA5Cgms3VYcOA-vvnIzzuoyeLQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanskr/v39/PbyxFmXiEBPT4ITbgNA5Cgms3VYcOA-vvnIzztgyeLQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanskr/v39/PbyxFmXiEBPT4ITbgNA5Cgms3VYcOA-vvnIzzg01eLQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanskr/v39/PbyxFmXiEBPT4ITbgNA5Cgms3VYcOA-vvnIzzkM1eLQ.ttf) format('truetype');
}


/* ===== google-ibm-plex-mono.css ===== */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n5ig.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJ8lc.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAO8lc.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3pQP8lc.ttf) format('truetype');
}


/* ===== font-awesome-6.4.0.css ===== */
/*!
 * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-arrow-turn-right:before,.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"}
.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-stubber:before{content:"\e5c7"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-odysee:before{content:"\e5c6"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-v4compatibility.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}


/* ===== sweetalert2-11.css ===== */
:root{--swal2-outline: 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-container-padding: 0.625em;--swal2-backdrop: rgba(0, 0, 0, 0.4);--swal2-backdrop-transition: background-color 0.15s;--swal2-width: 32em;--swal2-padding: 0 0 1.25em;--swal2-border: none;--swal2-border-radius: 0.3125rem;--swal2-background: white;--swal2-color: #545454;--swal2-show-animation: swal2-show 0.3s;--swal2-hide-animation: swal2-hide 0.15s forwards;--swal2-icon-zoom: 1;--swal2-title-padding: 0.8em 1em 0;--swal2-html-container-padding: 1em 1.6em 0.3em;--swal2-input-border: 1px solid #d9d9d9;--swal2-input-border-radius: 0.1875em;--swal2-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-background: transparent;--swal2-input-transition: border-color 0.2s, box-shadow 0.2s;--swal2-input-hover-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-focus-border: 1px solid #b4dbed;--swal2-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-progress-step-background: #add8e6;--swal2-validation-message-background: #f0f0f0;--swal2-validation-message-color: #666;--swal2-footer-border-color: #eee;--swal2-footer-background: transparent;--swal2-footer-color: inherit;--swal2-timer-progress-bar-background: rgba(0, 0, 0, 0.3);--swal2-close-button-position: initial;--swal2-close-button-inset: auto;--swal2-close-button-font-size: 2.5em;--swal2-close-button-color: #ccc;--swal2-close-button-transition: color 0.2s, box-shadow 0.2s;--swal2-close-button-outline: initial;--swal2-close-button-box-shadow: inset 0 0 0 3px transparent;--swal2-close-button-focus-box-shadow: inset var(--swal2-outline);--swal2-close-button-hover-transform: none;--swal2-actions-justify-content: center;--swal2-actions-width: auto;--swal2-actions-margin: 1.25em auto 0;--swal2-actions-padding: 0;--swal2-actions-border-radius: 0;--swal2-actions-background: transparent;--swal2-action-button-transition: background-color 0.2s, box-shadow 0.2s;--swal2-action-button-hover: black 10%;--swal2-action-button-active: black 10%;--swal2-confirm-button-box-shadow: none;--swal2-confirm-button-border-radius: 0.25em;--swal2-confirm-button-background-color: #7066e0;--swal2-confirm-button-color: #fff;--swal2-deny-button-box-shadow: none;--swal2-deny-button-border-radius: 0.25em;--swal2-deny-button-background-color: #dc3741;--swal2-deny-button-color: #fff;--swal2-cancel-button-box-shadow: none;--swal2-cancel-button-border-radius: 0.25em;--swal2-cancel-button-background-color: #6e7881;--swal2-cancel-button-color: #fff;--swal2-toast-show-animation: swal2-toast-show 0.5s;--swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards;--swal2-toast-border: none;--swal2-toast-box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 1px 2px hsl(0deg 0% 0% / 0.075), 1px 2px 4px hsl(0deg 0% 0% / 0.075), 1px 3px 8px hsl(0deg 0% 0% / 0.075), 2px 4px 16px hsl(0deg 0% 0% / 0.075)}[data-swal2-theme=dark]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}@media(prefers-color-scheme: dark){[data-swal2-theme=auto]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow:hidden}body.swal2-height-auto{height:auto !important}body.swal2-no-backdrop .swal2-container{background-color:rgba(0,0,0,0) !important;pointer-events:none}body.swal2-no-backdrop .swal2-container .swal2-popup{pointer-events:auto}body.swal2-no-backdrop .swal2-container .swal2-modal{box-shadow:0 0 10px var(--swal2-backdrop)}body.swal2-toast-shown .swal2-container{box-sizing:border-box;width:360px;max-width:100%;background-color:rgba(0,0,0,0);pointer-events:none}body.swal2-toast-shown .swal2-container.swal2-top{inset:0 auto auto 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-top-end,body.swal2-toast-shown .swal2-container.swal2-top-right{inset:0 0 auto auto}body.swal2-toast-shown .swal2-container.swal2-top-start,body.swal2-toast-shown .swal2-container.swal2-top-left{inset:0 auto auto 0}body.swal2-toast-shown .swal2-container.swal2-center-start,body.swal2-toast-shown .swal2-container.swal2-center-left{inset:50% auto auto 0;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-center{inset:50% auto auto 50%;transform:translate(-50%, -50%)}body.swal2-toast-shown .swal2-container.swal2-center-end,body.swal2-toast-shown .swal2-container.swal2-center-right{inset:50% 0 auto auto;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-start,body.swal2-toast-shown .swal2-container.swal2-bottom-left{inset:auto auto 0 0}body.swal2-toast-shown .swal2-container.swal2-bottom{inset:auto auto 0 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-end,body.swal2-toast-shown .swal2-container.swal2-bottom-right{inset:auto 0 0 auto}@media print{body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow-y:scroll !important}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown)>[aria-hidden=true]{display:none}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown) .swal2-container{position:static !important}}div:where(.swal2-container){display:grid;position:fixed;z-index:1060;inset:0;box-sizing:border-box;grid-template-areas:"top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";grid-template-rows:minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);height:100%;padding:var(--swal2-container-padding);overflow-x:hidden;transition:var(--swal2-backdrop-transition);-webkit-overflow-scrolling:touch}div:where(.swal2-container).swal2-backdrop-show,div:where(.swal2-container).swal2-noanimation{background:var(--swal2-backdrop)}div:where(.swal2-container).swal2-backdrop-hide{background:rgba(0,0,0,0) !important}div:where(.swal2-container).swal2-top-start,div:where(.swal2-container).swal2-center-start,div:where(.swal2-container).swal2-bottom-start{grid-template-columns:minmax(0, 1fr) auto auto}div:where(.swal2-container).swal2-top,div:where(.swal2-container).swal2-center,div:where(.swal2-container).swal2-bottom{grid-template-columns:auto minmax(0, 1fr) auto}div:where(.swal2-container).swal2-top-end,div:where(.swal2-container).swal2-center-end,div:where(.swal2-container).swal2-bottom-end{grid-template-columns:auto auto minmax(0, 1fr)}div:where(.swal2-container).swal2-top-start>.swal2-popup{align-self:start}div:where(.swal2-container).swal2-top>.swal2-popup{grid-column:2;place-self:start center}div:where(.swal2-container).swal2-top-end>.swal2-popup,div:where(.swal2-container).swal2-top-right>.swal2-popup{grid-column:3;place-self:start end}div:where(.swal2-container).swal2-center-start>.swal2-popup,div:where(.swal2-container).swal2-center-left>.swal2-popup{grid-row:2;align-self:center}div:where(.swal2-container).swal2-center>.swal2-popup{grid-column:2;grid-row:2;place-self:center center}div:where(.swal2-container).swal2-center-end>.swal2-popup,div:where(.swal2-container).swal2-center-right>.swal2-popup{grid-column:3;grid-row:2;place-self:center end}div:where(.swal2-container).swal2-bottom-start>.swal2-popup,div:where(.swal2-container).swal2-bottom-left>.swal2-popup{grid-column:1;grid-row:3;align-self:end}div:where(.swal2-container).swal2-bottom>.swal2-popup{grid-column:2;grid-row:3;place-self:end center}div:where(.swal2-container).swal2-bottom-end>.swal2-popup,div:where(.swal2-container).swal2-bottom-right>.swal2-popup{grid-column:3;grid-row:3;place-self:end end}div:where(.swal2-container).swal2-grow-row>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-column:1/4;width:100%}div:where(.swal2-container).swal2-grow-column>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-row:1/4;align-self:stretch}div:where(.swal2-container).swal2-no-transition{transition:none !important}div:where(.swal2-container)[popover]{width:auto;border:0}div:where(.swal2-container) div:where(.swal2-popup){display:none;position:relative;box-sizing:border-box;grid-template-columns:minmax(0, 100%);width:var(--swal2-width);max-width:100%;padding:var(--swal2-padding);border:var(--swal2-border);border-radius:var(--swal2-border-radius);background:var(--swal2-background);color:var(--swal2-color);font-family:inherit;font-size:1rem}div:where(.swal2-container) div:where(.swal2-popup):focus{outline:none}div:where(.swal2-container) div:where(.swal2-popup).swal2-loading{overflow-y:hidden}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable{cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable div:where(.swal2-icon){cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging{cursor:grabbing}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging div:where(.swal2-icon){cursor:grabbing}div:where(.swal2-container) h2:where(.swal2-title){position:relative;max-width:100%;margin:0;padding:var(--swal2-title-padding);color:inherit;font-size:1.875em;font-weight:600;text-align:center;text-transform:none;overflow-wrap:break-word;cursor:initial}div:where(.swal2-container) div:where(.swal2-actions){display:flex;z-index:1;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:var(--swal2-actions-justify-content);width:var(--swal2-actions-width);margin:var(--swal2-actions-margin);padding:var(--swal2-actions-padding);border-radius:var(--swal2-actions-border-radius);background:var(--swal2-actions-background)}div:where(.swal2-container) div:where(.swal2-loader){display:none;align-items:center;justify-content:center;width:2.2em;height:2.2em;margin:0 1.875em;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;border-width:.25em;border-style:solid;border-radius:100%;border-color:#2778c4 rgba(0,0,0,0) #2778c4 rgba(0,0,0,0)}div:where(.swal2-container) button:where(.swal2-styled){margin:.3125em;padding:.625em 1.1em;transition:var(--swal2-action-button-transition);border:none;box-shadow:0 0 0 3px rgba(0,0,0,0);font-weight:500}div:where(.swal2-container) button:where(.swal2-styled):not([disabled]){cursor:pointer}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){border-radius:var(--swal2-confirm-button-border-radius);background:initial;background-color:var(--swal2-confirm-button-background-color);box-shadow:var(--swal2-confirm-button-box-shadow);color:var(--swal2-confirm-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):active{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){border-radius:var(--swal2-deny-button-border-radius);background:initial;background-color:var(--swal2-deny-button-background-color);box-shadow:var(--swal2-deny-button-box-shadow);color:var(--swal2-deny-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):hover{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):active{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel){border-radius:var(--swal2-cancel-button-border-radius);background:initial;background-color:var(--swal2-cancel-button-background-color);box-shadow:var(--swal2-cancel-button-box-shadow);color:var(--swal2-cancel-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):active{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):focus-visible{outline:none;box-shadow:var(--swal2-action-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-styled)[disabled]:not(.swal2-loading){opacity:.4}div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-footer){margin:1em 0 0;padding:1em 1em 0;border-top:1px solid var(--swal2-footer-border-color);background:var(--swal2-footer-background);color:var(--swal2-footer-color);font-size:1em;text-align:center;cursor:initial}div:where(.swal2-container) .swal2-timer-progress-bar-container{position:absolute;right:0;bottom:0;left:0;grid-column:auto !important;overflow:hidden;border-bottom-right-radius:var(--swal2-border-radius);border-bottom-left-radius:var(--swal2-border-radius)}div:where(.swal2-container) div:where(.swal2-timer-progress-bar){width:100%;height:.25em;background:var(--swal2-timer-progress-bar-background)}div:where(.swal2-container) img:where(.swal2-image){max-width:100%;margin:2em auto 1em;cursor:initial}div:where(.swal2-container) button:where(.swal2-close){position:var(--swal2-close-button-position);inset:var(--swal2-close-button-inset);z-index:2;align-items:center;justify-content:center;width:1.2em;height:1.2em;margin-top:0;margin-right:0;margin-bottom:-1.2em;padding:0;overflow:hidden;transition:var(--swal2-close-button-transition);border:none;border-radius:var(--swal2-border-radius);outline:var(--swal2-close-button-outline);background:rgba(0,0,0,0);color:var(--swal2-close-button-color);font-family:monospace;font-size:var(--swal2-close-button-font-size);cursor:pointer;justify-self:end}div:where(.swal2-container) button:where(.swal2-close):hover{transform:var(--swal2-close-button-hover-transform);background:rgba(0,0,0,0);color:#f27474}div:where(.swal2-container) button:where(.swal2-close):focus-visible{outline:none;box-shadow:var(--swal2-close-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-html-container){z-index:1;justify-content:center;margin:0;padding:var(--swal2-html-container-padding);overflow:auto;color:inherit;font-size:1.125em;font-weight:normal;line-height:normal;text-align:center;overflow-wrap:break-word;word-break:break-word;cursor:initial}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea),div:where(.swal2-container) select:where(.swal2-select),div:where(.swal2-container) div:where(.swal2-radio),div:where(.swal2-container) label:where(.swal2-checkbox){margin:1em 2em 3px}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea){box-sizing:border-box;width:auto;transition:var(--swal2-input-transition);border:var(--swal2-input-border);border-radius:var(--swal2-input-border-radius);background:var(--swal2-input-background);box-shadow:var(--swal2-input-box-shadow);color:inherit;font-size:1.125em}div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror{border-color:#f27474 !important;box-shadow:0 0 2px #f27474 !important}div:where(.swal2-container) input:where(.swal2-input):hover,div:where(.swal2-container) input:where(.swal2-file):hover,div:where(.swal2-container) textarea:where(.swal2-textarea):hover{box-shadow:var(--swal2-input-hover-box-shadow)}div:where(.swal2-container) input:where(.swal2-input):focus,div:where(.swal2-container) input:where(.swal2-file):focus,div:where(.swal2-container) textarea:where(.swal2-textarea):focus{border:var(--swal2-input-focus-border);outline:none;box-shadow:var(--swal2-input-focus-box-shadow)}div:where(.swal2-container) input:where(.swal2-input)::placeholder,div:where(.swal2-container) input:where(.swal2-file)::placeholder,div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder{color:#ccc}div:where(.swal2-container) .swal2-range{margin:1em 2em 3px;background:var(--swal2-background)}div:where(.swal2-container) .swal2-range input{width:80%}div:where(.swal2-container) .swal2-range output{width:20%;color:inherit;font-weight:600;text-align:center}div:where(.swal2-container) .swal2-range input,div:where(.swal2-container) .swal2-range output{height:2.625em;padding:0;font-size:1.125em;line-height:2.625em}div:where(.swal2-container) .swal2-input{height:2.625em;padding:0 .75em}div:where(.swal2-container) .swal2-file{width:75%;margin-right:auto;margin-left:auto;background:var(--swal2-input-background);font-size:1.125em}div:where(.swal2-container) .swal2-textarea{height:6.75em;padding:.75em}div:where(.swal2-container) .swal2-select{min-width:50%;max-width:100%;padding:.375em .625em;background:var(--swal2-input-background);color:inherit;font-size:1.125em}div:where(.swal2-container) .swal2-radio,div:where(.swal2-container) .swal2-checkbox{align-items:center;justify-content:center;background:var(--swal2-background);color:inherit}div:where(.swal2-container) .swal2-radio label,div:where(.swal2-container) .swal2-checkbox label{margin:0 .6em;font-size:1.125em}div:where(.swal2-container) .swal2-radio input,div:where(.swal2-container) .swal2-checkbox input{flex-shrink:0;margin:0 .4em}div:where(.swal2-container) label:where(.swal2-input-label){display:flex;justify-content:center;margin:1em auto 0}div:where(.swal2-container) div:where(.swal2-validation-message){align-items:center;justify-content:center;margin:1em 0 0;padding:.625em;overflow:hidden;background:var(--swal2-validation-message-background);color:var(--swal2-validation-message-color);font-size:1em;font-weight:300}div:where(.swal2-container) div:where(.swal2-validation-message)::before{content:"!";display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;margin:0 .625em;border-radius:50%;background-color:#f27474;color:#fff;font-weight:600;line-height:1.5em;text-align:center}div:where(.swal2-container) .swal2-progress-steps{flex-wrap:wrap;align-items:center;max-width:100%;margin:1.25em auto;padding:0;background:rgba(0,0,0,0);font-weight:600}div:where(.swal2-container) .swal2-progress-steps li{display:inline-block;position:relative}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step{z-index:20;flex-shrink:0;width:2em;height:2em;border-radius:2em;background:#2778c4;color:#fff;line-height:2em;text-align:center}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step{background:#2778c4}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step{background:var(--swal2-progress-step-background);color:#fff}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:var(--swal2-progress-step-background)}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line{z-index:10;flex-shrink:0;width:2.5em;height:.4em;margin:0 -1px;background:#2778c4}div:where(.swal2-icon){position:relative;box-sizing:content-box;justify-content:center;width:5em;height:5em;margin:2.5em auto .6em;zoom:var(--swal2-icon-zoom);border:.25em solid rgba(0,0,0,0);border-radius:50%;border-color:#000;font-family:inherit;line-height:5em;cursor:default;user-select:none}div:where(.swal2-icon) .swal2-icon-content{display:flex;align-items:center;font-size:3.75em}div:where(.swal2-icon).swal2-error{border-color:#f27474;color:#f27474}div:where(.swal2-icon).swal2-error .swal2-x-mark{position:relative;flex-grow:1}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left]{left:1.0625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right]{right:1em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-error.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark{animation:swal2-animate-error-x-mark .5s}div:where(.swal2-icon).swal2-warning{border-color:#f8bb86;color:#f8bb86}div:where(.swal2-icon).swal2-warning.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .5s}div:where(.swal2-icon).swal2-info{border-color:#3fc3ee;color:#3fc3ee}div:where(.swal2-icon).swal2-info.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .8s}div:where(.swal2-icon).swal2-question{border-color:#87adbd;color:#87adbd}div:where(.swal2-icon).swal2-question.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content{animation:swal2-animate-question-mark .8s}div:where(.swal2-icon).swal2-success{border-color:#a5dc86;color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line]{position:absolute;width:3.75em;height:7.5em;border-radius:50%}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.4375em;left:-2.0635em;transform:rotate(-45deg);transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.6875em;left:1.875em;transform:rotate(-45deg);transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}div:where(.swal2-icon).swal2-success .swal2-success-ring{position:absolute;z-index:2;top:-0.25em;left:-0.25em;box-sizing:content-box;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%}div:where(.swal2-icon).swal2-success .swal2-success-fix{position:absolute;z-index:1;top:.5em;left:1.625em;width:.4375em;height:5.625em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line]{display:block;position:absolute;z-index:2;height:.3125em;border-radius:.125em;background-color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip]{top:2.875em;left:.8125em;width:1.5625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-animate-success-line-tip .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-animate-success-line-long .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right{animation:swal2-rotate-success-circular-line 4.25s ease-in}[class^=swal2]{-webkit-tap-highlight-color:rgba(0,0,0,0)}.swal2-show{animation:var(--swal2-show-animation)}.swal2-hide{animation:var(--swal2-hide-animation)}.swal2-noanimation{transition:none}.swal2-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.swal2-rtl .swal2-close{margin-right:initial;margin-left:0}.swal2-rtl .swal2-timer-progress-bar{right:0;left:auto}.swal2-toast{box-sizing:border-box;grid-column:1/4 !important;grid-row:1/4 !important;grid-template-columns:min-content auto min-content;padding:1em;overflow-y:hidden;border:var(--swal2-toast-border);background:var(--swal2-background);box-shadow:var(--swal2-toast-box-shadow);pointer-events:auto}.swal2-toast>*{grid-column:2}.swal2-toast h2:where(.swal2-title){margin:.5em 1em;padding:0;font-size:1em;text-align:initial}.swal2-toast .swal2-loading{justify-content:center}.swal2-toast input:where(.swal2-input){height:2em;margin:.5em;font-size:1em}.swal2-toast .swal2-validation-message{font-size:1em}.swal2-toast div:where(.swal2-footer){margin:.5em 0 0;padding:.5em 0 0;font-size:.8em}.swal2-toast button:where(.swal2-close){grid-column:3/3;grid-row:1/99;align-self:center;width:.8em;height:.8em;margin:0;font-size:2em}.swal2-toast div:where(.swal2-html-container){margin:.5em 1em;padding:0;overflow:initial;font-size:1em;text-align:initial}.swal2-toast div:where(.swal2-html-container):empty{padding:0}.swal2-toast .swal2-loader{grid-column:1;grid-row:1/99;align-self:center;width:2em;height:2em;margin:.25em}.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;width:2em;min-width:2em;height:2em;margin:0 .5em 0 0}.swal2-toast .swal2-icon .swal2-icon-content{display:flex;align-items:center;font-size:1.8em;font-weight:bold}.swal2-toast .swal2-icon.swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line]{top:.875em;width:1.375em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:.3125em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:.3125em}.swal2-toast div:where(.swal2-actions){justify-content:flex-start;height:auto;margin:0;margin-top:.5em;padding:0 .5em}.swal2-toast button:where(.swal2-styled){margin:.25em .5em;padding:.4em .6em;font-size:1em}.swal2-toast .swal2-success{border-color:#a5dc86}.swal2-toast .swal2-success [class^=swal2-success-circular-line]{position:absolute;width:1.6em;height:3em;border-radius:50%}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.8em;left:-0.5em;transform:rotate(-45deg);transform-origin:2em 2em;border-radius:4em 0 0 4em}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.25em;left:.9375em;transform-origin:0 1.5em;border-radius:0 4em 4em 0}.swal2-toast .swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-success .swal2-success-fix{top:0;left:.4375em;width:.4375em;height:2.6875em}.swal2-toast .swal2-success [class^=swal2-success-line]{height:.3125em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip]{top:1.125em;left:.1875em;width:.75em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=long]{top:.9375em;right:.1875em;width:1.375em}.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-toast-animate-success-line-tip .75s}.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-toast-animate-success-line-long .75s}.swal2-toast.swal2-show{animation:var(--swal2-toast-show-animation)}.swal2-toast.swal2-hide{animation:var(--swal2-toast-hide-animation)}@keyframes swal2-show{0%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}100%{transform:translate3d(0, 0, 0) scale(1);opacity:1}}@keyframes swal2-hide{0%{transform:translate3d(0, 0, 0) scale(1);opacity:1}100%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}}@keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-0.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes swal2-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(0.4);opacity:0}50%{margin-top:1.625em;transform:scale(0.4);opacity:0}80%{margin-top:-0.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@keyframes swal2-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}@keyframes swal2-rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes swal2-animate-question-mark{0%{transform:rotateY(-360deg)}100%{transform:rotateY(0)}}@keyframes swal2-animate-i-mark{0%{transform:rotateZ(45deg);opacity:0}25%{transform:rotateZ(-25deg);opacity:.4}50%{transform:rotateZ(15deg);opacity:.8}75%{transform:rotateZ(-5deg);opacity:1}100%{transform:rotateX(0);opacity:1}}@keyframes swal2-toast-show{0%{transform:translateY(-0.625em) rotateZ(2deg)}33%{transform:translateY(0) rotateZ(-2deg)}66%{transform:translateY(0.3125em) rotateZ(2deg)}100%{transform:translateY(0) rotateZ(0deg)}}@keyframes swal2-toast-hide{100%{transform:rotateZ(1deg);opacity:0}}@keyframes swal2-toast-animate-success-line-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-0.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@keyframes swal2-toast-animate-success-line-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}


/* ===== cropperjs-1.6.2.css ===== */
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}


/* ===== cropper modal app overrides ===== */
.swal-crop-popup { background: #1e1e2e !important; }
.swal-crop-popup .cropper-view-box { outline-color: var(--accent, #FF4655); }
.swal-crop-popup .cropper-line { background-color: var(--accent, #FF4655); }
.swal-crop-popup .cropper-point { background-color: var(--accent, #FF4655); }
.swal-crop-popup .cropper-modal { background-color: rgba(0,0,0,.7); }

/* ===== end bundled external stylesheets ===== */
/* BangyaDan single CSS bundle. Source files are listed in section banners. */

/* ===== style-variables.css ===== */
/* style-variables.css — CSS custom properties (design tokens) and Font Awesome stability rules */

:root {
  /* Typography */
  --font-brand: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', 'Noto Sans', system-ui, sans-serif;
  --font-display: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;
  --font-tactical: 'Orbitron', 'Pretendard Variable', sans-serif;
  --font-ui: 'Rajdhani', 'Noto Sans KR', sans-serif;

  /* Core palette */
  --bg-dark: #0a0a10;
  --bg-card: #13131b;
  --bg-card-hover: #1a1a26;
  --bg-elevated: #1e1e2a;
  --text: #f0f0f5;
  --text-muted: #8b8fa3;
  --text-secondary: #a0a4b8;
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Accent system — default = Valorant red (page-user inherits, admin/developer override) */
  --accent: #FF4655;
  --accent-hover: #E63946;
  --accent-light: color-mix(in srgb, var(--accent) 62%, white);
  --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);
  --accent-surface: color-mix(in srgb, var(--accent) 8%, transparent);

  /* Semantic colors */
  --success: #22c55e;
  --success-surface: rgba(34, 197, 94, 0.1);
  --danger: #ef4444;
  --danger-surface: rgba(239, 68, 68, 0.1);
  --warning: #f59e0b;
  --warning-surface: rgba(245, 158, 11, 0.1);
  --info: #3b82f6;
  --info-surface: rgba(59, 130, 246, 0.1);

  /* Extended palette */
  --gold: #fbbf24;
  --purple: #a855f7;
  --red: #f43f5e;
  --blue: #3b82f6;
  --cyan: #06b6d4;

  /* Glassmorphism tokens — dramatic depth */
  --glass-bg: rgba(8, 8, 16, 0.55);
  --glass-bg-strong: rgba(6, 6, 12, 0.78);
  --glass-blur: blur(24px);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%);

  /* Neon glow tokens — brighter, more dramatic */
  --neon-accent: 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 48px color-mix(in srgb, var(--accent) 12%, transparent);
  --neon-success: 0 0 16px rgba(34, 197, 94, 0.35), 0 0 48px rgba(34, 197, 94, 0.1);
  --neon-danger: 0 0 16px rgba(239, 68, 68, 0.35), 0 0 48px rgba(239, 68, 68, 0.1);
  --neon-gold: 0 0 16px rgba(251, 191, 36, 0.35), 0 0 48px rgba(251, 191, 36, 0.1);
  --neon-cyan: 0 0 16px rgba(6, 182, 212, 0.35), 0 0 48px rgba(6, 182, 212, 0.1);

  /* Shadow scale — deeper */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-xl: 0 16px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-glow: 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow-card-hover: 0 14px 48px rgba(0, 0, 0, 0.55), 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent);

  /* Border-radius scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Font-size scale */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;

  /* Duration tokens */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Keep Font Awesome glyphs stable regardless of surrounding typography */
.fa-brands,
.fab {
  font-family: 'Font Awesome 6 Brands' !important;
  font-weight: 400 !important;
  font-style: normal;
}

.fa-solid,
.fas {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-style: normal;
}

.fa-regular,
.far {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
  font-style: normal;
}

/* ===== style-base.css ===== */
/* style-base.css — Reset, body defaults, login page, and particle effects */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-brand);
  background: var(--bg-dark);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  /* Subtle noise texture overlay for depth */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.015'/%3E%3C/svg%3E");
}

/* Selection */
::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Emoji sizing (system-native rendering) */
img.emoji {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  display: inline-block;
}


/* Login Page */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(135deg, rgba(10, 10, 14, 0.78) 0%, rgba(16, 16, 24, 0.72) 50%, rgba(10, 10, 14, 0.82) 100%),
    url('/data/images/default.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.login-card {
  background: linear-gradient(180deg, rgba(19, 19, 27, 0.95), rgba(10, 10, 16, 0.98));
  border-radius: var(--radius-xl);
  padding: 60px 50px;
  text-align: center;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.6s var(--ease-out);
  backdrop-filter: blur(20px);
}

/* Subtle card glow */
.login-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 50%, color-mix(in srgb, var(--accent) 8%, transparent));
  z-index: -1;
  pointer-events: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-card .logo {
  margin-bottom: 20px;
}

.login-logo-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-card .logo i {
  font-size: 64px;
  color: var(--accent);
  margin-bottom: 16px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.login-card h1 {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--accent-light), #c4b5fd, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.brand-logo-image {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.login-brand-logo-image {
  width: 150px;
  height: 150px;
  border-radius: 22px;
}

.login-status-notice {
  margin-top: 10px !important;
  margin-bottom: 16px;
}

.login-card .tagline {
  color: var(--text-muted);
  margin-bottom: 40px;
  font-size: 16px;
}

.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(140deg, #E63946 0%, #FF4655 58%, #FF6B7A 100%);
  color: white;
  padding: 16px 40px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.3s var(--ease-out);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.discord-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.discord-btn:hover {
  background: linear-gradient(140deg, #F25263 0%, #FF5F6D 58%, #FF8491 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

.discord-btn:hover::after {
  opacity: 1;
}

.discord-btn:active {
  transform: translateY(-1px);
}

.discord-btn i {
  font-size: 24px;
}

.login-card .notice {
  margin-top: 30px;
  color: var(--text-muted);
  font-size: 16px;
}

.login-card .notice i {
  color: var(--accent);
  margin-right: 8px;
}

@media (max-width: 480px) {
  .login-card {
    padding: 32px 24px;
    border-radius: 16px;
    margin: 12px;
  }
  .login-card h1 {
    font-size: 26px;
  }
  .login-brand-logo-image,
  .brand-logo-image {
    width: 100px;
    height: 100px;
  }
  .login-card .tagline {
    font-size: 16px;
    margin-bottom: 24px;
  }
  .discord-btn {
    padding: 14px 28px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }
}

/* Particles */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent-light);
  border-radius: 50%;
  opacity: 0.25;
  animation: float 18s infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; }

@keyframes float {
  0%, 100% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.25;
  }
  90% {
    opacity: 0.25;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ===== style-layout.css ===== */
/* style-layout.css — Sidebar, main content area, top bar, mobile sidebar toggle layout */

/* Sidebar */
.mobile-sidebar-toggle {
  display: none;
}

.mobile-sidebar-backdrop {
  display: none;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 270px;
  height: 100vh;
  background:
    radial-gradient(ellipse 80% 20% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(8, 8, 14, 0.96) 0%, rgba(4, 4, 8, 0.98) 100%);
  border-right: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* Inner content padding (separate from frame) */
.sidebar > * {
  padding-left: 12px;
  padding-right: 12px;
}

/* Scanline texture overlay */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.008) 3px,
    rgba(255, 255, 255, 0.008) 6px
  );
  pointer-events: none;
  z-index: 1;
}

/* Neon accent glow along right edge — thicker, more visible */
.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 60%, transparent) 15%,
    var(--accent) 40%,
    var(--accent) 60%,
    color-mix(in srgb, var(--accent) 60%, transparent) 85%,
    transparent 100%
  );
  opacity: 0.35;
  pointer-events: none;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 15%, transparent),
    -4px 0 16px color-mix(in srgb, var(--accent) 8%, transparent);
  z-index: 2;
}

/* ── Tactical bracket decorations ── */
.sidebar-bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: fadeIn 0.6s 0.4s ease forwards;
}

.sidebar-bracket--tl {
  top: 10px;
  left: 10px;
  border-top: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.sidebar-bracket--br {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Sidebar Top: brand + profile ── */
.sidebar-top {
  flex-shrink: 0;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}

/* Brand row: small logo + name + label */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  color: inherit;
}

.sidebar-brand__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 35%, transparent));
}

.sidebar-brand__name {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #e0e0ff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.sidebar-brand__label {
  display: none;
}

.sidebar-id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  transition: background 0.2s ease;
}

.sidebar-id:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.sidebar-id__avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 15%, transparent);
  object-fit: cover;
}

.sidebar-id__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-id__name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-id__meta {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.sidebar-id__sep {
  color: rgba(255, 255, 255, 0.15);
  margin: 0 1px;
}

.sidebar-id__currency {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.sidebar-id__emoji {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* Hide old logo/label if still present */
.sidebar .logo { display: none; }
.sidebar .page-type-label { display: none; }

.sidebar .nav-menu-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.sidebar .nav-menu-wrapper .nav-menu {
  flex: 1;
}

.sidebar .nav-menu-wrapper::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(4, 4, 8, 0.99));
  pointer-events: none;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sidebar .nav-menu-wrapper.scrolled-bottom::after {
  opacity: 0;
}

.sidebar .logo i {
  font-size: 32px;
  color: var(--accent);
}

.sidebar .logo span {
  font-size: 30px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #e0e0ff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 25%, transparent));
}

.sidebar .user-info {
  display: none;
}

/* ── Bottom navigation ── */
.sidebar-bottom-menu {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-top: 10px;
  padding-bottom: 12px;
  margin-top: auto;
  position: relative;
}

.sidebar-bottom-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 25%, transparent), transparent);
}

.sidebar-bottom-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.sidebar-bottom-menu a:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, #fff);
  transform: translateX(3px);
}

.sidebar-bottom-menu a i {
  width: 18px;
  text-align: center;
  font-size: 16px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.sidebar-bottom-menu a:hover i {
  opacity: 1;
}

.sidebar-bottom-menu .sidebar-logout {
  color: rgba(251, 113, 133, 0.45);
}

.sidebar-bottom-menu .sidebar-logout:hover {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.08);
}

/* Top-bar profile widget */
.top-bar-profile-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: -10px 0;
  transition: border-color 0.15s ease;
}

.top-bar-profile-group:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
}

.top-bar-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.top-bar-profile:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tb-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.top-bar-profile .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent);
}

.top-bar-profile .profile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.top-bar-profile .username-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.top-bar-profile .username {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.top-bar-profile .username .emoji {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  margin: 0;
}

.top-bar-profile .user-tier-badge {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.top-bar-profile .profile-meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 16px;
  line-height: 1;
}

.top-bar-profile .tag {
  color: var(--accent);
  font-weight: 600;
}

.top-bar-profile .tb-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 8px;
  flex-shrink: 0;
}

.top-bar-profile .profile-currency {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 600;
}

.top-bar-profile .profile-currency .currency-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.top-bar-profile .profile-currency .currency-item i {
  font-size: 18px;
}

.top-bar-profile .profile-currency .currency-item .currency-points-icon {
  color: var(--accent-light);
}

.top-bar-profile .profile-currency .currency-item .currency-coins-icon {
  color: #fbbf24;
}

.top-bar-profile .profile-currency .balance-pill-emoji {
  width: 18px;
  height: 18px;
  object-fit: contain;
}


.admin-nav-tools {
  margin: 10px 0 14px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 8px;
}

.admin-nav-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 18, 33, 0.66);
}

.admin-nav-search-wrap i {
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
}

.admin-nav-search-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.admin-nav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.admin-nav-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-nav-tools-actions {
  display: flex;
  gap: 6px;
}

.admin-nav-tools-actions button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
}

.admin-nav-tools-actions button:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.sidebar .nav-menu {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
  min-height: 0;
}

.sidebar .nav-menu::-webkit-scrollbar {
  width: 3px;
}

.sidebar .nav-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar .nav-menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px;
}

.sidebar .nav-menu::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

.sidebar .nav-menu li {
  margin-bottom: 1px;
}

/* ── Category group headers ── */
.sidebar .nav-menu .menu-group {
  margin: 10px 0 4px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.25s ease;
  position: relative;
}

/* Accent dot before group label */
.sidebar .nav-menu .menu-group span::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.5;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: opacity 0.25s ease;
}

.sidebar .nav-menu .menu-group:hover {
  color: rgba(255, 255, 255, 0.7);
}

.sidebar .nav-menu .menu-group:hover span::before {
  opacity: 1;
}

.sidebar .nav-menu .menu-group .group-caret {
  width: auto;
  font-size: 10px;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar .nav-menu .menu-group:not(.is-open) .group-caret {
  transform: rotate(-90deg);
}

.sidebar .nav-menu .menu-subgroup {
  margin: 4px 0 2px;
  padding: 0 6px 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 0;
}

.sidebar .nav-menu .menu-divider {
  margin: 6px 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  border-radius: 999px;
}

/* ── Menu items ── */
.sidebar .nav-menu li.feature-item a {
  padding: 8px 12px 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}

.sidebar .nav-menu li.feature-item.active a {
  box-shadow: none;
}

.feature-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.sidebar .nav-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  position: relative;
}

/* Hover — slide-in accent bar */
.sidebar .nav-menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
}

.sidebar .nav-menu a:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.sidebar .nav-menu a:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: #fff;
  padding-left: 16px;
}

.sidebar .nav-menu a:hover i {
  color: var(--accent);
}

/* ── Active state — full neon indicator ── */
.sidebar .nav-menu li.active a {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent)
  );
  color: #fff;
  box-shadow: none;
}

.sidebar .nav-menu li.active a::before {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}

.sidebar .nav-menu li.active a i {
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* ── Icons ── */
.sidebar .nav-menu i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s ease, filter 0.2s ease;
}

/* Main Content */
.main-content {
  margin-left: 270px;
  min-height: 100vh;
  padding: 32px;
}

/* No top bar — reclaim vertical space */
.main-content--no-topbar {
  padding-top: 20px;
}

.main-content--no-topbar > .top-bar {
  display: none;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding: 12px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--radius-lg);
  background: rgba(6, 6, 14, 0.7);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  position: relative;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.3), 0 0 12px color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Always-visible accent top line */
.top-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, color-mix(in srgb, var(--accent) 40%, transparent) 30%, var(--accent) 50%, color-mix(in srgb, var(--accent) 40%, transparent) 70%, transparent 95%);
  border-radius: inherit;
  opacity: 0.5;
}

.top-bar h1 {
  font-family: var(--font-tactical);
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.top-bar h1 i {
  color: var(--accent);
  margin-right: 10px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent));
  font-size: 0.85em;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.server-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.point-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-light) 50%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-hover) 20%, transparent));
  color: #efe8ff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-hover) 20%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.point-balance-pill i {
  color: #f4dd7a;
}

.point-balance-pill strong {
  color: #ffffff;
  letter-spacing: 0.02em;
}

.coin-balance-pill {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(251, 191, 36, 0.2));
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.15), 0 0 10px rgba(251, 191, 36, 0.1);
}

.balance-pill-emoji {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 700;
}

.status-pill.up {
  border-color: rgba(35, 165, 89, 0.5);
  color: #7cf0a6;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.12);
}

.status-pill.down {
  border-color: rgba(218, 55, 60, 0.5);
  color: #ff8e93;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.12);
}

.status-pill.warn {
  border-color: rgba(255, 171, 0, 0.5);
  color: #ffd37a;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.12);
}

.dashboard-refresh-pill {
  cursor: pointer;
  min-width: 0;
  width: fit-content;
  justify-content: center;
  padding: 6px 8px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.dashboard-refresh-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  transform: translateY(-1px);
}

.main-content,
.top-bar,
.status-row,
.header-actions,
.top-bar-profile-group {
  overflow: visible;
}

@media (max-width: 720px) {
  .main-content {
    padding: 18px 12px 28px;
  }

  .top-bar {
    padding: 10px 12px;
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .top-bar h1 {
    font-size: 20px;
  }

  .status-row,
  .header-actions {
    gap: 6px;
  }

  .point-balance-pill {
    height: 32px;
    padding: 0 10px;
    font-size: 16px;
    gap: 5px;
    box-shadow: none;
  }

  .top-bar-profile {
    padding: 5px 10px 5px 5px;
    gap: 8px;
  }

  .top-bar-profile .avatar {
    width: 34px;
    height: 34px;
  }

  .top-bar-profile .username {
    font-size: 18px;
    max-width: 90px;
  }

  .top-bar-profile .profile-meta {
    font-size: 16px;
    gap: 5px;
  }

  .balance-pill-emoji {
    width: 15px;
    height: 15px;
  }

}

#tab-menu-settings input[type='search'] {
  background: rgba(15, 18, 33, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 11px;
}

#tab-menu-settings input[type='search']:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

#tab-menu-settings [data-menu-row][draggable='true'] {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

#tab-menu-settings .rules-preview code {
  white-space: normal;
  word-break: break-word;
}

/* ===== style-components.css ===== */
/* style-components.css — Reusable UI components: stats, settings, cards, modals, tables, forms, embeds, etc. */

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  transition: all 0.35s var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Subtle top accent shimmer */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent 90%);
}

.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: var(--shadow-card-hover);
}

.stat-card:hover::after {
  opacity: 1;
}

/* Colored neon glow per stat-icon type */
.stat-card:has(.stat-icon.blue):hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--neon-accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.stat-card:has(.stat-icon.purple):hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 12px rgba(168,85,247,0.3), 0 0 40px rgba(168,85,247,0.1); border-color: rgba(168, 85, 247, 0.4); }
.stat-card:has(.stat-icon.gold):hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--neon-gold); border-color: rgba(251, 191, 36, 0.35); }
.stat-card:has(.stat-icon.red):hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--neon-danger); border-color: rgba(244, 63, 94, 0.35); }

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.08);
}

.stat-icon.blue { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-hover) 15%, transparent)); color: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 15%, transparent); }
.stat-icon.purple { background: linear-gradient(135deg, rgba(155, 89, 182, 0.25), color-mix(in srgb, var(--accent) 15%, transparent)); color: var(--purple); box-shadow: 0 4px 12px rgba(155, 89, 182, 0.15); }
.stat-icon.gold { background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(251, 191, 36, 0.15)); color: var(--gold); box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15); }
.stat-icon.red { background: linear-gradient(135deg, rgba(231, 76, 60, 0.25), rgba(244, 63, 94, 0.15)); color: var(--red); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15); }

/* Neon glow on stat-icon when card is hovered */
.stat-card:hover .stat-icon.blue { box-shadow: var(--neon-accent); }
.stat-card:hover .stat-icon.purple { box-shadow: 0 0 14px rgba(168, 85, 247, 0.4), 0 0 40px rgba(168, 85, 247, 0.12); }
.stat-card:hover .stat-icon.gold { box-shadow: var(--neon-gold); }
.stat-card:hover .stat-icon.red { box-shadow: var(--neon-danger); }

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-tactical);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.home-dashboard-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-dashboard-grid-4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.home-card-span-2,
.home-dashboard-card-span2 {
  grid-column: span 2;
}

.home-neon-stats .stat-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.home-neon-stats .stat-value {
  font-size: 30px;
}

.home-neon-stats .stat-label {
  font-size: 16px;
}

.home-neon-stats .stat-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.home-neon-news-grid .home-dashboard-card {
  display: flex;
  flex-direction: column;
  border-color: var(--border);
  background: var(--bg-card);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.home-neon-news-grid .card-header {
  background: transparent;
  padding: 14px 18px;
}

.home-dashboard-card .card-body {
  flex: 1;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.home-dashboard-card .card-body.home-card-body-list {
  padding: 16px 20px;
}

.home-card-body-list {
  justify-content: center;
}

.nickname-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
.nickname-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.nickname-link:hover { opacity: 0.8; }

.home-rank-list,
.home-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-rank-list li,
.home-schedule-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.home-rank-list li:last-child { border-bottom: none; }

.home-rank-pos {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
}
.home-rank-list li:nth-child(1) .home-rank-pos { background: rgba(251,191,36,.18); color: #fbbf24; }
.home-rank-list li:nth-child(2) .home-rank-pos { background: rgba(148,163,184,.15); color: #94a3b8; }
.home-rank-list li:nth-child(3) .home-rank-pos { background: rgba(180,120,80,.15); color: #cd7f32; }

.home-rank-main {
  font-weight: 600;
  color: #eef2ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.home-rank-tier-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.home-rank-value {
  font-weight: 700;
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-rank-grouped li {
  flex-wrap: wrap;
}
.home-rank-grouped .home-rank-main {
  white-space: normal;
  flex-wrap: wrap;
}
.home-rank-extra {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85em;
}

/* ── Scrim winner showcase ── */
.ud-card-winner .ud-card-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.sw-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
}

.sw-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.sw-round {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}

.sw-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.sw-cols {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.sw-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sw-col-header {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sw-col-header.sw-gold { color: #fbbf24; }
.sw-col-header.sw-silver { color: #94a3b8; }

.sw-names {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.sw-name {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: .78rem;
  font-weight: 700;
  color: #eef2ff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scrim-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid transparent;
}

.scrim-status-chip.is-completed {
  color: #a7f3d0;
  background: rgba(6, 78, 59, 0.35);
  border-color: rgba(16, 185, 129, 0.45);
}

.scrim-status-chip.is-pending {
  color: #fde68a;
  background: rgba(120, 53, 15, 0.35);
  border-color: rgba(245, 158, 11, 0.45);
}

.home-news-link {
  color: #ffffff;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
}

.home-news-link:hover {
  text-decoration: underline;
}

.home-video-frame-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 0;
  overflow: hidden;
  background: #05070d;
}

.home-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-patch-thumb {
  display: block;
  width: 100%;
  border-radius: 0;
  object-fit: cover;
  max-height: 220px;
}

.home-patch-hero {
  position: relative;
  flex: 1;
  border-radius: 0;
  overflow: hidden;
  background: #0b1024;
  text-decoration: none;
}

.home-patch-hero-media {
  position: absolute;
  inset: 0;
  display: block;
}

.home-patch-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #070b18;
}

.home-patch-hero-dim {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 22, 0.45);
}

.home-patch-hero-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 760px);
  padding: 14px 16px;
  text-align: center;
  color: #f4f7ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.home-patch-hero-title-link {
  color: inherit;
  text-decoration: none;
}

.home-patch-hero-title-link:hover .home-patch-hero-title {
  text-decoration: underline;
}

.home-patch-hero-title {
  font-weight: 900;
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 8px;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-patch-hero-text {
  margin: 0;
  white-space: pre-line;
  line-height: 1.35;
  font-size: 16px;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-patch-overlay-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(188, 198, 255, 0.68);
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.42), rgba(125, 134, 255, 0.24));
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.home-patch-overlay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(88, 101, 242, 0.46);
  background: linear-gradient(135deg, rgba(108, 121, 255, 0.55), rgba(144, 152, 255, 0.33));
}

@media (max-width: 768px) {
  .home-patch-hero-copy {
    width: calc(100% - 18px);
    padding: 10px;
  }

  .home-patch-hero-title {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .home-patch-hero-text {
    font-size: 16px;
    line-height: 1.2;
  }
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.setting-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.35s var(--ease-out);
  position: relative;
}

/* Always-visible accent gradient line on top */
.setting-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--accent) 50%, transparent) 50%, transparent 90%);
  z-index: 1;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.setting-card:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

@media (hover: hover) {
  .setting-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), var(--neon-accent);
  }
}

.setting-card:active {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 6%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent);
}

.card-header h2 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.card-header h2 i {
  color: var(--accent);
  margin-right: 10px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent));
}

.btn-add {
  background: linear-gradient(140deg, var(--accent), var(--accent-hover));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.2s var(--ease-out);
  position: relative;
  overflow: hidden;
  min-height: 40px;
}

.btn-add::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}

.btn-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--accent-glow), var(--neon-accent);
}

.btn-add:hover::after {
  opacity: 1;
}

.btn-add:active {
  transform: translateY(0);
}

.card-body {
  padding: 20px 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(6, 6, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.25s var(--ease-out);
  min-height: 44px; /* Touch target */
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent) 5%, transparent);
  background: rgba(6, 6, 14, 0.75);
}

.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.form-control option {
  background: var(--bg-dark);
  color: var(--text);
}

.compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

#sharedEmbedTemplateEditorCard .card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Embed Template Editor — Studio Layout ─── */
.embed-editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.embed-editor-config,
.embed-editor-preview-wrap {
  min-width: 0;
}

.embed-editor-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.embed-editor-preview-wrap {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 25%, transparent) transparent;
}

.embed-editor-preview-wrap::-webkit-scrollbar { width: 4px; }
.embed-editor-preview-wrap::-webkit-scrollbar-track { background: transparent; }
.embed-editor-preview-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 4px;
}

@media (max-width: 1100px) {
  .embed-editor-split { grid-template-columns: 1fr; }
  .embed-editor-preview-wrap { position: static; max-height: none; overflow-y: visible; }
}

#sharedEmbedTemplateEditorCard .settings-grid { margin-bottom: 0 !important; }

/* ─── Template Selector Bar ─── */
.ete-selector-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent-hover) 6%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-md);
}

.ete-selector-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ete-selector-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ete-selector-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-light);
}

.ete-selector-bar select {
  margin: 0;
}

/* ─── Collapsible Sections ─── */
.ete-section {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-normal) ease;
}

.ete-section:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.ete-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-fast) ease, border-color var(--duration-normal) ease;
}

.ete-section-header::-webkit-details-marker { display: none; }

.ete-section-header:hover {
  background: rgba(255, 255, 255, 0.025);
}

.ete-section[open] > .ete-section-header {
  border-bottom-color: var(--glass-border);
}

/* Section icon badges */
.ete-section-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 12px;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.ete-section-header:hover .ete-section-icon {
  transform: scale(1.08);
}

.ete-section-icon[data-color="blue"]   { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.ete-section-icon[data-color="purple"] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: #a78bfa; }
.ete-section-icon[data-color="pink"]   { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
.ete-section-icon[data-color="amber"]  { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.ete-section-icon[data-color="cyan"]   { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.ete-section-icon[data-color="green"]  { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.ete-section-icon[data-color="orange"] { background: rgba(249, 115, 22, 0.15); color: #fb923c; }

.ete-section-title {
  flex: 1;
  min-width: 0;
}

/* Chevron animation */
.ete-section-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.3s var(--ease-out);
}

.ete-section[open] > .ete-section-header .ete-section-chevron {
  transform: rotate(180deg);
}

/* Add button in section header */
.ete-section-add-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  flex-shrink: 0;
}

.ete-section-add-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-light);
  transform: scale(1.1);
}

/* Section body */
.ete-section-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Form elements ─── */
.ete-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ete-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ete-field-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
  .ete-field-row, .ete-field-row-3 { grid-template-columns: 1fr; }
}

.ete-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.ete-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg-dark);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.ete-input:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

.ete-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

#sharedEmbedTemplateEditorCard .form-group {
  min-width: 0;
}

#sharedEmbedTemplateEditorCard input.is-readonly {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Toggle groups */
.ete-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.ete-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.ete-toggle.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Color picker */
.ete-color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ete-color-swatch {
  width: 40px;
  height: 36px;
  padding: 2px;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-dark);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.ete-color-swatch:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.ete-color-hex {
  flex: 1;
  font-family: var(--font-brand);
  letter-spacing: 0.04em;
}

/* Divider */
.ete-divider {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 2px 0;
}

/* Hint text */
.ete-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ─── Preview Frame ─── */
.ete-preview-frame {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.ete-preview-frame-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--glass-border);
}

.ete-preview-frame-dots {
  display: flex;
  gap: 5px;
}

.ete-preview-frame-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.ete-preview-frame-dots span:nth-child(1) { background: rgba(239, 68, 68, 0.5); }
.ete-preview-frame-dots span:nth-child(2) { background: rgba(245, 158, 11, 0.5); }
.ete-preview-frame-dots span:nth-child(3) { background: rgba(34, 197, 94, 0.5); }

.ete-preview-frame-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.ete-preview-frame-body {
  padding: 14px;
  background: #313338;
}

/* ─── Action bar ─── */
.ete-action-bar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.embed-preview-card {
  display: flex;
  border: 1px solid #1f2124;
  border-radius: 10px;
  overflow: hidden;
  background: #2b2d31;
  width: fit-content;
  max-width: 460px;
}

.embed-preview-message-shell {
  display: grid;
  gap: 10px;
  width: fit-content;
  max-width: min(100%, 460px);
}

.embed-preview-left {
  width: 6px;
  min-width: 6px;
}

.embed-preview-body {
  padding: 10px 12px 12px;
  width: 100%;
}

.embed-preview-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.embed-preview-main {
  min-width: 0;
  flex: 1;
}

.embed-preview-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 4px;
  color: #f2f3f5;
}

.embed-preview-desc {
  color: #e0e2e6;
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 0;
}

.embed-preview-title a,
.embed-preview-desc a,
.embed-preview-field-name a,
.embed-preview-field-value a {
  color: #7dd3fc;
  text-decoration: none;
}

.embed-preview-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 6px;
}

.embed-preview-author img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  object-fit: cover;
}

.embed-preview-author a {
  color: #f3f4f6;
  text-decoration: none;
}

.embed-preview-author a:hover {
  text-decoration: underline;
}

.embed-preview-meta-link {
  font-size: 16px;
  margin-bottom: 6px;
}

.embed-preview-meta-link a {
  color: #7dd3fc;
  text-decoration: none;
}

.embed-preview-meta-link a:hover {
  text-decoration: underline;
}

.embed-preview-title a:hover,
.embed-preview-desc a:hover,
.embed-preview-field-name a:hover,
.embed-preview-field-value a:hover {
  text-decoration: underline;
}

.embed-preview-footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #b0b5bc;
}

.embed-preview-footer-text {
  color: #c4c8ce;
}

.embed-preview-timestamp {
  color: #b0b5bc;
}

.embed-preview-footer img {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
}

.embed-preview-image {
  display: block;
  width: min(100%, 400px);
  margin: 8px 0 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  object-fit: cover;
}

.embed-preview-thumb {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  object-fit: cover;
  flex: 0 0 auto;
}

.embed-preview-components {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}

.embed-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  min-height: 32px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: #f3f4f6;
  background: linear-gradient(140deg, #7B3FF2 0%, var(--accent) 58%, #A56CFF 100%);
}

.embed-preview-button.style-primary { background: linear-gradient(140deg, #7B3FF2 0%, var(--accent) 58%, #A56CFF 100%); }
.embed-preview-button.style-secondary { background: linear-gradient(140deg, var(--accent) 0%, #9A60FF 62%, #B47DFF 100%); }
.embed-preview-button.style-success { background: linear-gradient(140deg, #7B3FF2 0%, #9558FF 62%, #B47DFF 100%); }
.embed-preview-button.style-danger { background: linear-gradient(140deg, #6F35E8 0%, var(--accent) 58%, #A56CFF 100%); }
.embed-preview-button.style-link {
  background: transparent;
  color: #00a8fc;
  border-color: transparent;
}

.embed-preview-button.is-link {
  text-decoration: underline;
}

.embed-preview-button.is-disabled {
  opacity: 0.5;
  border-style: dashed;
}

/* ── Embed Components Preview ──────────────────────────────────────────── */

.ep-container {
  background: #2b2d31;
  border-radius: 10px;
  border-left: 4px solid var(--ep-accent, var(--accent));
  overflow: hidden;
  max-width: 460px;
  width: fit-content;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-section {
  line-height: 1.5;
  color: #dcddde;
  word-break: break-word;
}

.ep-author {
  font-size: 0.8rem;
  color: #b5bac1;
}

.ep-author a.ep-author-link {
  color: #b5bac1;
  text-decoration: none;
}

.ep-author a.ep-author-link:hover {
  text-decoration: underline;
}

.ep-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f2f3f5;
}

.ep-title a {
  color: #00a8fc;
  text-decoration: none;
}

.ep-title a:hover {
  text-decoration: underline;
}

.ep-text {
  font-size: 0.9rem;
  color: #dcddde;
}

.ep-section-with-accessory {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ep-section-content {
  flex: 1;
  min-width: 0;
}

.ep-section-accessory img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}

.ep-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ep-field-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f2f3f5;
}

.ep-field-value {
  font-size: 0.85rem;
  color: #dcddde;
}

.ep-media img {
  width: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.ep-footer {
  font-size: 0.75rem;
  color: #b5bac1;
  margin-top: 2px;
}

.ep-separator {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 6px 0;
}

.ep-spoiler {
  position: relative;
}

.ep-spoiler::after {
  content: '스포일러';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b5bac1;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  z-index: 2;
}

.ep-spoiler:hover::after {
  background: rgba(0, 0, 0, 0.6);
}

.ep-media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 4px;
}

/* 갤러리 이미지 1장일 때 전체 너비 표시 (디스코드 동일) */
.ep-media-gallery img:only-child {
  width: 100%;
  border-radius: 6px;
  max-height: 400px;
  object-fit: cover;
  grid-column: 1 / -1;
}

.ep-media-gallery img {
  width: 100%;
  border-radius: 6px;
  max-height: 200px;
  object-fit: cover;
}

.ep-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 0.85rem;
  color: #b5bac1;
}

.ep-file i {
  color: #b5bac1;
}

.ep-section-accessory-button {
  display: flex;
  align-items: center;
}

.ep-section-accessory-button .embed-preview-button {
  white-space: nowrap;
}

.ep-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Embed Component Editor */
.ep-comp-list { display: flex; flex-direction: column; gap: 8px; }
.ep-comp-card { background: rgba(10, 10, 18, 0.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 14px; transition: border-color 0.2s ease; }
.ep-comp-card:hover { border-color: color-mix(in srgb, var(--accent) 15%, transparent); }
.ep-comp-card.dragging { opacity: 0.3; }
.ep-drop-indicator { height: 4px; margin: -2px 0; border-radius: 2px; transition: all 0.15s ease; position: relative; z-index: 1; }
.ep-drop-indicator.active { height: 4px; background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); }
.ep-comp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ep-comp-drag { cursor: grab; color: #666; font-size: 14px; }
.ep-comp-type-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.3px; }
.ep-comp-type-badge[data-color="blue"] { background: rgba(59,130,246,0.15); color: #60a5fa; }
.ep-comp-type-badge[data-color="purple"] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: #a78bfa; }
.ep-comp-type-badge[data-color="pink"] { background: rgba(236,72,153,0.15); color: #f472b6; }
.ep-comp-type-badge[data-color="gray"] { background: rgba(148,163,184,0.15); color: #94a3b8; }
.ep-comp-type-badge[data-color="orange"] { background: rgba(249,115,22,0.15); color: #fb923c; }
.ep-comp-type-badge[data-color="green"] { background: rgba(34,197,94,0.15); color: #4ade80; }
.ep-comp-type-badge[data-color="cyan"] { background: rgba(6,182,212,0.15); color: #22d3ee; }
.ep-comp-actions { margin-left: auto; display: flex; gap: 4px; }
.ep-comp-body { /* component-specific edit form */ }
.ep-add-comp-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ep-add-comp-btn { font-size: 0.78rem; padding: 5px 12px; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.08); background: transparent; color: #94a3b8; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s ease; }
.ep-add-comp-btn:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.ep-separator-large { margin: 12px 0; }
.ep-spacer { height: 8px; }
.ep-spacer.ep-separator-large { height: 16px; }
.ep-gallery-spoiler { filter: blur(24px); }
.ep-select-menu-preview { margin: 2px 0; }
.ep-select-placeholder { display: flex; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 8px 12px; color: #94a3b8; font-size: 0.85rem; }

.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }

.section-divider {
  border-color: rgba(255, 255, 255, 0.08);
  margin: 14px 0;
}

.section-subtitle {
  margin: 0 0 10px 0;
}

.embed-rollback-modal-body {
  display: grid;
  gap: 10px;
  text-align: left;
}

.embed-rollback-version-select {
  width: 100%;
  margin: 0;
}

.embed-rollback-diff-box {
  margin-top: 0;
  max-height: 200px;
  overflow: auto;
}

.embed-rollback-diff-list {
  margin: 0;
  padding-left: 18px;
}

.embed-preview-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 3px;
  margin: 2px 0 0;
}

.embed-preview-field {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.embed-preview-field.block {
  grid-column: 1 / -1;
}

.embed-preview-field-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 1px;
  color: #f2f3f5;
}

.embed-preview-field-value {
  font-size: 16px;
  color: #e0e2e6;
  line-height: 1.35;
}

.embed-md-inline-code {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1px 4px;
  font-family: var(--font-brand);
  font-size: 16px;
}

.embed-md-code-block {
  margin: 6px 0;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  overflow-x: auto;
}

.embed-md-code-block code {
  display: block;
  white-space: pre;
  line-height: 1.45;
  font-family: var(--font-brand);
  font-size: 16px;
  color: #f3f4f6;
}

.embed-md-code-lang {
  display: inline-block;
  margin-bottom: 6px;
  color: #b0b5bc;
  font-size: 16px;
  text-transform: lowercase;
}

.embed-md-heading-1 {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.375;
  margin: 4px 0 2px;
}

.embed-md-heading-2 {
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.375;
  margin: 4px 0 2px;
}

.embed-md-heading-3 {
  display: block;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.375;
  margin: 4px 0 2px;
}

.embed-md-subtext {
  display: block;
  font-size: 0.8em;
  color: #b0b5bc;
  line-height: 1.375;
}

.embed-field-editor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.embed-field-editor-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-dark);
}

.embed-field-editor-actions {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.embed-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .embed-preview-topline {
    flex-direction: column;
  }

  .embed-preview-thumb {
    width: 72px;
    height: 72px;
    align-self: flex-end;
  }

  .embed-preview-fields {
    grid-template-columns: 1fr;
  }
}

/* Role List */
.role-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-dark);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.role-item:hover {
  background: var(--bg-card-hover);
}

.role-emoji {
  font-size: 24px;
}

.role-name {
  flex: 1;
  font-weight: 500;
}

.btn-delete {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 90%, transparent) 0%, color-mix(in srgb, var(--accent) 86%, transparent) 62%, color-mix(in srgb, var(--accent-light) 84%, transparent) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.btn-delete:hover {
  filter: brightness(1.15);
}

/* Youtube List */
.youtube-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.youtube-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-dark);
  border-radius: 10px;
}

.youtube-item .red {
  font-size: 24px;
  color: #ff0000;
}

.yt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.yt-name {
  font-weight: 500;
}

.yt-channel {
  font-size: 16px;
  color: var(--text-muted);
}

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

/* Action Section */
.action-section {
  text-align: center;
}

.btn-primary {
  background: linear-gradient(140deg, var(--accent), var(--accent-hover));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.2s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--accent-glow), var(--neon-accent);
}

.btn-primary:hover::after {
  opacity: 1;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary.large {
  padding: 18px 48px;
  font-size: 18px;
}

.btn-primary i {
  margin-right: 10px;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal.show {
  display: flex;
}

.modal-content {
  background: linear-gradient(180deg, rgba(30, 30, 42, 0.92), rgba(19, 19, 27, 0.95));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-xl), 0 0 60px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 120px color-mix(in srgb, var(--accent) 5%, transparent);
  animation: slideUp 0.3s var(--ease-out);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.modal-header h2 i {
  color: var(--accent);
  margin-right: 8px;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 30%, transparent));
}

.modal .close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal .close:hover {
  color: var(--text);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

.btn-cancel {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 88%, transparent) 0%, color-mix(in srgb, var(--accent) 80%, transparent) 64%, color-mix(in srgb, var(--accent-light) 76%, transparent) 100%);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  filter: brightness(1.15);
}

.btn-confirm {
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent) 58%, var(--accent-hover) 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
  filter: brightness(1);
}

.btn-confirm:hover {
  filter: brightness(1.15);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 16px 24px;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
  animation: slideInRight 0.3s ease;
  z-index: 2000;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast.success {
  border-color: var(--success);
}

.toast.success i {
  color: var(--success);
}

.toast.error {
  border-color: var(--danger);
}

.toast.error i {
  color: var(--danger);
}

/* Tab content */
.tab-content {
  animation: fadeIn 0.3s ease;
}

/* Role grid */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.map-list-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.map-card {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.map-card-thumb {
  width: 100%;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(35, 43, 74, 0.85), rgba(15, 21, 37, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-card-thumb.is-empty::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  opacity: 0.8;
}

.map-card-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-card-copy {
  display: grid;
  gap: 6px;
}

.map-card-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.map-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}

.map-card-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.map-card-toggle {
  transform: scale(0.95);
  transform-origin: left center;
}

.map-card-status.is-on {
  background: rgba(35, 165, 89, 0.22);
  color: #7de8a6;
}

.map-card-status.is-off {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
}

.map-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-left: auto;
}

.feature-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.role-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(10, 10, 16, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  transition: all 0.25s var(--ease-out);
}

.feature-card {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.feature-copy .help-text {
  margin-top: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.role-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 8px color-mix(in srgb, var(--accent) 15%, transparent);
}

.role-card.tier {
  border-color: rgba(255, 215, 0, 0.3);
}

.role-card.tier:hover {
  border-color: var(--gold);
}

.catalog-emoji-preview {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}

.setting-item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.setting-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.shop-item-card {
  cursor: pointer;
}

.shop-item-card .role-name {
  display: block;
  margin-bottom: 4px;
  line-height: 1.35;
  word-break: break-word;
}

.emoji-select-enhanced {
  position: relative;
}

.emoji-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-primary);
  cursor: pointer;
}

.emoji-select-trigger i {
  margin-left: auto;
  font-size: 16px;
  opacity: 0.7;
}

.emoji-select-menu {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  padding: 6px;
}

.emoji-select-enhanced.open .emoji-select-menu {
  display: block;
}

.emoji-select-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}

.emoji-select-item:hover,
.emoji-select-item.active {
  background: var(--bg-card-hover);
}

.emoji-select-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  flex: 0 0 auto;
}

.emoji-select-icon-placeholder {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.emoji-select-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 6px 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-hover) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hover) 35%, transparent);
  color: var(--text-primary);
  font-size: 16px;
}

.inline-chip-remove {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.console-live-view {
  margin-top: 10px;
  min-height: 320px;
  max-height: 520px;
  overflow-y: auto;
  background: rgba(4, 6, 14, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', var(--font-brand);
  font-size: 13px;
  line-height: 1.5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.console-line {
  white-space: pre-wrap;
  word-break: break-word;
  color: #d1d5db;
}

.console-line.level-error {
  color: #fca5a5;
}

.console-line.level-warn,
.console-line.level-warning {
  color: #fcd34d;
}

.console-line.level-info {
  color: #93c5fd;
}

/* Youtube grid */
.youtube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.youtube-card {
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-dark);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.youtube-card:hover {
  background: var(--bg-card-hover);
  border-color: #ff0000;
}

.youtube-card .yt-icon {
  font-size: 32px;
  color: #ff0000;
}

.youtube-card .yt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.youtube-card .yt-name {
  font-weight: 600;
}

.youtube-card .yt-id {
  font-size: 16px;
  color: var(--text-muted);
}

/* Rules preview */
.rules-preview {
  padding: 20px;
  background: var(--bg-dark);
  border-radius: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
}

/* Message box */
.message-box {
  text-align: center;
  padding: 40px 20px !important;
}

.message-box p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Header actions */
.header-actions {
  display: flex;
  gap: 8px;
}

.btn-secondary {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 90%, transparent) 0%, color-mix(in srgb, var(--accent) 80%, transparent) 64%, color-mix(in srgb, var(--accent-light) 78%, transparent) 100%);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-ui);
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  filter: brightness(1.15);
}

.btn-danger {
  background: linear-gradient(140deg, var(--danger) 0%, #dc2626 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
  filter: brightness(1);
}

.btn-danger:hover {
  filter: brightness(1.15);
}

/* Data table — tactical with mobile scroll */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 480px; /* prevents extreme squish — scroll instead */
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
}

.data-table th {
  background: rgba(4, 4, 10, 0.7);
  font-family: var(--font-tactical);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 10%, transparent);
  white-space: nowrap;
}

.data-table tbody tr {
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

@media (hover: hover) {
  .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
  }
}

/* Mobile: show scroll hint */
@media (max-width: 768px) {
  .data-table-wrap {
    position: relative;
  }
  .data-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(4, 4, 10, 0.8));
    pointer-events: none;
    opacity: 0.6;
  }
  .data-table th,
  .data-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

.member-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.member-card-item {
  font-family: var(--font-ui);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.member-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.member-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
}

.member-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.member-card-id {
  font-size: 16px;
  margin-top: 3px;
  color: var(--text-muted);
}

.member-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.member-meta {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-meta span {
  color: var(--text-muted);
  font-size: 16px;
}

.member-meta strong {
  color: var(--text);
  font-size: 16px;
}

.discord-embed-preview {
  display: flex;
  background: #2b2d31;
  border-radius: 10px;
  border: 1px solid #1f2023;
  overflow: hidden;
}

.discord-embed-preview .embed-accent {
  width: 6px;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
}

.discord-embed-preview .embed-main {
  padding: 14px 16px;
  width: 100%;
}

.discord-embed-preview .embed-title {
  font-size: 16px;
  font-weight: 800;
  color: #f2f3f5;
  margin-bottom: 10px;
}

.discord-embed-preview .embed-title a {
  color: #00b0f4;
  text-decoration: none;
}

.discord-embed-preview .embed-title a:hover {
  text-decoration: underline;
}

.discord-embed-preview .embed-meta-link {
  font-size: 16px;
  margin-bottom: 6px;
}

.discord-embed-preview .embed-meta-link a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.discord-embed-preview .embed-meta-link a:hover {
  text-decoration: underline;
}

.discord-embed-preview .embed-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.discord-embed-preview .embed-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #4f5660;
  object-fit: cover;
}

.discord-embed-preview .embed-author-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.discord-embed-preview .embed-author-tag {
  font-size: 16px;
  color: #b0b5bc;
}

.discord-embed-preview .embed-description {
  margin-top: 6px;
  font-size: 16px;
  color: #e0e2e6;
  line-height: 1.45;
  white-space: pre-wrap;
}

.discord-embed-preview .embed-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.discord-embed-preview .embed-top-main {
  flex: 1;
  min-width: 0;
}

.discord-embed-preview .embed-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.discord-embed-preview .embed-fields {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px;
}

.discord-embed-rich .embed-fields {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.member-list-card .member-card-grid {
  display: block;
}

.member-list-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.member-bulk-toolbar {
  position: sticky;
  top: 8px;
  z-index: 8;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 10px;
  background: rgba(10, 13, 22, 0.7);
  backdrop-filter: blur(6px);
}

.member-bulk-toolbar.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.member-sort-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 700;
}

.member-sort-inline select {
  min-width: 132px;
  height: 34px;
  padding: 4px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.member-sort-inline select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
}

/* Member edit modal (Swal) */
.member-edit-swal-popup {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  max-height: 95vh !important;
}
.member-edit-swal-popup .swal2-title {
  font-size: 18px !important;
}
.member-edit-swal-html {
  overflow: visible !important;
  max-height: none !important;
}
.member-edit-modal {
  text-align: left;
}
.member-edit-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.member-edit-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.member-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.member-edit-grid-4col {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.member-edit-grid .form-group {
  margin-bottom: 0;
}
.member-edit-grid .form-group label {
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-muted);
}
.member-edit-grid .form-group input,
.member-edit-grid .form-group select {
  padding: 8px 10px;
  font-size: 16px;
  min-height: 36px;
}
.member-edit-readonly {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  color: var(--text-muted);
}
.member-edit-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.member-edit-actions .btn-secondary {
  font-size: 16px;
  padding: 6px 12px;
}
.btn-danger-outline {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-danger-outline:hover {
  background: rgba(218, 55, 60, 0.1) !important;
}
@media (max-width: 600px) {
  .member-edit-grid { grid-template-columns: 1fr; }
  .member-edit-grid-4col { grid-template-columns: 1fr 1fr; }
}

.member-role-total {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-left: 2px;
}

.member-role-total strong {
  color: var(--text);
  font-weight: 800;
}

.member-role-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.member-role-section {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.015);
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.member-role-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 80%);
  opacity: 0.5;
}

.member-role-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.member-role-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.member-role-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.member-role-count {
  font-size: 18px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
}

.member-role-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.member-role-empty {
  font-size: 18px;
  color: var(--text-muted);
  padding: 4px 0;
}

.member-role-item {
  position: relative;
  min-width: 0;
}

/* Small dot check for bulk selection (top-right corner) */
.member-bulk-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(17, 23, 38, 0.6);
  cursor: pointer;
  z-index: 2;
  transition: all 0.18s ease;
  opacity: 0;
}
.member-role-item:hover .member-bulk-dot,
.member-bulk-dot.is-checked {
  opacity: 1;
}
.member-bulk-dot.is-checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.member-bulk-dot.is-checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 3.5px;
  width: 3px;
  height: 6px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(40deg);
}
/* Selected card border glow */
.member-role-item.member-role-selected > .member-role-button {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
}

.member-role-button {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  font-weight: 800;
  text-decoration: none;
}

/* (bulk-check padding removed — dot is absolute positioned) */

.member-role-button:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}

.member-role-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  object-fit: cover;
  flex: 0 0 auto;
}

.member-role-button:hover .member-role-avatar {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.member-role-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
  gap: 2px;
}

.member-role-username-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.member-role-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.member-role-activity,
.member-role-last-activity {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.member-role-last-activity {
  opacity: 0.82;
}

.member-role-tier-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.member-role-agents {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 1px;
}

.member-role-agent-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
  opacity: 0.85;
}

.member-role-badge {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  padding: 0 6px;
  border-radius: 4px;
  line-height: 1.4;
  width: fit-content;
}

.member-role-badge--staff {
  color: var(--accent-light);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.profile-page-bg {
  background:
    radial-gradient(1200px 520px at 10% -10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
    radial-gradient(900px 460px at 110% -30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
    linear-gradient(165deg, #1a2237 0%, #202b45 38%, #1b2338 100%);
}

.profile-hero-card {
  margin-top: 12px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent-light) 26%, transparent), color-mix(in srgb, var(--accent-hover) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent-light) 32%, transparent);
}

.profile-hero-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-hero-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  object-fit: cover;
}

.profile-hero-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.profile-hero-sub {
  margin: 6px 0 0;
  color: #d1d5db;
}

.profile-info-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-info-grid.profile-info-grid-single {
  margin-top: 0;
  grid-template-columns: 1fr;
}


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

.profile-kv-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(10, 10, 18, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.profile-kv-list > div:hover {
  border-color: color-mix(in srgb, var(--accent) 15%, transparent);
  background: rgba(10, 10, 18, 0.55);
}

.profile-kv-list span {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.profile-kv-list strong {
  font-size: 15px;
  color: var(--text);
  text-align: right;
}

.profile-kv-list strong a {
  color: var(--accent-light);
  transition: color 0.15s ease;
}

.profile-kv-list strong a:hover {
  color: var(--accent);
}

.profile-inline-icon {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  margin-right: 6px;
}

.profile-agent-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-sep {
  opacity: 0.75;
}

@media (max-width: 900px) {
  .member-role-sections {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .member-list-filter-grid {
    grid-template-columns: 1fr;
  }

  .member-role-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 480px) {
  .member-role-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
}

.member-role-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  flex: 0 0 auto;
}

.member-activity-embed-editor-card {
  width: 100%;
}

.member-activity-embed-editor-host {
  width: 100%;
}

.member-activity-embed-editor-host #sharedEmbedTemplateEditorCard {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.discord-embed-preview .embed-field {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.discord-embed-preview .embed-field span {
  font-size: 16px;
  color: #b0b5bc;
}

.discord-embed-preview .embed-field strong {
  font-size: 16px;
  color: #ffffff;
}

.discord-embed-preview .embed-field-name {
  font-size: 16px;
  color: #b0b5bc;
  font-weight: 600;
  white-space: pre-wrap;
}

.discord-embed-preview .embed-field-value {
  font-size: 16px;
  color: #ffffff;
  white-space: pre-wrap;
  line-height: 1.45;
}

.discord-embed-preview .embed-field.embed-field-block {
  grid-column: 1 / -1;
}

.discord-embed-preview .embed-link {
  margin-top: 10px;
  font-size: 16px;
  color: #c4c8ce;
}

.discord-embed-preview .embed-link a {
  color: #7dd3fc;
  text-decoration: none;
}

.discord-embed-preview .embed-link a:hover {
  text-decoration: underline;
}

.discord-embed-preview .embed-image {
  margin-top: 12px;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.discord-embed-preview .embed-footer {
  margin-top: 10px;
  font-size: 16px;
  color: #b0b5bc;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 720px) {
  .discord-embed-preview .embed-fields {
    grid-template-columns: 1fr;
  }
}

.data-table tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.01);
}

.data-table tbody tr:nth-child(even):hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.data-table code {
  background: var(--bg-dark);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 16px;
  color: var(--text-muted);
}

/* Status badge */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
}

.status-badge.active {
  background: rgba(35, 165, 89, 0.2);
  color: var(--success);
}

.status-badge.inactive {
  background: rgba(255, 171, 0, 0.2);
  color: #ffab00;
}

/* Help text */
.help-text {
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 12px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex: 0 0 auto;
}

.toggle-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(40, 44, 52, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
  pointer-events: none;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #f3f5f7;
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Full-width settings card */
.setting-card.full-width {
  grid-column: 1 / -1;
}

/* Orange icon */
.stat-icon.orange {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.stat-icon.green {
  background: rgba(35, 165, 89, 0.2);
  color: var(--success);
}

/* Modal large */
.modal-content.large {
  max-width: 600px;
}

.modal-body textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  min-height: 150px;
}

.modal-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.modal-body input[type="color"] {
  width: 60px;
  height: 40px;
  padding: 4px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.progress-wrap {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.embed-button-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.embed-button-editor-head-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.embed-button-drag-handle {
  cursor: grab;
  user-select: none;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
}

.embed-button-editor-item:active .embed-button-drag-handle {
  cursor: grabbing;
}

.embed-button-order-actions {
  display: inline-flex;
  gap: 4px;
}

.btn-embed-order {
  min-width: 28px;
  padding: 4px 8px;
}

.embed-button-slot-lock {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(252, 211, 77, 0.35);
}

.embed-button-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.embed-button-source-badge.default {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(147, 197, 253, 0.35);
}

.embed-button-source-badge.custom {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(134, 239, 172, 0.35);
}

.embed-guide-actions {
  margin-top: 8px;
}

.embed-guide-actions ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.embed-guide-actions li {
  margin: 4px 0;
}

.embed-guide-binding-hint {
  margin-top: 8px;
  font-size: 16px;
  color: #93c5fd;
}

.inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-row.toggle-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 0;
  color: #c8cdd5;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  line-height: 1;
}

.inline-row.toggle-row .toggle-switch {
  margin-right: 2px;
}

.toggle-row-text {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
}

.toggle-row-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
  color: #efe7ff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.profile-inline-grid {
  align-items: end !important;
}

.profile-section-block {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
}

.profile-section-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cdb8ff;
  margin-bottom: 10px;
}

.profile-toggle-field {
  display: flex;
  flex-direction: column;
}

.profile-section-actions {
  display: flex;
  gap: 8px;
  align-self: flex-end;
  margin-left: auto;
}

.profile-section-nickname {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.profile-section-nickname i,
.profile-section-save i {
  margin-right: 4px;
}

.profile-section-save {
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-section-actions-spread {
  margin-top: 8px;
  justify-content: space-between;
}

.profile-inline-toggle {
  min-height: 44px;
  padding: 0 2px;
}

.toggle-row-state.is-public {
  background: linear-gradient(140deg, rgba(79, 70, 229, 0.42), color-mix(in srgb, var(--accent) 34%, transparent));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: #f7f2ff;
}

.toggle-row-state.is-private {
  background: linear-gradient(140deg, rgba(52, 58, 78, 0.64), rgba(36, 41, 58, 0.68));
  border-color: rgba(160, 168, 191, 0.3);
  color: #d7dbe8;
}

@media (max-width: 860px) {
  .profile-identity-row {
    grid-template-columns: 1fr;
  }

  .profile-inline-grid {
    grid-template-columns: 1fr !important;
  }
}

.admin-task-progress {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(10, 10, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.admin-task-progress-bar {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: adminTaskProgressSweep 1.1s ease-in-out infinite;
}

@keyframes adminTaskProgressSweep {
  0% { left: -40%; }
  100% { left: 100%; }
}

.embed-preview-error {
  padding: 14px 16px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fecaca;
  font-size: 14px;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.06);
}

/* --- Pipeline editor --- */
.pipeline-flow {
  margin-bottom: 8px;
}
.pipeline-flow-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.pipeline-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 18, 0.4);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease;
}
.pipeline-phase-active {
  background: var(--accent, var(--accent));
  color: #fff;
}
.pipeline-arrow {
  color: var(--muted, #aaa);
  font-size: 0.85em;
}
.pipeline-disabled-label {
  margin-top: 6px;
}
.pipeline-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipeline-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(10, 10, 18, 0.4);
  backdrop-filter: blur(6px);
  cursor: grab;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pipeline-step:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent);
  transform: translateY(-1px);
}
.pipeline-step-dragging {
  opacity: 0.5;
}
.pipeline-step-dragover {
  border-color: var(--accent, var(--accent));
  box-shadow: 0 0 0 2px var(--accent, var(--accent));
}
.pipeline-step-handle {
  color: var(--muted, #aaa);
  cursor: grab;
}
.pipeline-step-icon {
  color: var(--accent, var(--accent));
  font-size: 1.1em;
  width: 20px;
  text-align: center;
}
.pipeline-step-label {
  flex: 1;
  font-size: 0.9em;
}
.pipeline-step-toggle {
  flex-shrink: 0;
}

/* Card 2-column grid container */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: 1fr; }
}
.card-grid > .setting-card { margin: 0; }
.card-grid > .setting-card.full-width { grid-column: 1 / -1; }

/* Collapsible setting cards */
.setting-card.collapsible > .card-header { cursor: pointer; user-select: none; }
.setting-card.collapsible > .card-header .collapse-caret {
  margin-left: auto; font-size: 0.8em; transition: transform 0.2s;
}
.setting-card.collapsible.is-collapsed > .card-header .collapse-caret { transform: rotate(-90deg); }
.setting-card.collapsible.is-collapsed > .card-body { display: none; }

/* ─── Command Setting Cards ─── */
#tab-command-settings, #tab-command-settings * { text-align: left; }
.cmd-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1400px) { .cmd-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cmd-grid { grid-template-columns: repeat(2, 1fr); } }
.cmd-card {
  font-family: var(--font-ui);
  padding: 0; display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-dark);
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  text-align: left; position: relative;
}
.cmd-card.cmd-card-off { opacity: 0.45; }
.cmd-card:hover {
  opacity: 1; border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cmd-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px 0;
}
.cmd-card-name {
  font-weight: 600; font-size: 0.95em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.cmd-card-body { padding: 8px 14px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cmd-card-desc {
  font-size: 0.85em; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmd-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.cmd-tag {
  font-size: 0.75em; padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  font-weight: 500;
}
.cmd-tag-admin { background: rgba(218,55,60,0.12); color: #fb7185; }
.cmd-tag-sub { cursor: pointer; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-light); transition: background 0.15s; }
.cmd-tag-sub:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ─── Survey Editor (Google Forms style) ─── */
.survey-builder {
  max-width: 720px;
  margin: 0 auto;
}

.survey-header-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  padding: 28px;
  margin-bottom: 16px;
}

.survey-header-card .survey-title-input {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text);
  padding: 8px 0;
  transition: border-color 0.2s;
}

.survey-header-card .survey-title-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.survey-header-card .survey-desc-input {
  width: 100%;
  font-size: 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-muted);
  padding: 8px 0;
  margin-top: 8px;
  transition: border-color 0.2s;
}

.survey-header-card .survey-desc-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.survey-settings-row {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.survey-settings-row .survey-setting-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text-muted);
}

.survey-settings-row .survey-setting-item select,
.survey-settings-row .survey-setting-item input {
  padding: 6px 10px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
}

.survey-settings-row .survey-setting-item select:focus,
.survey-settings-row .survey-setting-item input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Question Card */
.sq-card {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}

.sq-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.sq-card.sq-card--active {
  border-left: 4px solid var(--accent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

.sq-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.sq-card-top .sq-label-input {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 8px 0;
  transition: border-color 0.2s;
}

.sq-card-top .sq-label-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.sq-card-top .sq-type-select {
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}

.sq-card-top .sq-type-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Option rows */
.sq-options-list {
  margin-top: 8px;
}

.sq-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.sq-option-row .sq-option-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

.sq-option-row .sq-option-icon--checkbox {
  border-radius: 3px;
}

.sq-option-row .sq-option-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 6px 0;
  font-size: 16px;
  transition: border-color 0.2s;
}

.sq-option-row .sq-option-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.sq-option-row .sq-option-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.sq-option-row .sq-option-remove:hover {
  background: rgba(251, 113, 133, 0.15);
  color: var(--semantic-danger);
}

.sq-add-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  border: none;
  background: none;
  transition: color 0.2s;
}

.sq-add-option:hover {
  color: var(--accent);
}

.sq-add-option .sq-option-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px dashed var(--text-muted);
  flex-shrink: 0;
  opacity: 0.4;
}

/* Text placeholder preview */
.sq-text-preview {
  border-bottom: 1px dotted var(--border);
  color: var(--text-muted);
  padding: 8px 0;
  font-size: 16px;
  opacity: 0.6;
  margin-top: 8px;
}

.sq-text-placeholder-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--border);
  color: var(--text-muted);
  padding: 8px 0;
  font-size: 16px;
  margin-top: 8px;
  transition: border-color 0.2s;
}

.sq-text-placeholder-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
  color: var(--text);
}

/* Card footer toolbar */
.sq-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sq-card-footer .sq-footer-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.sq-card-footer .sq-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
}

.sq-card-footer .sq-delete-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  transition: background 0.2s, color 0.2s;
}

.sq-card-footer .sq-delete-btn:hover {
  background: rgba(251, 113, 133, 0.15);
  color: var(--semantic-danger);
}

.sq-card-footer .sq-duplicate-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
}

.sq-card-footer .sq-duplicate-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.sq-card-footer .sq-image-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
}

.sq-card-footer .sq-image-btn:hover {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.sq-image-preview {
  position: relative;
  margin: 8px 0;
  display: inline-block;
}

.sq-image-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.sq-image-preview .sq-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  font-size: 16px;
  transition: background 0.2s;
}

.sq-image-preview .sq-image-remove:hover {
  background: rgba(239, 68, 68, 0.9);
}

/* Toggle switch */
.sq-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.sq-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sq-toggle .sq-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}

.sq-toggle .sq-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.sq-toggle input:checked + .sq-toggle-slider {
  background: var(--accent);
}

.sq-toggle input:checked + .sq-toggle-slider::before {
  transform: translateX(18px);
}

/* Multi settings (min/max) */
.sq-multi-settings {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  align-items: center;
}

.sq-multi-settings label {
  font-size: 16px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sq-multi-settings input[type="number"] {
  width: 60px;
  padding: 4px 8px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
}

.sq-multi-settings input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Add question FAB */
.sq-add-bar {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.sq-add-menu {
  display: flex;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
}

.sq-add-menu button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.sq-add-menu button:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.sq-add-menu button i {
  font-size: 16px;
}

/* Drag handle */
.sq-drag-handle {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: grab;
}

.sq-card:hover .sq-drag-handle {
  opacity: 1;
}

.sq-card--dragging {
  opacity: 0.4;
}

.sq-card--drag-over {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent);
}

/* Survey action bar */
.survey-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 24px;
}

/* Legacy mode (single/multi/text) options input */
.survey-legacy-options {
  margin-top: 12px;
}

/* Survey list card style */
.survey-list-card {
  font-family: var(--font-ui);
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s;
}

.survey-list-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.survey-list-card .slc-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-list-card .slc-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.survey-list-card .slc-meta {
  font-size: 16px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.survey-list-card .slc-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Survey distribution section */
.survey-distribute-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 24px;
  margin-top: 24px;
}

.survey-distribute-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-distribute-card h3 i {
  color: var(--accent);
}

/* Responses section */
.survey-response-card {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px 18px;
  margin-bottom: 8px;
}

.survey-response-card .src-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.survey-response-card .src-user {
  font-weight: 600;
  font-size: 16px;
}

.survey-response-card .src-date {
  font-size: 16px;
  color: var(--text-muted);
}

.survey-response-card .src-answers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.survey-response-card .src-answer-row {
  display: flex;
  gap: 8px;
  font-size: 16px;
}

.survey-response-card .src-answer-row .src-q-label {
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.survey-response-card .src-answer-row .src-a-value {
  color: var(--text);
}

@media (max-width: 768px) {
  .survey-builder { padding: 0 4px; }
  .sq-card { padding: 16px; }
  .survey-header-card { padding: 20px; }
  .survey-settings-row { flex-direction: column; gap: 10px; }
  .sq-add-menu { flex-wrap: wrap; justify-content: center; }
  .sq-card-top { flex-direction: column; }
  .sq-card-top .sq-type-select { width: 100%; }
}

/* Point System Page */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  height: calc(100vh - 90px);
  overflow: auto;
}

.ps-grid.ps-grid-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.ps-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.ps-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.ps-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
}

.ps-title i { margin-right: 5px; color: var(--accent); }

.ps-sub {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  margin: 8px 0 4px 0;
}

.ps-sub:first-child, .ps-title + .ps-sub { margin-top: 0; }
.ps-sub i { margin-right: 3px; }

.ps-note {
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ps-row {
  display: flex;
  gap: 10px;
}

.ps-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.ps-tbl thead th {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 16px;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.ps-tbl tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.ps-tbl tbody tr:last-child td { border-bottom: none; }
.ps-tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

.point-sys-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.badge-p {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.badge-hp {
  background: rgba(251, 113, 133, 0.15);
  color: #fb7185;
}

.ps-emoji {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-left: 1px;
  object-fit: contain;
}

@media (max-width: 1600px) {
  .ps-grid.ps-grid-4 { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 1200px) {
  .ps-grid, .ps-grid.ps-grid-4 {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
}

@media (max-width: 768px) {
  .ps-grid, .ps-grid.ps-grid-4 { grid-template-columns: 1fr; }
  .ps-row { flex-direction: column; }
}

/* ── Rarity badge (Discord role tag style) ── */
.shop-item-card .shop-rarity-badge,
.shop-rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  line-height: 1;
  margin: 0 auto 10px;
  text-align: center;
  align-self: center;
  white-space: nowrap;
}
.shop-rarity-badge.rarity-normal {
  color: #d4d4d4;
  background: rgba(191,191,191,.1);
  border: 1px solid rgba(191,191,191,.2);
}
.shop-rarity-badge.rarity-rare {
  color: #5dadff;
  background: rgba(58,141,255,.1);
  border: 1px solid rgba(58,141,255,.25);
}
.shop-rarity-badge.rarity-heroic {
  color: #c084fc;
  background: rgba(163,53,238,.1);
  border: 1px solid rgba(163,53,238,.25);
}
.shop-rarity-badge.rarity-legendary {
  color: #ffaa40;
  background: rgba(255,128,0,.1);
  border: 1px solid rgba(255,128,0,.25);
}
.shop-rarity-badge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.shop-rarity-badge.rarity-normal::before    { background: #BFBFBF; }
.shop-rarity-badge.rarity-rare::before      { background: #3A8DFF; }
.shop-rarity-badge.rarity-heroic::before    { background: #A335EE; }
.shop-rarity-badge.rarity-legendary::before { background: #FF8000; }

/* ── Global focus-visible ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Button disabled states ── */
button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Table scrollbar styling ── */
.data-table-wrapper,
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.data-table-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.data-table-wrapper::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

.data-table-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.data-table-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Dynamic font sizing ── */
.stat-value {
  font-size: clamp(20px, 5vw, 32px);
}

.top-bar h1 {
  font-size: clamp(16px, 3vw, 22px);
}

/* ── Point settings layout ── */
.pt-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pt-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pt-section-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}

.pt-section-label i {
  font-size: 14px;
  opacity: 0.7;
}

.pt-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pt-section-hint {
  font-size: 18px;
  color: var(--text-muted);
  margin-top: -6px;
}

.pt-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pt-cards-row.pt-cards-half {
  display: flex;
  gap: 12px;
}

.pt-cards-row.pt-cards-half > .pt-card {
  flex: 0 0 calc(25% - 9px);
}

/* Point card */
.pt-card {
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(10, 10, 16, 0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: visible;
}

.pt-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--_accent-color, var(--accent));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pt-card:hover {
  border-color: color-mix(in srgb, var(--_accent-color, var(--accent)) 35%, transparent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 10px color-mix(in srgb, var(--_accent-color, var(--accent)) 12%, transparent);
  transform: translateY(-2px);
}

.pt-card:hover::before {
  opacity: 1;
}

/* Accent colors */
.pt-card[data-accent="emerald"] { --_accent-color: #34d399; }
.pt-card[data-accent="blue"] { --_accent-color: #60a5fa; }
.pt-card[data-accent="amber"] { --_accent-color: #fbbf24; }
.pt-card[data-accent="gold"] { --_accent-color: #f59e0b; }
.pt-card[data-accent="cyan"] { --_accent-color: #22d3ee; }
.pt-card[data-accent="purple"] { --_accent-color: #a78bfa; }
.pt-card[data-accent="rose"] { --_accent-color: #fb7185; }
.pt-card[data-accent="orange"] { --_accent-color: #fb923c; }

.pt-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pt-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--_accent-color, var(--accent)) 14%, transparent);
  color: var(--_accent-color, var(--accent));
  font-size: 14px;
  flex-shrink: 0;
}

.pt-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pt-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.pt-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pt-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pt-field-label {
  font-size: 18px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pt-field-input {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pt-field-input input {
  width: 90px;
  padding: 5px 8px;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-family: inherit;
  transition: all 0.2s ease;
}

.pt-field-input input:focus {
  outline: none;
  border-color: var(--_accent-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent-color, var(--accent)) 15%, transparent);
  background: rgba(255, 255, 255, 0.06);
}

.pt-field-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 16px;
}

.pt-hint {
  font-size: 18px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Tablet responsive */
@media (max-width: 900px) {
  .pt-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .holiday-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile responsive */
@media (max-width: 640px) {
  .pt-layout {
    gap: 22px;
  }
  .pt-cards-row {
    grid-template-columns: 1fr;
  }
  .pt-cards-row.pt-cards-half {
    flex-wrap: wrap;
  }
  .pt-cards-row.pt-cards-half > .pt-card {
    flex: 1 1 100%;
  }
  .holiday-grid {
    grid-template-columns: 1fr;
  }
  .holiday-card {
    gap: 10px;
    padding: 10px 14px;
  }
  .holiday-date-badge {
    min-width: 44px;
    padding: 4px 6px;
  }
  .holiday-name {
    font-size: 15px;
  }
  .holiday-reward-input input {
    width: 72px;
    font-size: 15px;
    padding: 4px 8px;
  }
  .pt-section-hint {
    font-size: 15px;
  }
}

/* ── User dashboard ── */
/* ═══ USER DASHBOARD — Tactical HUD Redesign ═══ */

/* ── Dashboard 2-Column Layout (login-page inspired) ── */
.hud-dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-content: start;
}

.hud-dash__left,
.hud-dash__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Hero Section (full width) ── */
.hud-hero {
  margin-bottom: 4px;
  animation: riseUp 0.4s 0.1s var(--ease-out) backwards;
}

.hud-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.hud-hero__tag-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--accent);
}

.hud-hero__headline {
  font-family: var(--font-brand);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.hud-hero__headline em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 35%, transparent);
  position: relative;
}

.hud-hero__headline em::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: -2px;
  right: -2px;
  height: 4px;
  background: var(--accent);
  opacity: 0.2;
  transform: skewX(-16deg);
  border-radius: 2px;
}

.hud-hero__sub {
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Inline Sections (no card wrapper) ── */
.hud-inline-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud-inline-section .hud-section__tag {
  margin-bottom: 0;
}

/* ── Twin: 2-col inline sections, equal height ── */
.hud-twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* ── Rank Block: 2-col side by side ── */
.hud-rank-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hud-rank-col__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-rank-col__label i {
  font-size: 12px;
}

/* ── Quad Row: 2 groups side by side, each group is 2-col ── */
.hud-quad-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hud-quad-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hud-quad-group > .hud-section__tag {
  margin: 0;
}

.hud-quad-group .hud-twin {
  flex: 1;
}

/* Video stretches to fill neighbor height */
.hud-video-fixed {
  display: flex;
  flex-direction: column;
}

.hud-video-fixed .home-video-frame-wrap {
  position: relative;
  flex: 1;
  min-height: 140px;
  border-radius: 10px;
  overflow: hidden;
}

.hud-video-fixed .home-video-frame-wrap iframe,
.hud-video-fixed .home-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Video Row: 2-col ── */
.hud-video-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.hud-video-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Feature Strip ── */
.hud-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.hud-feat {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  transition: all 0.3s var(--ease-out);
  overflow: hidden;
}

/* Top accent line — always visible, colored per card */
.hud-feat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--_fc, var(--accent)), transparent);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .hud-feat:hover {
    border-color: color-mix(in srgb, var(--_fc, var(--accent)) 25%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--_fc, var(--accent)) 10%, transparent);
  }
  .hud-feat:hover::before { opacity: 1; }
}

.hud-feat__icon {
  font-size: 20px;
  color: var(--_fc, var(--accent));
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--_fc, var(--accent)) 30%, transparent));
}

.hud-feat__value {
  font-family: var(--font-tactical);
  font-size: clamp(13px, 1.8vw, 20px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-feat__label {
  font-family: var(--font-tactical);
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Section Dividers (tactical tags) ── */
.hud-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 8px;
  animation: slideInTag 0.4s var(--ease-out) backwards;
}

.hud-section__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.hud-section__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}

.hud-section__divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .hud-dash { grid-template-columns: 1fr; gap: 16px; min-height: auto; }
  .hud-rank-block { grid-template-columns: 1fr 1fr; }
  .hud-quad-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hud-features { grid-template-columns: repeat(2, 1fr); }
  .hud-feat { padding: 10px 8px; }
  .hud-feat__value { font-size: 14px; }
  .hud-hero__headline { font-size: 20px; }
  .hud-video-row { grid-template-columns: 1fr; }
  .hud-rank-block { grid-template-columns: 1fr; }
  .hud-twin { grid-template-columns: 1fr; }
  .hud-quad-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hud-features { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hud-section__tag { font-size: 9px; letter-spacing: 3px; }
  .hud-hero__tag { font-size: 10px; letter-spacing: 3px; }
}

/* ── HUD Features: 3-column variant ── */
.hud-features--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .hud-features--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .hud-features--3 { grid-template-columns: 1fr; } }

/* ── HUD Glass Panel ── */
.hud-glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.hud-glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* ── HUD Table Wrapper ── */
.hud-table-wrap {
  overflow-x: auto;
}

/* ── HUD Filter Panel ── */
.hud-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.hud-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hud-filter-grid { grid-template-columns: 1fr; }
}

/* ── HUD Twin Variants ── */
.hud-twin--support {
  align-items: start;
}

.hud-twin--profile {
  align-items: start;
}

.hud-twin--donation {
  align-items: stretch;
}

@media (max-width: 900px) {
  .hud-twin--support,
  .hud-twin--profile,
  .hud-twin--donation { grid-template-columns: 1fr; }
}

/* ── HUD Donation Styles ── */
.hud-donation-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hud-donation-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 30%, transparent));
}

.hud-donation-title {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.hud-donation-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud-donation-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hud-donation-step strong { color: var(--text); }

.hud-donation-step--warn {
  color: #fbbf24;
  font-weight: 600;
}

.hud-donation-step-badge {
  flex-shrink: 0;
  font-size: 1rem;
}

.hud-donation-info {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.hud-donation-info p { margin: 0 0 4px; }

.hud-donation-qr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.hud-donation-qr-img {
  width: 100%;
  max-width: 220px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hud-donation-qr-label {
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.hud-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hud-link:hover {
  color: var(--accent-hover);
}

/* ── HUD Market Styles ── */
.hud-market-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hud-market-disclaimer > i {
  color: #fbbf24;
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.hud-market-disclaimer strong {
  display: block;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 4px;
}

.hud-market-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.ud-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 20px;
}

.ud-stat {
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--_ud-color, var(--accent)) 12%, transparent);
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Always-visible colored bottom accent bar */
.ud-stat::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--_ud-color, var(--accent)), transparent);
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

/* Top shimmer */
.ud-stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

@media (hover: hover) {
  .ud-stat:hover {
    border-color: color-mix(in srgb, var(--_ud-color, var(--accent)) 30%, transparent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--_ud-color, var(--accent)) 12%, transparent);
    transform: translateY(-3px);
  }
  .ud-stat:hover::before { opacity: 1; }
}

.ud-stat[data-accent="blue"] { --_ud-color: var(--accent); }
.ud-stat[data-accent="emerald"] { --_ud-color: #34d399; }
.ud-stat[data-accent="amber"] { --_ud-color: #fbbf24; }
.ud-stat[data-accent="purple"] { --_ud-color: #a78bfa; }

.ud-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: color-mix(in srgb, var(--_ud-color, var(--accent)) 12%, transparent);
  color: var(--_ud-color, var(--accent));
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  box-shadow: 0 0 12px color-mix(in srgb, var(--_ud-color, var(--accent)) 8%, transparent);
}

@media (hover: hover) {
  .ud-stat:hover .ud-stat-icon {
    transform: scale(1.1);
    box-shadow: 0 0 20px color-mix(in srgb, var(--_ud-color, var(--accent)) 20%, transparent);
  }
}

.ud-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ud-stat-value {
  font-family: var(--font-tactical);
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.ud-stat-label {
  font-family: var(--font-tactical);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ═══ Dashboard Content Grid ═══ */
.ud-content-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 240px;
  gap: 10px;
  align-items: stretch;
}

.ud-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s var(--ease-out);
  position: relative;
}

/* Accent top line on each card */
.ud-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--_uc, var(--accent)) 40%, transparent), transparent);
  opacity: 0.3;
  transition: opacity 0.3s ease;
  z-index: 1;
}

@media (hover: hover) {
  .ud-card:hover {
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent);
    transform: translateY(-2px);
  }
  .ud-card:hover::before { opacity: 0.7; }
}

.ud-card-wide {
  grid-column: span 2;
}

.ud-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--_uc, var(--accent)) 6%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--_uc, var(--accent)) 3%, transparent), transparent);
}

.ud-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: color-mix(in srgb, var(--_uc, var(--accent)) 12%, transparent);
  color: var(--_uc, var(--accent));
  flex-shrink: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--_uc, var(--accent)) 10%, transparent);
}

.ud-card-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
}

.ud-card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.ud-card-body-list {
  padding: 10px 16px;
  justify-content: flex-start;
  overflow-y: auto;
}

.ud-card-body .home-rank-list { gap: 4px; }
.ud-card-body .home-patch-hero { flex: 1; }
.ud-card-body .home-video-frame-wrap { flex: 1; padding-top: 0; position: relative; }
.ud-card-body .home-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 1200px) {
  .ud-stats-row { grid-template-columns: repeat(2, 1fr); }
  .ud-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ud-card-wide { grid-column: span 2; }
}

@media (max-width: 768px) {
  .ud-stats-row { grid-template-columns: 1fr 1fr; }
  .ud-content-grid { grid-template-columns: 1fr; }
  .ud-card-wide { grid-column: span 1; }
}

/* ── Weekly activity chart — Tactical ── */
.wc-wrap { display: flex; flex-direction: column; gap: 14px; }
.wc-total { display: flex; align-items: baseline; gap: 8px; }
.wc-total-num { font-family: var(--font-tactical); font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.wc-total-label { font-family: var(--font-tactical); font-size: .6rem; color: rgba(255, 255, 255, 0.35); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.wc-rows { display: flex; flex-direction: column; gap: 6px; }
.wc-row { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px; transition: opacity .2s; }
.wc-row.wc-future { opacity: .3; }
.wc-day { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-align: center; }
.wc-row.wc-today .wc-day { color: var(--accent-light); }
.wc-track { height: 18px; border-radius: 5px; background: rgba(255,255,255,.04); overflow: hidden; position: relative; }
.wc-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, rgba(56,189,248,.6), #38bdf8); transition: width .8s cubic-bezier(.22,1,.36,1); }
.wc-row.wc-today .wc-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent-light)); }
.wc-track { cursor: default; }
.wc-row:hover .wc-fill { filter: brightness(1.2); }

/* ── Attendance heatmap ── */
/* Attendance heatmap */
.ah-wrap { display: flex; flex-direction: column; height: 100%; }
.ah-grid { flex: 1; display: flex; flex-direction: column; }
.ah-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; flex: 1; }
.ah-row.ah-header { flex: 0 0 auto; margin-bottom: 2px; }
.ah-cell { display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.ah-day-label { font-size: .62rem; color: rgba(255,255,255,.35); font-weight: 600; letter-spacing: .03em; }
.ah-day { background: rgba(255,255,255,.03); color: rgba(255,255,255,.22); transition: background .2s, color .2s; }
.ah-day:hover { background: rgba(255,255,255,.06); }
.ah-attended { background: rgba(52,211,153,.16); color: #34d399; }
.ah-attended:hover { background: rgba(52,211,153,.25); }
.ah-missed { background: rgba(255,255,255,.02); color: rgba(255,255,255,.12); }
.ah-today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-light); }
.ah-today.ah-attended { box-shadow: inset 0 0 0 1.5px #34d399; }

/* ── Holiday cards ── */
.holiday-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.holiday-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(10, 10, 16, 0.5);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  transition: all 0.25s var(--ease-out);
}

.holiday-card:hover {
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 8px rgba(6, 182, 212, 0.1);
}

.holiday-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(6, 182, 212, 0.2);
  flex-shrink: 0;
}

.holiday-month {
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.holiday-day {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}

.holiday-lunar .holiday-date-badge {
  background: linear-gradient(145deg, rgba(251, 146, 60, 0.18), rgba(245, 158, 11, 0.1));
  border-color: rgba(251, 146, 60, 0.25);
}

.holiday-lunar .holiday-month {
  color: var(--orange, #fb923c);
}

.holiday-lunar-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.7;
}

.holiday-info {
  flex: 1;
  min-width: 0;
}

.holiday-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holiday-reward-input {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.holiday-reward-input input {
  width: 90px;
  padding: 6px 10px;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  font-family: inherit;
}

.holiday-reward-input input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
  background: rgba(251, 191, 36, 0.1);
}

.holiday-reward-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

/* ── Nickname Log Timeline ── */
.nicklog-limit-select {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.82em;
}

.nicklog-timeline {
  padding: 20px 24px;
  position: relative;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.nicklog-timeline::before {
  content: '';
  position: absolute;
  left: 35px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border-radius: 1px;
}

.nicklog-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.9em;
}

.nicklog-entry {
  position: relative;
  padding-left: 32px;
  margin-bottom: 6px;
  animation: nicklogSlideIn 0.25s ease both;
}

@keyframes nicklogSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.nicklog-entry-dot {
  position: absolute;
  left: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border: 2px solid var(--bg-card, #1a1b2e);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
  z-index: 1;
}

.nicklog-entry-card {
  font-family: var(--font-ui);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 10px 36px 10px 14px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}

.nicklog-entry-card:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

.nicklog-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.nicklog-entry-user {
  font-weight: 700;
  font-size: 0.88em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.nicklog-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nicklog-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72em;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: rgba(180,160,255,0.9);
  white-space: nowrap;
}

.nicklog-time {
  font-size: 0.72em;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nicklog-entry-diff {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nicklog-diff-old {
  font-size: 0.82em;
  color: rgba(239,68,68,0.85);
  text-decoration: line-through;
  text-decoration-color: rgba(239,68,68,0.3);
  font-weight: 500;
}

.nicklog-diff-arrow {
  font-size: 0.65em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.nicklog-diff-new {
  font-size: 0.82em;
  color: rgba(34,197,94,0.9);
  font-weight: 600;
}

.nicklog-delete-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.nicklog-entry-card:hover .nicklog-delete-btn {
  opacity: 1;
}

.nicklog-delete-btn:hover {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.nicklog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.nicklog-page-info {
  font-size: 0.82em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .nicklog-timeline { padding: 16px 16px 16px 20px; }
  .nicklog-timeline::before { left: 27px; }
  .nicklog-entry { padding-left: 24px; }
  .nicklog-entry-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nicklog-entry-user { max-width: 100%; }
}

/* ─── Notification Dispatch UI ─── */
.notif-dispatch-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  gap: 20px;
}

.notif-dispatch-compose {
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-dispatch-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-dispatch-preview-wrap {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 25%, transparent) transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-dispatch-preview-wrap::-webkit-scrollbar { width: 4px; }
.notif-dispatch-preview-wrap::-webkit-scrollbar-track { background: transparent; }
.notif-dispatch-preview-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 4px; }

@media (max-width: 1400px) {
  .notif-dispatch-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .notif-dispatch-preview-wrap { position: static; max-height: none; overflow-y: visible; }
}

@media (max-width: 900px) {
  .notif-dispatch-layout { grid-template-columns: 1fr; }
}

/* Panels */
.notif-panel {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--glass-border);
}

.notif-panel-title {
  flex: 1;
  min-width: 0;
}

.notif-panel-body {
  padding: 14px;
}

.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  letter-spacing: 0.02em;
}

/* Member toolbar */
.notif-member-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.notif-search-wrap {
  flex: 1;
  position: relative;
}

.notif-search-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
}

.notif-search-wrap input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  font-size: 13px;
  background: var(--bg-dark);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--duration-fast) ease;
}

.notif-search-wrap input:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Member list */
.notif-member-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent;
}

.notif-member-list::-webkit-scrollbar { width: 4px; }
.notif-member-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 4px; }

.notif-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  font-size: 13px;
  color: var(--text-secondary);
}

.notif-member-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.notif-member-item.is-selected {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}

.notif-member-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.notif-member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.notif-member-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 10px;
}

.notif-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Options */
.notif-options-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-schedule-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-schedule-input-wrap {
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Embed form */
.notif-embed-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-brand);
  line-height: 1.5;
}

.notif-fields-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Preview mention tag */
.notif-preview-mention {
  padding: 4px 0 8px;
  font-size: 16px;
  color: #e0e2e6;
}

.notif-mention-tag {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(88, 101, 242, 0.3);
  color: #dee0fc;
  font-weight: 500;
}

/* Scheduled list */
.notif-scheduled-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
}

.notif-scheduled-item:last-child {
  border-bottom: none;
}

.notif-scheduled-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-scheduled-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-scheduled-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* Preset list */
.notif-preset-actions {
  margin-bottom: 10px;
}

.notif-preset-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-dark);
  transition: background var(--duration-fast) ease;
}

.notif-preset-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.notif-preset-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

.notif-preset-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-preset-meta {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-preset-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Variable chips */
.notif-var-help {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
}

.notif-var-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.notif-var-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-family: monospace;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  cursor: pointer;
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.notif-var-chip:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: scale(1.04);
}

/* Send result panel */
.notif-result-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.notif-result-label {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.notif-result-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-result-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.notif-result-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* History list */
.notif-history-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
}

.notif-history-item:last-child {
  border-bottom: none;
}

.notif-history-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notif-history-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== style-user-panels.css ===== */
/* user.ejs: attendance calendar + leaderboard */
.attendance-calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.attendance-calendar-month {
  min-width: 170px;
  text-align: center;
  font-family: var(--font-tactical);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.attendance-calendar-stats {
  margin: 0 0 14px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.attendance-calendar-stats .stat-card {
  padding: 12px 32px 12px 16px;
  gap: 14px;
  border-radius: 12px;
  min-width: 250px;
  justify-content: flex-start;
}
.attendance-calendar-stats .stat-icon {
  width: 44px;
  height: 44px;
  font-size: 18px;
  border-radius: 10px;
}
.attendance-calendar-stats .stat-value {
  font-size: 26px;
}
.attendance-calendar-stats .stat-label {
  font-size: 16px;
}
.attendance-calendar-weekdays,
.attendance-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.attendance-calendar-weekdays {
  margin-bottom: 8px;
}
.attendance-weekday,
.attendance-day-cell {
  border-radius: 10px;
  text-align: center;
  padding: 10px 4px;
}
.attendance-weekday {
  font-family: var(--font-tactical);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--text-secondary, #94a3b8);
  background: rgba(148, 163, 184, 0.08);
}
.attendance-day-cell {
  position: relative;
  min-height: 90px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.25s var(--ease-out);
}

.attendance-day-cell:not(.empty):hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: rgba(15, 23, 42, 0.45);
  transform: scale(1.02);
}
.attendance-day-cell.empty {
  border-style: dashed;
  opacity: 0.5;
}
.attendance-day-cell .day-number {
  position: absolute;
  top: 10px;
  left: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary, #d1d5db);
  z-index: 1;
}
.attendance-day-cell.is-attended {
  border-color: rgba(52, 211, 153, 0.45);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.06));
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.12), inset 0 0 12px rgba(52, 211, 153, 0.06);
}
.attendance-day-stamp {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(239, 68, 68, 0.35));
  position: absolute;
  inset: 5%;
}
/* attendance date popup */
.swal-attendance-popup {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-radius: 16px !important;
}
.swal-attendance-count {
  text-align: center;
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 10px;
}
.swal-attendance-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.swal-attendance-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.swal-attendance-rank {
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  font-size: 0.85rem;
}
.swal-attendance-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swal-attendance-time {
  text-align: right;
  font-size: 0.8rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.swal-attendance-empty {
  text-align: center;
  color: #94a3b8;
  padding: 24px 0;
  font-size: 0.95rem;
}
.leaderboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.leaderboard-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.leaderboard-type-tab {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 999px;
  background: rgba(10, 10, 18, 0.4);
  color: inherit;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}
.leaderboard-type-tab:hover:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.leaderboard-type-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent-hover) 18%, transparent));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 15%, transparent);
}
.leaderboard-scope-label {
  margin-bottom: 8px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.9rem;
  font-weight: 500;
}
.leaderboard-header-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 120px;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-tactical);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.leaderboard-list {
  display: grid;
  gap: 8px;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(4px);
  padding: 10px 12px;
  transition: all 0.2s var(--ease-out);
}

.leaderboard-row:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  background: rgba(15, 23, 42, 0.35);
  transform: translateX(3px);
}
.leaderboard-row.is-me {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.26), rgba(22, 163, 74, 0.16));
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18) inset, 0 0 12px rgba(34, 197, 94, 0.1);
}

/* Top 3 neon glow */
.leaderboard-row:nth-child(1) {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(234, 179, 8, 0.05));
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.08);
}
.leaderboard-row:nth-child(2) {
  border-color: rgba(148, 163, 184, 0.35);
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.04));
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.06);
}
.leaderboard-row:nth-child(3) {
  border-color: rgba(217, 119, 87, 0.35);
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.1), rgba(217, 119, 87, 0.04));
  box-shadow: 0 0 8px rgba(217, 119, 87, 0.06);
}

.leaderboard-rank {
  font-family: var(--font-tactical);
  font-weight: 700;
  font-size: 0.9rem;
}
.leaderboard-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-detail {
  margin-top: 3px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.78rem;
  white-space: normal;
}
.leaderboard-value {
  text-align: right;
  font-family: var(--font-tactical);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9rem;
}
.leaderboard-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}
.lb-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lb-page-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.lb-page-btn.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent-hover) 22%, transparent));
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.lb-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.lb-page-btn.lb-page-my {
  margin-left: 8px;
  gap: 4px;
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
.lb-page-btn.lb-page-my:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.6);
}
@media (max-width: 900px) {
  .attendance-calendar-stats {
    gap: 12px;
  }
  .attendance-day-cell {
    min-height: 72px;
  }
  .leaderboard-summary-grid {
    grid-template-columns: 1fr;
  }
  .leaderboard-header-row {
    grid-template-columns: 90px minmax(0, 1fr) 95px;
  }
  .leaderboard-row {
    grid-template-columns: 90px minmax(0, 1fr) 95px;
  }
}
@media (max-width: 620px) {
  .attendance-calendar-stats {
    gap: 8px;
  }
  .attendance-calendar-weekdays,
  .attendance-calendar-grid {
    gap: 5px;
  }
  .attendance-weekday,
  .attendance-day-cell {
    padding: 8px 2px;
  }
  .leaderboard-header-row {
    display: none;
  }
}

/* ── Shop & Inventory Premium Cards ── */
/* ── Shop Split Layout ── */
.shop-split-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}
.shop-split-left {
  min-width: 0;
}
.shop-split-right {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.shop-split-right::-webkit-scrollbar { width: 4px; }
.shop-split-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
/* ── Shop Balance Bar ── */
.shop-balance-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-hover) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-hover) 20%, transparent);
  color: var(--text-primary, #e2e8f0);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-hover) 8%, transparent);
  backdrop-filter: blur(8px);
}
/* ── Shop Toolbar ── */
.shop-toolbar {
  margin-bottom: 20px;
}
.shop-toolbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.shop-toolbar-row:last-child {
  margin-bottom: 0;
}
.shop-toolbar .shop-balance-header {
  margin-bottom: 0;
  flex: 1;
}
/* ── Shop Filter Groups ── */
.shop-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-filter-label {
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 4px;
  white-space: nowrap;
}
.shop-currency-btn,
.shop-rarity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,.15);
  background: rgba(10,10,18,.4);
  color: var(--text-secondary, #94a3b8);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  min-height: 36px;
}
.shop-currency-btn:hover,
.shop-rarity-toggle:hover {
  border-color: rgba(148,163,184,.45);
  background: rgba(15,23,42,.6);
  transform: translateY(-1px);
}
.shop-currency-btn.is-active {
  border-color: color-mix(in srgb, var(--accent-hover) 50%, transparent);
  background: color-mix(in srgb, var(--accent-hover) 15%, transparent);
  color: #a5b4fc;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-hover) 15%, transparent);
}
.shop-rarity-toggle.is-active {
  border-color: color-mix(in srgb, var(--rarity-color, #94a3b8) 60%, transparent);
  background: color-mix(in srgb, var(--rarity-color, #94a3b8) 18%, transparent);
  color: var(--rarity-color, #e2e8f0);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rarity-color, #94a3b8) 15%, transparent);
}
.shop-filter-count {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  color: inherit;
  line-height: 1.4;
}
/* ── Shop Major Category (Type) Sections ── */
.shop-type-section {
  background: var(--glass-bg, rgba(19, 19, 27, 0.65));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  transition: border-color 0.3s ease;
}
.shop-type-section:hover {
  border-color: color-mix(in srgb, var(--accent) 15%, transparent);
}
.shop-type-section:last-child {
  margin-bottom: 0;
}
.shop-type-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #e2e8f0);
}
.shop-type-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.shop-type-header .shop-cat-count {
  margin-left: auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  background: rgba(255,255,255,.04);
  padding: 2px 10px;
  border-radius: 99px;
}
/* ── Shop Rarity Sections ── */
.shop-rarity-section {
  margin-bottom: 24px;
}
.shop-rarity-section:last-child {
  margin-bottom: 0;
}
.shop-rarity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
}
.shop-rarity-dot {
  font-size: 18px;
  flex-shrink: 0;
}
.shop-rarity-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  vertical-align: middle;
}
.shop-rarity-header .shop-cat-count {
  margin-left: auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  background: rgba(255,255,255,.04);
  padding: 2px 10px;
  border-radius: 99px;
}
/* ── Shop Try-On Preview Panel ── */
.shop-tryon-panel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-hover) 14%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-hover) 25%, transparent);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-hover) 8%, transparent);
}
.shop-tryon-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Price table */
.shop-price-table {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-price-table-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-price-matrix {
  border-collapse: collapse;
  font-size: 16px;
  white-space: nowrap;
  width: 100%;
}
.shop-price-matrix th,
.shop-price-matrix td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.shop-price-matrix th {
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.shop-price-matrix td:first-child,
.shop-price-matrix th:first-child {
  text-align: left;
  padding-left: 0;
}
.shop-price-matrix td {
  color: var(--text-secondary, #94a3b8);
}
.shop-price-matrix tr:last-child td {
  border-bottom: none;
}
/* Preview */
.shop-tryon-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.shop-tryon-nickname {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #2b2d31;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 16px 28px;
  min-width: 200px;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.shop-tryon-hint {
  font-size: 18px;
  color: var(--text-muted, #6b7280);
}
/* Receipt */
.shop-tryon-receipt {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-receipt-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.shop-receipt-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.shop-receipt-item-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shop-receipt-divider {
  border: none;
  border-top: 1px dashed rgba(255,255,255,.12);
  margin: 4px 0;
}
.shop-receipt-total {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-align: right;
}
.shop-receipt-empty {
  font-size: 18px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  padding: 12px 0;
}
@media (max-width: 1100px) {
  .shop-split-body {
    grid-template-columns: 1fr 300px;
    gap: 16px;
  }
}
@media (max-width: 900px) {
  .shop-split-body {
    grid-template-columns: 1fr 280px;
    gap: 12px;
  }
  .shop-item-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}
@media (max-width: 768px) {
  .shop-split-body {
    display: flex;
    flex-direction: column;
    margin: 0 -4px;
  }
  .shop-split-left {
    padding-bottom: 260px;
    width: 100%;
  }
  .shop-split-right {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: none;
    z-index: 100;
    overflow: visible;
  }
  .shop-split-right .shop-tryon-panel {
    border-radius: 18px 18px 0 0;
    padding: 10px 16px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.5);
    background: linear-gradient(135deg, rgba(30,30,42,.98) 0%, rgba(24,24,31,.98) 100%);
    border-bottom: none;
  }
  .shop-split-right .shop-tryon-layout {
    gap: 10px;
  }
  .shop-split-right .shop-price-table {
    display: none;
  }
  .shop-split-right .shop-tryon-nickname {
    padding: 10px 16px;
    min-width: auto;
  }
  .shop-split-right .shop-tryon-nickname .shop-preview-name {
    font-size: 1.1rem !important;
  }
  .shop-type-section {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .shop-toolbar {
    margin-bottom: 12px;
  }
  .shop-item-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .shop-split-body {
    margin: 0 -8px;
  }
  .shop-type-section {
    padding: 10px;
    border-radius: 10px;
  }
  .shop-item-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}
.shop-tryon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--rarity-color, #94a3b8) 35%, transparent);
  background: color-mix(in srgb, var(--rarity-color, #94a3b8) 8%, transparent);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  white-space: nowrap;
}
.shop-tryon-chip-price {
  color: #facc15;
  font-weight: 700;
  font-size: 16px;
}
.shop-tryon-chip-remove {
  background: none;
  border: none;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px;
  line-height: 1;
}
.shop-tryon-chip-remove:hover {
  color: #ef4444;
}
.shop-tryon-buy {
  margin-left: 4px;
  white-space: nowrap;
}
/* Owned badge */
.shop-owned-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(34,197,94,.18);
  color: #22c55e;
  white-space: nowrap;
}
.shop-item-card.is-owned {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.04);
}
/* Card selected for try-on */
.shop-item-card.is-tryon-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 16px color-mix(in srgb, var(--accent) 15%, transparent);
}
.shop-item-card.is-tryon-selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* ── Shop Cart Modal (Swal) ── */
.swal-cart-popup {
  max-width: 440px !important;
}
.swal-cart-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.swal-cart-item-header {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.swal-cart-duration-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swal-cart-duration-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s;
}
.swal-cart-duration-opt:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-hover) 50%, transparent);
  background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
}
.swal-cart-dur-days {
  flex: 1;
  font-weight: 600;
}
.swal-cart-dur-price {
  color: #facc15;
  font-weight: 700;
  font-size: 18px;
}
.swal-cart-single {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 18px;
}
.swal-cart-receipt {
  font-size: 18px;
  line-height: 1.8;
}
.swal-cart-receipt-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
/* ── Shop Loading & Empty States ── */
.shop-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--text-muted, #6b7280);
  font-size: 18px;
}
.shop-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: shop-spin .8s linear infinite;
}
@keyframes shop-spin {
  to { transform: rotate(360deg); }
}
.shop-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--text-muted, #6b7280);
}
.shop-empty-state i {
  font-size: 2.5rem;
  opacity: .4;
}
.shop-empty-state p {
  margin: 0;
  font-size: 18px;
}
/* ── Shop Category Header (Inventory) ── */
.shop-category-header {
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #e2e8f0);
  margin: 24px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.shop-category-header:first-child {
  margin-top: 0;
}
.shop-category-header i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-light);
  font-size: 16px;
  flex-shrink: 0;
}
/* ── Transaction History Styles ── */
.tx-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tx-badge-coin {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.tx-badge-point {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.tx-amount-positive {
  color: #4ade80;
  font-weight: 700;
}
.tx-amount-negative {
  color: #f87171;
  font-weight: 700;
}
.tx-boost-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}
.tx-boost-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tx-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.tx-pagination .tx-page-info {
  font-size: 16px;
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
}
/* ── Donation Guide Card ── */
.donation-guide {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.donation-guide-text {
  flex: 1;
  min-width: 240px;
  font-size: 18px;
  line-height: 1.9;
  color: var(--text-secondary, #ccc);
}
.donation-guide-text strong {
  font-weight: 700;
}
.donation-guide-text .donation-highlight {
  color: #FEE500;
}
.donation-guide-text .donation-green {
  color: #22C55E;
}
.donation-guide-text .donation-purple {
  color: #A78BFA;
}
.donation-guide-text .donation-blue {
  color: #60A5FA;
}
.donation-guide-text .donation-amber {
  color: #F59E0B;
}
.donation-guide-text .donation-primary {
  color: var(--text-primary, #fff);
  font-size: 20px;
  font-weight: 700;
}
.donation-guide-link {
  color: #FEE500;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.donation-guide-link:hover {
  color: #ffe066;
}
.donation-warning-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  background: rgba(254, 229, 0, 0.1);
  border: 1px solid rgba(254, 229, 0, 0.3);
  border-radius: 8px;
  font-weight: 700;
  color: #FEE500;
  font-size: 16px;
}
.donation-qr {
  flex-shrink: 0;
}
.donation-qr img {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  border: 2px solid rgba(254, 229, 0, 0.5);
  box-shadow: 0 4px 20px rgba(254, 229, 0, 0.1);
  transition: transform 0.2s ease;
}
.donation-qr img:hover {
  transform: scale(1.05);
}
/* Donation table amount colors */
.donation-amount-in {
  color: #22c55e;
  font-weight: 700;
}
.donation-amount-out {
  color: #ef4444;
  font-weight: 700;
}
.donation-type-in {
  color: #22c55e;
  font-weight: 600;
}
.donation-type-out {
  color: #ef4444;
  font-weight: 600;
}
/* Donation pagination */
.donation-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.donation-page-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 18, 0.5);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
  min-height: 36px;
}
.donation-page-btn:hover:not(:disabled) {
  border-color: rgba(254, 229, 0, 0.4);
  background: rgba(254, 229, 0, 0.08);
}
.donation-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.donation-page-btn.is-active {
  border-color: #FEE500;
  background: #FEE500;
  color: #3C1E1E;
  font-weight: 700;
}
/* ── Shop Item Grid ── */
.shop-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
/* ── Shop Item Card ── */
.shop-item-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .25s, transform .25s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}
.shop-item-card:hover {
  border-color: color-mix(in srgb, var(--accent-hover) 50%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-hover) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-hover) 15%, transparent);
  transform: translateY(-3px);
}
.shop-item-card.is-equipped {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px #22c55e, 0 4px 16px rgba(34,197,94,.15);
  cursor: default;
}
/* Color accent bar (top border) for color items — disabled */
.shop-item-card.has-color-bar {
  border-top: none;
}
.shop-item-card.has-color-bar.has-gradient-bar {
  border-top: none;
  border-image: none;
  border-image-slice: 1 0 0 0;
}
/* ── Preview area ── */
.shop-card-preview {
  padding: 18px 12px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  max-height: 80px;
  overflow: hidden;
  background: rgba(43,45,49,.5);
  border-radius: 8px;
  margin: 8px 8px 0;
}
.shop-preview-strip {
  background: #2b2d31;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.shop-preview-emoji {
  font-size: 1.25rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.shop-preview-name {
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.shop-preview-name.is-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: shop-gradient-shift 3s ease-in-out infinite;
}
@keyframes shop-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Hologram (coin color) */
.shop-preview-name.is-holo {
  background: linear-gradient(90deg, #a9c9ff, #ffbbec, #ffc3a0, #ffbbec, #a9c9ff);
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shop-holo 4s linear infinite;
}
@keyframes shop-holo {
  0%   { background-position: 0%; }
  100% { background-position: 100%; }
}
.shop-preview-tier {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.shop-card-label .emoji {
  width: 1em !important;
  height: 1em !important;
  vertical-align: -0.1em;
}
/* ── Card name label ── */
.shop-card-label {
  padding: 8px 12px 10px;
  font-weight: 600;
  font-size: 18px;
  color: var(--text-primary, #e2e8f0);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Card price tag ── */
.shop-card-price {
  padding: 0 12px 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-align: center;
}
/* Rarity badge styles moved to style-components.css (shared across admin & user) */
/* Rarity glow on card border */
.shop-item-card.rarity-border-rare {
  border-color: rgba(58,141,255,.3);
  box-shadow: 0 0 8px rgba(58,141,255,.15), 0 0 0 1px rgba(58,141,255,.2);
}
.shop-item-card.rarity-border-heroic {
  border-color: rgba(163,53,238,.3);
  box-shadow: 0 0 10px rgba(163,53,238,.18), 0 0 0 1px rgba(163,53,238,.25);
}
.shop-item-card.rarity-border-legendary {
  border-color: rgba(255,128,0,.35);
  box-shadow: 0 0 14px rgba(255,128,0,.2), 0 0 0 1px rgba(255,128,0,.3);
}
/* ── Admin shop management styles ── */
/* Action bar */
.admin-shop-action-bar {
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--glass-bg, rgba(19, 19, 27, 0.65));
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  margin-bottom: 6px;
}
.admin-shop-actions {
  gap: 8px;
}
.admin-shop-total-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  padding: 4px 14px;
  border-radius: 99px;
}
/* Admin card: richer layout than user cards */
.admin-shop-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* System badge */
.admin-shop-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  line-height: 1.3;
  z-index: 2;
  pointer-events: none;
}
.admin-shop-badge-system {
  background: rgba(148, 163, 184, .15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, .25);
  backdrop-filter: blur(4px);
}
/* Card info section (name + rarity badge) */
.admin-shop-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px 4px;
}
.admin-shop-card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
.admin-shop-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-shop-rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--badge-color, #bfbfbf);
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--badge-color) 25%, transparent);
  white-space: nowrap;
}
.admin-shop-rarity-badge .shop-rarity-box {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.admin-shop-currency-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted, #9ca3af);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Price chips row */
.admin-shop-price-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px 4px;
}
.admin-shop-price-chip {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted, #9ca3af);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
/* Admin price table (standalone, not in grid) */
.admin-shop-price-table {
  grid-column: unset;
  margin: 16px 0;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
/* Action buttons (always visible, bottom of card) */
.admin-shop-card-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px 10px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-shop-btn-edit,
.admin-shop-btn-delete {
  font-size: 14px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, #374151);
  background: rgba(255, 255, 255, .04);
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.admin-shop-btn-edit:hover {
  background: color-mix(in srgb, var(--accent-hover) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent-hover) 40%, transparent);
  color: #818cf8;
  transform: translateY(-1px);
}
.admin-shop-btn-delete {
  padding: 5px 10px;
}
.admin-shop-btn-delete:hover {
  background: rgba(239, 68, 68, .15);
  border-color: rgba(239, 68, 68, .4);
  color: #f87171;
  transform: translateY(-1px);
}
/* System item card */
.shop-item-card.is-system {
  opacity: 0.55;
}
.shop-item-card.is-system:hover {
  opacity: 0.75;
}
/* Responsive admin shop */
@media (max-width: 768px) {
  .admin-shop-action-bar {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }
  .admin-shop-actions {
    flex-wrap: wrap;
  }
}
/* ── Inventory card body (used in inventory, not shop) ── */
.shop-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.shop-card-title {
  font-weight: 600;
  font-size: 18px;
  color: var(--text-primary, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-equipped-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 99px;
  background: rgba(34,197,94,.15);
  color: #22c55e;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.shop-equipped-badge.inv-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.shop-card-meta {
  font-size: 18px;
  color: var(--text-secondary, #94a3b8);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.shop-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #facc15;
  font-weight: 700;
  font-size: 18px;
}
.shop-duration-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent-hover) 15%, transparent);
  color: var(--accent-color, #818cf8);
  font-size: 14px;
  font-weight: 600;
}
.shop-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  vertical-align: middle;
  flex-shrink: 0;
}
.shop-card-actions {
  margin-top: auto;
  padding: 0 12px 12px;
}
.shop-card-actions .btn-primary,
.shop-card-actions .btn-secondary {
  width: 100%;
  text-align: center;
}
.shop-card-actions .btn-sm {
  padding: 6px 12px;
  font-size: 18px;
}
/* ── Inventory Summary Bar ── */
.shop-inventory-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.shop-inventory-summary-preview {
  display: flex;
  flex: 0 0 auto;
  min-width: 160px;
}
.shop-inventory-summary-preview .shop-preview-strip {
  min-height: 42px;
  padding: 10px 16px;
}
.shop-inventory-summary-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
}
.shop-inventory-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  color: var(--text-secondary, #94a3b8);
}
.shop-inventory-stat strong {
  color: var(--text-primary, #e2e8f0);
}
.shop-inventory-stat-warn {
  color: #f87171;
  font-weight: 600;
}
.shop-inventory-stat-warn strong {
  color: #ef4444;
}
/* ── Expired ── */
.shop-item-card.is-expired {
  opacity: 0.5;
  border-color: var(--border);
}
.shop-item-card.is-expired:hover {
  opacity: 0.65;
}
.shop-expired-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75em;
  background: rgba(107,114,128,.15);
  color: #9ca3af;
  font-weight: 600;
  white-space: nowrap;
}
.shop-expired-badge.inv-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}
/* ── Expiry Warning ── */
.shop-item-card.is-expiring-soon {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239,68,68,.3), 0 4px 12px rgba(239,68,68,.1);
}
.shop-expiry-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 99px;
  background: rgba(239,68,68,.15);
  color: #f87171;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
/* ── Color Gradient Preview ── */
.shop-preview-strip.has-color-gradient {
  border-bottom: none;
}
@media (max-width: 620px) {
  .shop-item-grid {
    grid-template-columns: 1fr;
  }
  .shop-inventory-summary {
    flex-direction: column;
    align-items: stretch;
  }
  .shop-inventory-summary-preview {
    min-width: auto;
  }
}

/* ── 빵야마켓 ─────────────────────────────────── */
.market-search-bar .input-field {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 12px;
  font-size: .9rem;
  background: var(--card-bg, #2d2d30);
  color: var(--text, #e0e0e0);
}
.market-search-bar .input-field::placeholder {
  color: var(--text-muted, #9ca3af);
}
.market-search-bar select.input-field option {
  background: var(--card-bg, #2d2d30);
  color: var(--text, #e0e0e0);
}
#marketListingsGrid .shop-item-card,
#marketMyListingsContainer .shop-item-card,
#marketWishlistContainer .shop-item-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
#marketListingsGrid .shop-item-card:hover,
#marketMyListingsContainer .shop-item-card:hover,
#marketWishlistContainer .shop-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
#marketListingsGrid .shop-card-preview,
#marketMyListingsContainer .shop-card-preview,
#marketWishlistContainer .shop-card-preview {
  aspect-ratio: 1 / 1;
  max-height: none;
  min-height: 0;
  padding: 0;
  height: auto !important;
}

/* ── Profile two-column layout (legacy) ── */
.profile-two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 620px) {
  .profile-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════ */
/*  Profile View — Full-bleed background                  */
/* ═══════════════════════════════════════════════════════ */

/* ── Full-bleed wrapper ── */
.pv-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 480px;
}

.pv-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.1);
  z-index: 0;
}

.pv-bg-dim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 16, 0.2);
  z-index: 0;
}

.pv-content {
  position: relative;
  z-index: 1;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Identity row ── */
.pv-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pv-avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--ring-color), color-mix(in srgb, var(--accent) 50%, transparent), var(--ring-color));
  background-size: 200% 200%;
  animation: pv-ring 4s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), 0 0 16px color-mix(in srgb, var(--accent) 20%, transparent);
}

@keyframes pv-ring {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.pv-avatar img,
.pv-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(10,10,16,0.6);
}

.pv-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 28px;
}

.pv-name-area {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.pv-name-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pv-name {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}

.pv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-light);
}

.pv-greeting {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  margin: 0;
  text-align: center;
}

/* ── Stat chips ── */
.pv-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.pv-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  background: rgba(10,10,16,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.25s var(--ease-out);
}

.pv-chip:hover {
  background: rgba(10,10,16,0.35);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-2px);
}

.pv-chip i {
  font-size: 16px;
  color: var(--accent-light);
}

.pv-chip strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.pv-chip span {
  font-size: 14px;
  color: var(--text-muted);
}

/* ── Cards grid ── */
.pv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pv-card {
  background: rgba(10,10,16,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
}

.pv-card:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.pv-card-head {
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
}

.pv-card-head i {
  color: var(--accent);
  margin-right: 8px;
  font-size: 15px;
}

.pv-card-body {
  padding: 14px 18px;
}

/* ── Rows (key-value) ── */
.pv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  transition: background 0.2s;
}

.pv-row:hover {
  background: rgba(255,255,255,0.05);
}

.pv-row + .pv-row {
  margin-top: 5px;
}

.pv-row > span {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.pv-row > strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tiers ── */
.pv-tiers {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.pv-tier {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pv-tier img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.pv-tier div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pv-tier small {
  font-family: var(--font-tactical);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.pv-tier strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.pv-tier-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ── Links ── */
.pv-link {
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.2s;
}
.pv-link:hover { color: var(--accent); }

/* ── Agents ── */
.pv-agents {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pv-agent-icon {
  width: 22px;
  height: 22px;
  vertical-align: text-bottom;
  margin-right: 2px;
  border-radius: 3px;
}

.pv-sep { opacity: 0.5; margin: 0 2px; }

.pv-kd {
  padding: 3px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-light);
}

/* ── Achievements ── */
.pv-ach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  transition: all 0.25s var(--ease-out);
}

.pv-ach:hover {
  background: rgba(255,255,255,0.05);
  transform: translateX(3px);
}

.pv-ach + .pv-ach { margin-top: 8px; }

.pv-ach-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 18%, transparent);
}

.pv-ach div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pv-ach strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.pv-ach span {
  font-size: 14px;
  color: var(--text-muted);
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .pv-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pv-grid .pv-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .pv-grid {
    grid-template-columns: 1fr;
  }
  .pv-grid .pv-card:last-child {
    grid-column: span 1;
  }
  .pv-content {
    padding: 20px 16px;
  }
  .pv-name {
    font-size: 22px;
  }
  .pv-avatar {
    width: 64px;
    height: 64px;
  }
  .pv-tiers {
    flex-direction: column;
    align-items: stretch;
  }
  .pv-tier-sep {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 480px) {
  .pv-chips {
    gap: 6px;
  }
  .pv-chip {
    padding: 8px 12px;
    gap: 6px;
  }
  .pv-chip strong {
    font-size: 14px;
  }
  .pv-avatar {
    width: 56px;
    height: 56px;
  }
  .pv-name {
    font-size: 20px;
  }
}

/* ── Mobile: 480px ── */
@media (max-width: 480px) {
  /* Attendance calendar */
  .attendance-day-cell {
    min-height: 46px;
    padding: 3px 2px;
  }
  .attendance-day-cell .day-number {
    top: 3px;
    left: 3px;
    font-size: 0.65rem;
  }
  .attendance-day-cell .attendance-stamp {
    font-size: 0.9rem;
  }
  .attendance-calendar-weekdays,
  .attendance-calendar-grid {
    gap: 2px;
  }
  .attendance-weekday {
    font-size: 0.7rem;
    padding: 4px 1px;
  }
  .attendance-calendar-month {
    font-size: 1.3rem;
    min-width: 130px;
  }
  .attendance-calendar-stats {
    gap: 6px;
  }
  .attendance-calendar-stats .stat-card {
    padding: 8px 12px;
    min-width: 0;
    flex: 1;
  }
  .attendance-calendar-stats .stat-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .attendance-calendar-stats .stat-value {
    font-size: 20px;
  }
  .attendance-calendar-stats .stat-label {
    font-size: 14px;
  }
  /* Leaderboard */
  .leaderboard-header-row,
  .leaderboard-row {
    grid-template-columns: 50px minmax(0, 1fr) 70px;
    gap: 4px;
    padding: 6px 8px;
  }
  .leaderboard-row {
    font-size: 15px;
  }
  .leaderboard-type-tabs {
    gap: 4px;
  }
  .leaderboard-type-tab {
    padding: 5px 10px;
    font-size: 15px;
  }
  /* Shop */
  .shop-item-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .shop-card-label {
    font-size: 15px;
    padding: 6px 8px 2px;
  }
  .shop-card-price {
    font-size: 14px;
    padding: 0 8px 8px;
  }
  .shop-price-tag {
    font-size: 15px;
  }
  .shop-card-preview {
    padding: 12px 8px 4px;
    min-height: 40px;
    max-height: 60px;
    margin: 6px 6px 0;
  }
  .shop-preview-name {
    font-size: 1rem;
  }
  .shop-preview-emoji {
    font-size: 1rem;
  }
  /* Shop toolbar */
  .shop-toolbar-row {
    gap: 6px;
  }
  .shop-filter-label {
    font-size: 15px;
    margin-right: 2px;
  }
  .shop-currency-btn,
  .shop-rarity-toggle {
    font-size: 15px;
    padding: 4px 8px;
  }
  .shop-filter-count {
    font-size: 12px;
    padding: 1px 5px;
  }
  .shop-type-section {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .shop-type-header {
    font-size: 17px;
    gap: 8px;
    margin-bottom: 12px;
  }
  .shop-type-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .shop-type-header .shop-cat-count,
  .shop-rarity-header .shop-cat-count {
    font-size: 14px;
    padding: 1px 8px;
  }
  .shop-rarity-header {
    font-size: 16px;
    gap: 6px;
    margin-bottom: 8px;
  }
  /* Shop balance header */
  .shop-balance-header {
    padding: 10px 14px;
    font-size: 16px;
    gap: 10px;
    margin-bottom: 16px;
  }
  /* Preview panel (bottom sheet on mobile) */
  .shop-tryon-panel {
    padding: 10px 12px;
  }
  .shop-tryon-nickname {
    padding: 10px 14px;
    min-width: auto;
  }
  .shop-tryon-hint {
    font-size: 15px;
  }
  .shop-receipt-title {
    font-size: 15px;
  }
  .shop-receipt-item-name {
    font-size: 15px;
  }
  .shop-receipt-total {
    font-size: 15px;
  }
  .shop-tryon-chip {
    font-size: 15px;
    padding: 3px 8px;
  }
  /* Inventory */
  .shop-inventory-summary {
    padding: 10px 12px;
    gap: 10px;
  }
  .shop-inventory-stat {
    font-size: 15px;
  }
  .shop-category-header {
    font-size: 17px;
    margin: 16px 0 10px;
    gap: 8px;
  }
  .shop-category-header i {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .shop-card-actions .btn-sm {
    font-size: 15px;
    padding: 5px 10px;
  }
  /* Admin shop action bar */
  .admin-shop-action-bar {
    padding: 10px 10px;
    border-radius: 10px;
  }
  .admin-shop-total-count {
    font-size: 15px;
    padding: 3px 10px;
  }
  .admin-shop-card-name {
    font-size: 15px;
  }
  .admin-shop-btn-edit,
  .admin-shop-btn-delete {
    font-size: 13px;
    padding: 4px 10px;
  }
  /* Donation */
  .donation-guide {
    gap: 14px;
  }
  .donation-guide-text {
    font-size: 15px;
    min-width: 0;
  }
  .donation-warning-badge {
    font-size: 14px;
    padding: 4px 10px;
  }
  .donation-qr img {
    width: 110px;
    height: 110px;
  }
  /* Market chat */
  .mc-list-item {
    padding: 8px 10px;
    gap: 8px;
  }
  .market-chat-tab {
    padding: 5px 10px;
    font-size: 15px;
  }
  /* Member grid */
  .member-role-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px;
  }
  .member-role-avatar {
    width: 30px;
    height: 30px;
  }
  .member-role-name {
    font-size: 12px;
  }
  .member-role-section {
    padding: 10px;
  }
  .member-role-header h3 {
    font-size: 16px;
  }
}

/* ── Market Chat List ── */
.market-chat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.market-chat-tab {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.3);
  color: inherit;
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.market-chat-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent-hover) 18%, transparent));
}
.market-chat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mc-list-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.mc-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-list-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mc-list-title {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-list-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
}
.mc-list-other i { margin-right: 3px; }
.mc-list-price { font-weight: 600; color: #facc15; }
.mc-list-arrow {
  flex-shrink: 0;
  opacity: 0.35;
  font-size: 0.8rem;
}
.mc-list-role {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mc-role-seller { background: rgba(88, 101, 242, 0.2); color: #818cf8; }
.mc-role-buyer { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.mc-list-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mc-status-inquiry { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); }
.mc-status-reserved { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.mc-status-completed { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

/* ── Full-page Chat Room ── */
.market-chat-room-card {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 400px;
}
.market-chat-room-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
.market-full-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.market-full-chat-container .mc-messages {
  max-height: none;
  flex: 1;
}
.market-full-chat-container .mc-input-area {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  flex-shrink: 0;
}

/* ── Market Chat ── */
.mc-messages {
  max-height: 500px;
  overflow-y: auto;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-dark);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
}
.mc-msg {
  display: flex;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 4px;
}
.mc-msg:hover { background: rgba(255,255,255,.03); }
.mc-msg-cont {
  display: flex;
  padding: 1px 12px 1px 60px;
  border-radius: 4px;
  position: relative;
}
.mc-msg-cont:hover { background: rgba(255,255,255,.03); }
.mc-msg-cont:hover .mc-time-hover { opacity: 1; }
.mc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  margin-top: 2px;
}
.mc-msg-body { flex: 1; min-width: 0; }
.mc-msg-body-cont { flex: 1; min-width: 0; }
.mc-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.mc-nickname {
  font-weight: 700;
  font-size: .925rem;
}
.mc-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mc-badge-seller { background: #5865f2; color: #fff; }
.mc-badge-buyer { background: #23a559; color: #fff; }
.mc-time {
  font-size: .7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.mc-time-hover {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .65rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity .15s;
  width: 44px;
  text-align: center;
}
.mc-text {
  font-size: .9rem;
  line-height: 1.5;
  word-break: break-word;
  color: var(--text);
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

/* ── My messages (카카오톡 style) ── */
.mc-msg.mc-mine {
  flex-direction: row-reverse;
}
.mc-msg.mc-mine .mc-avatar {
  display: none;
}
.mc-msg.mc-mine .mc-msg-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mc-msg.mc-mine .mc-msg-header {
  justify-content: flex-end;
}
.mc-msg.mc-mine .mc-text {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 12px 4px 12px 12px;
}
.mc-msg-cont.mc-mine {
  flex-direction: row-reverse;
  padding: 1px 12px 1px 12px;
}
.mc-msg-cont.mc-mine .mc-msg-body-cont {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mc-msg-cont.mc-mine .mc-text {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 12px 4px 12px 12px;
}
.mc-msg-cont.mc-mine .mc-time-hover {
  left: auto;
  right: 12px;
}

/* Other messages bubble */
.mc-msg:not(.mc-mine) .mc-text {
  border-radius: 4px 12px 12px 12px;
}
.mc-system {
  text-align: center;
  font-size: .8rem;
  color: var(--text-muted);
  padding: 8px 12px;
  opacity: .7;
}
.mc-other-left {
  text-align: center;
  font-size: .85rem;
  color: #fbbf24;
  padding: 14px 12px;
  margin-top: 8px;
  background: rgba(251, 191, 36, 0.08);
  border-radius: 8px;
}
.mc-date-sep {
  text-align: center;
  padding: 12px 0;
  position: relative;
}
.mc-date-sep::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--border);
}
.mc-date-sep span {
  position: relative;
  background: var(--bg-dark);
  padding: 0 12px;
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 600;
}
.mc-attachments { margin-top: 4px; }
.mc-attach-img {
  max-width: 300px;
  max-height: 200px;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin-top: 4px;
}
.mc-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  font-size: .85rem;
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
}
.mc-input-area {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 0 0 8px 8px;
  border: 1px solid var(--border);
  border-top: none;
}
.mc-input-area input {
  flex: 1;
  background: var(--bg-dark) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.mc-input-area button {
  flex-shrink: 0;
  padding: 8px 16px;
}
.mc-messages.mc-has-control {
  border-radius: 0;
}
.mc-seller-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.mc-seller-control-label {
  font-size: .85rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.mc-seller-control-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mc-seller-control-btns .btn-sm {
  padding: 4px 12px;
  font-size: .8rem;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-weight: 600;
}
.mc-btn-reserve {
  background: #f59e0b;
  color: #000;
}
.mc-btn-reserve:hover { background: #d97706; }
.mc-btn-sold {
  background: #22c55e;
  color: #fff;
}
.mc-btn-sold:hover { background: #16a34a; }
.mc-btn-revert {
  background: var(--bg-light);
  color: var(--text);
  border: 1px solid var(--border) !important;
}
.mc-btn-revert:hover { background: var(--bg-dark); }
.mc-loading, .mc-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
  font-size: .9rem;
}
.mc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
.mc-chat-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* Profile embed preview centering */
#userProfileEmbedPreviewPrimary {
  display: flex;
  justify-content: center;
}

/* ===== style-admin.css ===== */
/* style-admin.css — Admin panel 2026 layout renewal, product tokens, density tuning, operations log */

/* 2026 Layout Renewal */

/* ── Dashboard redesign ── */
.db-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.db-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(10, 10, 16, 0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.db-stat::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--_stat-color, var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.db-stat:hover {
  border-color: color-mix(in srgb, var(--_stat-color, var(--accent)) 35%, transparent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 10px color-mix(in srgb, var(--_stat-color, var(--accent)) 12%, transparent);
  transform: translateY(-2px);
}

.db-stat:hover::before { opacity: 1; }

.db-stat[data-accent="blue"] { --_stat-color: var(--accent); }
.db-stat[data-accent="gold"] { --_stat-color: #fbbf24; }
.db-stat[data-accent="rose"] { --_stat-color: #fb7185; }
.db-stat[data-accent="muted"] { --_stat-color: #64748b; }

.db-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--_stat-color, var(--accent)) 14%, transparent);
  color: var(--_stat-color, var(--accent));
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring);
}

.db-stat:hover .db-stat-icon { transform: scale(1.08); }

.db-stat-body {
  display: flex;
  flex-direction: column;
}

.db-stat-value {
  font-family: var(--font-tactical);
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.db-stat-label {
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Charts row */
.db-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.db-chart-card {
  background: rgba(10, 10, 16, 0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  padding: 16px 18px;
  transition: all 0.3s var(--ease-out);
}

.db-chart-card:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

.db-chart-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.db-chart-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-chart-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
}

.db-chart-canvas {
  height: 240px;
}

/* Widget grid */
.db-widget-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.db-widget {
  background: rgba(10, 10, 16, 0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
}

.db-widget:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.db-widget-wide {
  grid-column: span 2;
}

.db-widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.db-widget-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: color-mix(in srgb, var(--_wc, var(--accent)) 14%, transparent);
  color: var(--_wc, var(--accent));
  flex-shrink: 0;
}

.db-widget-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
}

.db-widget-body {
  padding: 14px 16px;
}

.db-widget-scroll {
  max-height: 220px;
  overflow-y: auto;
}

.db-widget-loading {
  color: var(--text-muted);
  font-size: 13px;
}

/* Widget content: voice channels */
.db-vc-group { margin-bottom: 10px; }
.db-vc-group:last-child { margin-bottom: 0; }
.db-vc-name { font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.db-vc-name::before { content: '#'; opacity: 0.5; }
.db-vc-members { display: flex; flex-wrap: wrap; gap: 5px; }
.db-vc-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; font-size: 12px; transition: border-color 0.15s; }
.db-vc-pill:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.db-vc-pill img.db-vc-avatar { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.db-vc-pill img.db-vc-tier { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }

/* Widget content: attendance */
.db-att-wrap { text-align: center; padding: 8px 0; }
.db-att-big { font-family: var(--font-tactical); font-size: 36px; font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.db-att-big .db-att-total { font-size: 16px; color: var(--text-muted); font-weight: 600; }
.db-att-pct { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.db-att-bar { margin-top: 10px; height: 6px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.db-att-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 999px; transition: width 0.5s var(--ease-out); }

/* Widget content: join/leave */
.db-jl-row { font-family: var(--font-ui); display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.db-jl-row + .db-jl-row { border-top: 1px solid rgba(255,255,255,0.03); }
.db-jl-icon { width: 14px; text-align: center; flex-shrink: 0; }
.db-jl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-jl-date { color: var(--text-muted); font-size: 11px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Widget content: rankings */
.db-rank-row { font-family: var(--font-ui); display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.db-rank-row + .db-rank-row { border-top: 1px solid rgba(255,255,255,0.03); }
.db-rank-pos { width: 22px; text-align: center; flex-shrink: 0; font-size: 14px; }
.db-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.db-rank-name img { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.db-rank-val { font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.db-widget-empty { color: var(--text-muted); font-size: 13px; }

@media (max-width: 1200px) {
  .db-stats-row { grid-template-columns: repeat(2, 1fr); }
  .db-widget-grid { grid-template-columns: repeat(2, 1fr); }
  .db-widget-wide { grid-column: span 2; }
}
@media (max-width: 768px) {
  .db-stats-row { grid-template-columns: 1fr 1fr; }
  .db-charts-row { grid-template-columns: 1fr; }
  .db-widget-grid { grid-template-columns: 1fr; }
  .db-widget-wide { grid-column: span 1; }
}

/* ── Log Stats Dashboard ── */
.ls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ls-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ls-header-title i {
  font-size: 22px;
  color: var(--accent);
}
.ls-header-title h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.3px;
}
.ls-period-selector {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-full);
  padding: 3px;
  border: 1px solid var(--glass-border);
}
.ls-period-btn {
  font-family: var(--font-ui);
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.ls-period-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.ls-period-btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* KPI row */
.ls-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.ls-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(10,10,16,0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
}
.ls-kpi::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: attr(data-accent type(<color>), var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ls-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.ls-kpi:hover::after { opacity: 1; }
.ls-kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring);
}
.ls-kpi:hover .ls-kpi-icon { transform: scale(1.08); }

.ls-kpi[data-accent="#8b5cf6"] .ls-kpi-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.ls-kpi[data-accent="#8b5cf6"]::after { background: var(--accent); }
.ls-kpi[data-accent="#3b82f6"] .ls-kpi-icon { background: rgba(59,130,246,0.14); color: #60a5fa; }
.ls-kpi[data-accent="#3b82f6"]::after { background: #3b82f6; }
.ls-kpi[data-accent="#22c55e"] .ls-kpi-icon { background: rgba(34,197,94,0.14); color: #4ade80; }
.ls-kpi[data-accent="#22c55e"]::after { background: #22c55e; }
.ls-kpi[data-accent="#a855f7"] .ls-kpi-icon { background: rgba(168,85,247,0.14); color: #c084fc; }
.ls-kpi[data-accent="#a855f7"]::after { background: #a855f7; }
.ls-kpi[data-accent="#f59e0b"] .ls-kpi-icon { background: rgba(245,158,11,0.14); color: #fbbf24; }
.ls-kpi[data-accent="#f59e0b"]::after { background: #f59e0b; }

/* Voice time summary */
.ls-voice-summary {
  background: rgba(10,10,16,0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: all 0.3s var(--ease-out);
}
.ls-voice-summary:hover {
  border-color: rgba(255,255,255,0.12);
}
.ls-voice-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ls-voice-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ls-voice-bar-wrap {
  margin-bottom: 12px;
}
.ls-voice-bar {
  display: flex;
  height: 14px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  gap: 1px;
}
.ls-voice-bar-seg {
  height: 100%;
  transition: width 0.6s var(--ease-out);
  border-radius: 1px;
  cursor: default;
}
.ls-voice-bar-seg:first-child { border-radius: var(--radius-full) 1px 1px var(--radius-full); }
.ls-voice-bar-seg:last-child { border-radius: 1px var(--radius-full) var(--radius-full) 1px; }
.ls-voice-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ls-voice-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  color: var(--text-muted);
}
.ls-voice-legend-item strong {
  color: var(--text);
  font-weight: 700;
}
.ls-voice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Detail card badge */
.ls-detail-badge {
  margin-left: auto;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.ls-kpi-body {
  display: flex;
  flex-direction: column;
}
.ls-kpi-value {
  font-family: var(--font-tactical);
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.ls-kpi-label {
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Charts row */
.ls-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.ls-charts-row:has(.ls-chart-full) {
  grid-template-columns: 1fr;
}
.ls-chart-card {
  background: rgba(10,10,16,0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  padding: 18px;
  transition: all 0.3s var(--ease-out);
}
.ls-chart-card:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.ls-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ls-chart-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.ls-chart-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ls-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ls-legend-label {
  font-size: 18px;
  color: var(--text-muted);
  margin-right: 8px;
}
.ls-chart-canvas-wrap {
  height: 260px;
  position: relative;
}
.ls-doughnut-wrap {
  height: 300px;
}

/* Bottom grid: category bars + rankings */
.ls-bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: stretch;
}
.ls-detail-card {
  display: flex;
  flex-direction: column;
  background: rgba(10,10,16,0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
}
.ls-detail-card:hover {
  border-color: rgba(255,255,255,0.12);
}
.ls-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 18px;
  font-weight: 700;
}
.ls-detail-header i {
  font-size: 14px;
  color: var(--accent);
}

/* Category bars */
.ls-category-bars {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
}
.ls-cat-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ls-cat-bar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 90px;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--text-secondary);
}
.ls-cat-bar-label i { font-size: 12px; }
.ls-cat-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ls-cat-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-out);
}
.ls-cat-bar-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  text-align: right;
  color: var(--text);
}

/* Rankings */
.ls-ranking-list {
  padding: 10px 18px;
  flex: 1;
  overflow-y: auto;
}
.ls-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 18px;
}
.ls-rank-row + .ls-rank-row {
  border-top: 1px solid rgba(255,255,255,0.03);
}
.ls-rank-pos {
  width: 26px;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
}
.ls-rank-num {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 18px;
}
.ls-rank-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ls-rank-val {
  font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
}

.ls-loading {
  color: var(--text-muted);
  font-size: 18px;
  padding: 12px 0;
}
.ls-empty {
  color: var(--text-muted);
  font-size: 18px;
  padding: 12px 0;
}

@media (max-width: 1200px) {
  .ls-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .ls-charts-row { grid-template-columns: 1fr; }
  .ls-bottom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .ls-kpi-row { grid-template-columns: 1fr 1fr; }
  .ls-bottom-grid { grid-template-columns: 1fr; }
  .ls-chart-canvas-wrap { height: 200px; }
  .ls-doughnut-wrap { height: 240px; }
}

/* Legacy compatibility — keep for other pages */
.dashboard-widget-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
.dashboard-widget-grid .widget-span-2 {
  grid-column: span 2;
}
@media (max-width: 1200px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dashboard-widget-grid .widget-span-2 {
    grid-column: span 2;
  }
}
@media (max-width: 768px) {
  .dashboard-widget-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-widget-grid .widget-span-2 {
    grid-column: span 1;
  }
}

.admin-three-col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .admin-three-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .admin-three-col {
    grid-template-columns: 1fr !important;
  }
}


.form-group input,
.form-group select,
.form-group textarea {
  border-radius: 12px;
  min-height: 44px;
  padding: 11px 14px;
}

.data-table th,
.data-table td {
  padding: 11px 13px;
}


/* Product tokens + semantic system */
:root {
  --semantic-success: #34d399;
  --semantic-warning: #fbbf24;
  --semantic-danger: #fb7185;
  --semantic-info: #a78bfa;
}

.stat-value,
.home-rank-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.badge-success,
.badge-warning,
.badge-danger,
.badge-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}

.badge-success { color: #d1fae5; border: 1px solid rgba(52, 211, 153, 0.45); background: rgba(5, 70, 56, 0.48); box-shadow: 0 0 6px rgba(52, 211, 153, 0.1); }
.badge-warning { color: #fef3c7; border: 1px solid rgba(251, 191, 36, 0.45); background: rgba(92, 57, 11, 0.44); box-shadow: 0 0 6px rgba(251, 191, 36, 0.1); }
.badge-danger { color: #ffe4e6; border: 1px solid rgba(251, 113, 133, 0.45); background: rgba(95, 16, 42, 0.46); box-shadow: 0 0 6px rgba(251, 113, 133, 0.1); }
.badge-info { color: #ede9fe; border: 1px solid color-mix(in srgb, var(--accent-light) 45%, transparent); background: color-mix(in srgb, var(--accent-hover) 20%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent-light) 10%, transparent); }
.badge-muted { color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(51, 65, 85, 0.4); }

.btn-sm { padding: 4px 10px; font-size: 16px; font-weight: 600; }

.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
}

.table-sticky-first th:first-child {
  z-index: 3;
}

@media (min-width: 861px) {
  #tab-log-operations .data-table th:first-child,
  #tab-log-operations .data-table td:first-child,
  #tab-log-moderation .data-table th:first-child,
  #tab-log-moderation .data-table td:first-child,
  #tab-log-member-lifecycle .data-table th:first-child,
  #tab-log-member-lifecycle .data-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 2;
  }

  #tab-log-operations .data-table th:first-child,
  #tab-log-moderation .data-table th:first-child,
  #tab-log-member-lifecycle .data-table th:first-child {
    z-index: 3;
  }
}

.tab-content {
  animation: tabFadeInProduct 0.2s ease;
}

@keyframes tabFadeInProduct {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .main-content {
    margin-left: 0;
    padding: 58px 14px 34px;
  }

  .mobile-sidebar-toggle {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 300;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    background: rgba(8, 8, 14, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
    transition: all 0.2s ease;
  }

  .mobile-sidebar-toggle i {
    color: var(--accent);
    font-size: 14px;
  }

  .mobile-sidebar-toggle:active {
    background: rgba(8, 8, 14, 0.95);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 12px color-mix(in srgb, var(--accent) 15%, transparent);
  }

  body.sidebar-mobile-open .mobile-sidebar-toggle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
  }

  .mobile-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 220;
    border: 0;
  }

  body.sidebar-mobile-open .mobile-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(82vw, 300px);
    height: 100vh;
    height: 100dvh;
    background:
      radial-gradient(ellipse 80% 20% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
      linear-gradient(180deg, rgba(8, 8, 14, 0.97) 0%, rgba(4, 4, 8, 0.99) 100%);
    border-right: none;
    border-bottom: 0;
    padding: 0;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.3), 3px 0 0 color-mix(in srgb, var(--accent) 20%, transparent);
    transform: translateX(-105%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 240;
    display: flex;
    flex-direction: column;
  }

  body.sidebar-mobile-open {
    overflow: hidden;
    touch-action: none;
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  /* Mobile sidebar header (logo + user) — fixed at top */
  .sidebar .logo {
    flex-shrink: 0;
    margin-bottom: 0;
    padding: 14px 16px 10px;
  }

  .sidebar .logo.logo-stacked {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 10px !important;
  }

  .sidebar .logo.logo-stacked .brand-logo-image {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .sidebar .logo span {
    font-size: 18px;
  }

  .sidebar .page-type-label {
    padding: 0 16px 8px;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }

  .sidebar .user-info {
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 8px 12px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border);
  }

  .sidebar .user-info .avatar {
    width: 28px;
    height: 28px;
  }

  .sidebar .user-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .sidebar .username-row {
    justify-content: flex-start;
  }

  .sidebar .user-info .username {
    font-size: 16px;
  }

  .sidebar .user-info .tag {
    font-size: 16px;
    color: var(--text-muted);
  }

  .admin-nav-tools {
    margin: 0 0 6px;
    padding: 6px;
  }

  .admin-nav-tools-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Mobile nav — scrollable area */
  .sidebar .nav-menu {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 12px 16px;
  }

  .sidebar .nav-menu li {
    margin-bottom: 1px;
  }

  .sidebar .nav-menu a {
    padding: 10px 12px;
    gap: 10px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    white-space: normal;
    color: rgba(255, 255, 255, 0.65);
  }

  .sidebar .nav-menu a:hover,
  .sidebar .nav-menu a:active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: #fff;
  }

  .sidebar .nav-menu li.active a {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .sidebar .nav-menu li.active a i {
    color: var(--accent);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent));
  }

  .sidebar .nav-menu .menu-group {
    margin: 8px 0 4px;
    padding: 6px 8px;
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
  }

  .sidebar .nav-menu .menu-divider {
    margin: 6px 4px;
  }

  .sidebar .nav-menu li.feature-item a {
    padding: 10px 10px 10px 14px;
  }

  .stats-grid,
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .home-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .data-table {
    display: block;
    overflow-x: auto;
  }

  .map-list-grid {
    grid-template-columns: 1fr;
  }

  .map-card-thumb {
    height: 132px;
  }
}

/* Density tuning by tab */
.tab-content.tab-density-compact .stats-grid,
.tab-content.tab-density-compact .settings-grid {
  gap: 12px;
  margin-bottom: 18px;
}

.tab-content.tab-density-compact .setting-card,
.tab-content.tab-density-compact .stat-card {
  border-radius: 14px;
}

.tab-content.tab-density-compact .card-header {
  padding: 14px 16px;
}

.tab-content.tab-density-compact .card-body {
  padding: 14px 16px;
}

.tab-density-compact .card-grid { gap: 8px; }

.tab-content.tab-density-compact .data-table th,
.tab-content.tab-density-compact .data-table td {
  padding: 10px 12px;
}

/* Operations log dense table */
#tab-log-operations #operationsAdminLogList.rules-preview {
  padding: 8px;
  line-height: 1.2;
}

#tab-log-operations .data-table {
  table-layout: fixed;
}

#tab-log-operations .data-table th,
#tab-log-operations .data-table td {
  padding: 4px 6px;
  vertical-align: middle;
}

#tab-log-operations .data-table th {
  font-size: 16px;
}

#tab-log-operations .data-table td {
  font-size: 16px;
}

#tab-log-operations .data-table th:nth-child(1),
#tab-log-operations .data-table td:nth-child(1) {
  width: 56px;
}

#tab-log-operations .data-table th:nth-child(2),
#tab-log-operations .data-table td:nth-child(2) {
  width: 140px;
}

#tab-log-operations .data-table th:nth-child(3),
#tab-log-operations .data-table td:nth-child(3) {
  width: 125px;
}

#tab-log-operations .data-table th:nth-child(4),
#tab-log-operations .data-table td:nth-child(4) {
  width: 170px;
}

#tab-log-operations .data-table th:nth-child(5),
#tab-log-operations .data-table td:nth-child(5) {
  width: 160px;
}

#tab-log-operations .data-table th:nth-child(-n+5),
#tab-log-operations .data-table td:nth-child(-n+5) {
  white-space: nowrap;
}

#tab-log-operations .operations-cell-ellipsis {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-log-operations .operations-cell-time {
  display: inline-block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
}

#tab-log-operations .operations-log-summary {
  display: inline-block;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

#tab-log-operations .help-text {
  margin-top: 0;
  font-size: 16px;
  line-height: 1.2;
}

#tab-log-operations .operations-log-count {
  margin-left: 4px;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
}

#tab-log-operations .operations-log-row {
  position: relative;
}

#tab-log-operations .operations-log-detail-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

#tab-log-operations .operations-log-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 4px;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

#tab-log-operations .operations-log-detail-link:hover {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.55);
}

.tab-content.tab-density-roomy .stats-grid,
.tab-content.tab-density-roomy .settings-grid {
  gap: 20px;
  margin-bottom: 24px;
}

#tab-voice .voice-log-filter-grid,
#tab-feature-chat-log .chat-log-filter-grid,
#tab-nickname-log .chat-log-filter-grid,
#tab-log-moderation .moderation-log-filter-grid,
#tab-log-member-lifecycle .moderation-log-filter-grid,
#tab-server-status .moderation-log-filter-grid,
#tab-log-operations .moderation-log-filter-grid,
#tab-members-activity .moderation-log-filter-grid,
#tab-invite-logs .moderation-log-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Unified log filter grid */
.unified-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.unified-filter-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.unified-filter-field i {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.unified-filter-field input,
.unified-filter-field select {
  width: 100%;
  padding: 14px 16px 14px 36px;
  background: var(--bg-dark);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.unified-filter-field input:focus,
.unified-filter-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}

.unified-filter-field input:focus + i,
.unified-filter-field input:focus ~ i {
  color: var(--accent);
}

.unified-filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.unified-filter-actions .bbyd-btn,
.unified-filter-actions .btn-primary,
.unified-filter-actions .btn-secondary {
  padding: 12px 16px;
  font-size: 16px;
  white-space: nowrap;
}

/* Date filter fields */
.unified-filter-date {
  position: relative;
}

.unified-date-label {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.unified-filter-date input {
  padding-left: 52px;
  cursor: pointer;
}

.unified-filter-date input::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Unified log: override rules-preview defaults for table rendering */
#tab-log-unified #unifiedLogList.rules-preview {
  white-space: normal;
  line-height: normal;
  padding: 8px 8px 0;
}

/* Unified log table: handle long summary text */
#tab-log-unified .data-table {
  table-layout: fixed;
  width: 100%;
}
#tab-log-unified .data-table th:nth-child(1) { width: 180px; white-space: nowrap; }
#tab-log-unified .data-table td:nth-child(1) { width: 180px; white-space: normal; word-break: keep-all; font-size: 0.85em; line-height: 1.35; }
#tab-log-unified .data-table th:nth-child(2),
#tab-log-unified .data-table td:nth-child(2) { width: 90px; white-space: nowrap; }
#tab-log-unified .data-table th:nth-child(3),
#tab-log-unified .data-table td:nth-child(3) { width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-log-unified .data-table th:nth-child(4),
#tab-log-unified .data-table td:nth-child(4) { width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-log-unified .data-table td:nth-child(5) {
  word-break: break-word;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
#tab-log-unified .data-table td:nth-child(5) > div {
  max-height: 80px;
  overflow-y: auto;
}

/* Pagination at bottom of log box */
.unified-log-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}

.unified-log-pagination span {
  color: var(--text-muted);
  font-size: 16px;
  min-width: 50px;
  text-align: center;
}

.unified-log-pagination .btn-secondary {
  padding: 8px 14px;
}

@media (max-width: 1280px) {
  .unified-filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .unified-filter-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .unified-filter-actions .bbyd-btn,
  .unified-filter-actions .btn-primary,
  .unified-filter-actions .btn-secondary {
    flex: 1 1 140px;
  }
}

@media (max-width: 860px) {
  .unified-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unified-filter-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .unified-filter-actions .bbyd-btn,
  .unified-filter-actions .btn-primary,
  .unified-filter-actions .btn-secondary {
    flex: 1 1 150px;
  }
}

@media (max-width: 560px) {
  .unified-filter-grid {
    grid-template-columns: 1fr;
  }

  .unified-filter-actions .bbyd-btn,
  .unified-filter-actions .btn-primary,
  .unified-filter-actions .btn-secondary {
    flex-basis: 100%;
  }
}

/* Unified log category mini-card grid */
.unified-cat-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

@media (max-width: 860px) {
  .unified-cat-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 560px) {
  .unified-cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 480px) {
  .unified-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.unified-cat-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  user-select: none;
  opacity: 0.45;
  font-size: 1em;
  text-align: center;
}

.unified-cat-card i {
  font-size: 1.15em;
}

.unified-cat-card span {
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.unified-cat-card.is-active {
  opacity: 1;
  border-color: var(--_cat-color, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--_cat-color, var(--accent)) 35%, transparent);
}

.unified-cat-card.is-active i {
  color: var(--_cat-color, var(--accent));
}

.unified-cat-card:hover {
  border-color: var(--_cat-color, var(--accent));
  opacity: 0.85;
}

.unified-cat-card.is-active:hover {
  opacity: 1;
}

/* Embed template hub category grid */
.embed-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.embed-cat-grid .unified-cat-card {
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 12px;
  font-size: 0.85em;
}

.embed-hub-toolbar {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}
.embed-hub-toolbar .form-group {
  margin-bottom: 0;
}
.embed-hub-search-group {
  flex: 0 0 200px;
}
.embed-hub-select-group {
  flex: 1;
}
@media (max-width: 560px) {
  .embed-hub-toolbar {
    flex-direction: column;
  }
  .embed-hub-search-group {
    flex: none;
  }
}

@media (max-width: 1280px) {
  body.page-developer .tab-content.tab-density-roomy .settings-grid,
  body.page-developer .tab-content.tab-density-compact .settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  #tab-voice .voice-log-filter-grid,
  #tab-feature-chat-log .chat-log-filter-grid,
  #tab-nickname-log .chat-log-filter-grid,
  #tab-log-moderation .moderation-log-filter-grid,
  #tab-log-member-lifecycle .moderation-log-filter-grid,
  #tab-server-status .moderation-log-filter-grid,
  #tab-log-operations .moderation-log-filter-grid,
  #tab-members-activity .moderation-log-filter-grid,
    #tab-invite-logs .moderation-log-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #tab-log-unified .chat-log-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  #tab-voice .voice-log-filter-grid,
  #tab-feature-chat-log .chat-log-filter-grid,
  #tab-nickname-log .chat-log-filter-grid,
  #tab-log-moderation .moderation-log-filter-grid,
  #tab-log-member-lifecycle .moderation-log-filter-grid,
  #tab-server-status .moderation-log-filter-grid,
  #tab-log-operations .moderation-log-filter-grid,
  #tab-members-activity .moderation-log-filter-grid,
    #tab-invite-logs .moderation-log-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tab-log-unified .chat-log-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tab-log-operations .data-table th:nth-child(3),
  #tab-log-operations .data-table td:nth-child(3),
  #tab-log-operations .data-table th:nth-child(4),
  #tab-log-operations .data-table td:nth-child(4),
  #tab-log-operations .data-table th:nth-child(6),
  #tab-log-operations .data-table td:nth-child(6) {
    display: none;
  }

  #tab-log-operations .operations-log-row {
    cursor: pointer;
  }
}

@media (max-width: 560px) {
  #tab-voice .voice-log-filter-grid,
  #tab-feature-chat-log .chat-log-filter-grid,
  #tab-nickname-log .chat-log-filter-grid,
  #tab-log-moderation .moderation-log-filter-grid,
  #tab-log-member-lifecycle .moderation-log-filter-grid,
  #tab-server-status .moderation-log-filter-grid,
  #tab-log-operations .moderation-log-filter-grid,
  #tab-members-activity .moderation-log-filter-grid,
    #tab-invite-logs .moderation-log-filter-grid,
  #tab-log-unified .chat-log-filter-grid {
    grid-template-columns: 1fr;
  }
}

.tab-content.tab-density-roomy .setting-card,
.tab-content.tab-density-roomy .stat-card {
  border-radius: 18px;
}

.tab-content.tab-density-roomy .card-header {
  padding: 22px 24px;
}

.tab-content.tab-density-roomy .card-body {
  padding: 22px 24px;
}

.scrim-winner-quick-list,
.scrim-round-card-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.scrim-winner-card,
.scrim-round-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.scrim-winner-card:hover,
.scrim-round-card:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}

.scrim-winner-card.is-selected,
.scrim-round-card.is-selected {
  border-color: rgba(35, 165, 89, 0.9);
  background: rgba(35, 165, 89, 0.14);
}

@media (max-width: 1280px) {
  .scrim-winner-quick-list,
  .scrim-round-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .scrim-winner-quick-list,
  .scrim-round-card-list {
    grid-template-columns: 1fr;
  }
}

.tab-content.tab-density-roomy .form-group {
  margin-bottom: 18px;
}

.dashboard-recent-card .card-body {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.dashboard-recent-table-wrap {
  flex: 1;
}

.dashboard-recent-pagination {
  margin-top: auto;
  justify-content: flex-end;
  padding-top: 10px;
}

.dashboard-placeholder-row td {
  color: transparent;
}

@media (max-width: 1024px) {
  .tab-content.tab-density-roomy .card-header,
  .tab-content.tab-density-roomy .card-body,
  .tab-content.tab-density-compact .card-header,
  .tab-content.tab-density-compact .card-body {
    padding: 14px 14px;
  }

  .tab-content.tab-density-roomy .settings-grid,
  .tab-content.tab-density-compact .settings-grid,
  .tab-content.tab-density-roomy .stats-grid,
  .tab-content.tab-density-compact .stats-grid {
    gap: 10px;
    margin-bottom: 12px;
  }

  .dashboard-recent-card .card-body {
    min-height: auto;
  }
}

/* Final product QA pass */
.help-text {
  color: #9db8cf;
  line-height: 1.5;
}

.rules-preview {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 14px;
}

.rules-page-editor {
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
}
.rules-page-editor .card-header {
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}
.rules-page-editor .card-header h2 {
  margin: 0;
  font-size: 16px;
}
.rules-page-editor .card-body {
  padding: 16px;
}
.rules-page-editor textarea {
  width: 100%;
  resize: vertical;
}
.rules-editor-preview {
  min-height: 0;
}
.rules-editor-preview .embed-preview-card {
  margin: 0;
}

.home-dashboard-grid,
.home-dashboard-grid-4col,
.home-neon-news-grid,
.feature-grid,
.member-card-grid {
  gap: 16px;
}

.home-dashboard-card .card-body,
.dashboard-recent-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-card-body-list {
  gap: 9px;
}

.data-table {
  border-radius: 12px;
  overflow: hidden;
}

.data-table th,
.data-table td {
  vertical-align: middle;
}

.data-table code {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: rgba(6, 20, 36, 0.7);
}

.inline-chip {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: #e0d4ff;
}

.swal2-popup {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.5) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  background: var(--bg-dark) !important;
  border: 1px solid var(--border) !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-file:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

.swal2-actions .swal2-confirm,
.swal2-styled.swal2-confirm {
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent) 58%, var(--accent-hover) 100%) !important;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 34%, transparent) !important;
}

.swal2-actions .swal2-cancel,
.swal2-styled.swal2-cancel {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.swal2-toast {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}

@media (max-width: 1280px) {
  .main-content {
    padding: 24px 20px 34px;
  }

  .top-bar {
    margin-bottom: 20px;
  }
}

body {
  line-height: 1.45;
}

.top-bar h1 {
  font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing: -0.015em;
}

.card-header h2 {
  line-height: 1.35;
}

.card-header h2 i,
.top-bar h1 i,
.status-pill i {
  text-align: center;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 0 4px rgba(8, 19, 33, 0.9);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-add:disabled,
button[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.form-group input.input-invalid,
.form-group select.input-invalid,
.form-group textarea.input-invalid,
.form-group input:invalid,
.form-group select:invalid,
.form-group textarea:invalid {
  border-color: rgba(251, 113, 133, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.2) !important;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (max-width: 1024px) {
  .sidebar .nav-menu a {
    min-height: 42px;
  }

  .main-content {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}


/* ── Scrim Member Picker ── */
body.page-admin #tab-scrim-manage .scrim-result-form-card {
  overflow: visible !important;
  z-index: 20;
}

body.page-admin #tab-scrim-manage .scrim-result-form-grid {
  position: relative;
  z-index: 2;
}

body.page-admin #tab-scrim-manage .form-group:has(.scrim-member-picker) {
  position: relative;
  z-index: 3;
}

body.page-admin #tab-scrim-manage .form-group:has(.scrim-member-picker:focus-within) {
  z-index: 30;
}

.scrim-member-picker {
  position: relative;
}
.smp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.smp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.smp-tag-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
}
.smp-tag-remove:hover {
  color: #fff;
}
.smp-search {
  width: 100%;
  font-size: 16px;
}
.smp-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: min(360px, calc(100vw - 48px));
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 1000;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.smp-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  transition: background 0.15s;
}
.smp-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.smp-option:hover {
  background: var(--bg-hover, rgba(255,255,255,0.05));
}
.smp-option.is-checked {
  background: rgba(99,102,241,0.1);
}
.smp-check {
  color: var(--accent);
  font-size: 16px;
  width: 18px;
  text-align: center;
}
.smp-empty {
  padding: 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
}

/* ===== style-animations.css ===== */
/* style-animations.css — Subtle ambient effects, minimal page transitions, and SweetAlert2 theme */

/* ═══════════════════════════════════════════
   § 1. AMBIENT BACKGROUND SYSTEM
   ═══════════════════════════════════════════ */

/* Slow, barely noticeable background drift */
@keyframes siteAmbientBackgroundDrift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  50% { background-position: 56% 20%, 40% 36%, 74% 58%, 0 0; }
}

body {
  position: relative;
  isolation: isolate;
  background-size: 120% 120%, 120% 120%, 130% 130%, 100% 100%;
  animation: siteAmbientBackgroundDrift 30s ease-in-out infinite;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: -24%;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    radial-gradient(42% 34% at 18% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(35% 30% at 82% 78%, color-mix(in srgb, var(--accent-hover) 22%, transparent), transparent 70%);
  filter: blur(40px);
}

body::after {
  background:
    radial-gradient(36% 30% at 78% 16%, color-mix(in srgb, var(--accent-light) 24%, transparent), transparent 72%),
    radial-gradient(34% 28% at 20% 82%, color-mix(in srgb, var(--accent-hover) 20%, transparent), transparent 72%);
  filter: blur(36px);
}

/* ═══════════════════════════════════════════
   § 2. TACTICAL PAGE ENTRANCE
   ═══════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes riseUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInTag {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Staggered entrance for main content sections */
.main-content > .top-bar {
  animation: riseUp 0.45s 0.05s var(--ease-out) backwards;
}

.main-content > .status-row {
  animation: riseUp 0.45s 0.1s var(--ease-out) backwards;
}

.main-content > .stats-grid,
.main-content > .home-neon-stats {
  animation: riseUp 0.45s 0.15s var(--ease-out) backwards;
}

.main-content > .settings-grid,
.main-content > .home-dashboard-grid,
.main-content > .home-neon-news-grid {
  animation: riseUp 0.45s 0.2s var(--ease-out) backwards;
}

/* Tab switching — tactical slide */
.tab-content {
  animation: riseUp 0.3s var(--ease-out);
}

/* ═══════════════════════════════════════════
   § 3. TRANSITIONS (not animations)
   ═══════════════════════════════════════════ */

/* Toggle switch */
.toggle-slider {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.toggle-slider::before {
  transition: transform 0.2s ease;
}

/* Collapsible card open/close */
.setting-card.collapsible .card-body {
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

/* Balance pill feedback when value changes */
@keyframes balancePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.point-balance-pill.just-updated,
.coin-balance-pill.just-updated {
  animation: balancePulse 0.3s ease;
}

/* ═══════════════════════════════════════════
   § 4. LOADING STATES
   ═══════════════════════════════════════════ */

@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-loading {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* Spinner for loading buttons */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
}

/* ═══════════════════════════════════════════
   § 5. TOAST
   ═══════════════════════════════════════════ */

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}

/* ═══════════════════════════════════════════
   § 6. SWEETALERT2 THEME
   ═══════════════════════════════════════════ */

.swal2-container.swal2-backdrop-show {
  background: rgba(8, 12, 24, 0.68) !important;
  backdrop-filter: blur(6px);
}

.swal2-popup {
  background: linear-gradient(180deg, rgba(16, 14, 28, 0.97), rgba(10, 10, 18, 0.98)) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.5), 0 0 20px color-mix(in srgb, var(--accent) 6%, transparent) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) !important;
}

.swal2-title { color: var(--text) !important; }

.swal2-html-container,
.swal2-content { color: var(--text-muted) !important; }

.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  background: rgba(6, 6, 14, 0.7) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
  box-shadow: none !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-file:focus {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

.swal2-actions .swal2-confirm,
.swal2-styled.swal2-confirm {
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent) 58%, var(--accent-hover) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 34%, transparent) !important;
}

.swal2-actions .swal2-cancel,
.swal2-styled.swal2-cancel {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

.swal2-validation-message {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fca5a5 !important;
}

.swal2-toast {
  background: linear-gradient(180deg, rgba(16, 14, 28, 0.97), rgba(10, 10, 18, 0.98)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent) !important;
  backdrop-filter: blur(16px) !important;
}

.swal2-toast .swal2-title,
.swal2-toast .swal2-html-container {
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════
   § 7. PAGE-SPECIFIC ACCENT THEMES
   ═══════════════════════════════════════════ */

/* ── User page: Valorant red (brand primary, matches logo) ── */
body.page-user {
  --accent: #FF4655;
  --accent-hover: #E63946;
}

body.page-user::before {
  background:
    radial-gradient(42% 34% at 18% 20%, rgba(255, 70, 85, 0.40), transparent 70%),
    radial-gradient(35% 30% at 82% 78%, rgba(230, 57, 70, 0.32), transparent 70%);
}

body.page-user::after {
  background:
    radial-gradient(36% 30% at 78% 16%, rgba(255, 107, 122, 0.34), transparent 72%),
    radial-gradient(34% 28% at 20% 82%, rgba(255, 70, 85, 0.28), transparent 72%);
}

/* ── Admin page: Teal / Cyan ── */
body.page-admin {
  --accent: #0EA5E9;
  --accent-hover: #0284C7;
}

body.page-admin::before {
  background:
    radial-gradient(42% 34% at 18% 20%, rgba(14, 165, 233, 0.42), transparent 70%),
    radial-gradient(35% 30% at 82% 78%, rgba(6, 182, 212, 0.34), transparent 70%);
}

body.page-admin::after {
  background:
    radial-gradient(36% 30% at 78% 16%, rgba(34, 211, 238, 0.36), transparent 72%),
    radial-gradient(34% 28% at 20% 82%, rgba(14, 165, 233, 0.30), transparent 72%);
}

/* ── Developer page: Amber / Orange (shifted from rose to differentiate from user red) ── */
body.page-developer {
  --accent: #F97316;
  --accent-hover: #EA580C;
}

body.page-developer::before {
  background:
    radial-gradient(42% 34% at 18% 20%, rgba(249, 115, 22, 0.42), transparent 70%),
    radial-gradient(35% 30% at 82% 78%, rgba(245, 158, 11, 0.34), transparent 70%);
}

body.page-developer::after {
  background:
    radial-gradient(36% 30% at 78% 16%, rgba(251, 146, 60, 0.36), transparent 72%),
    radial-gradient(34% 28% at 20% 82%, rgba(234, 88, 12, 0.30), transparent 72%);
}

/* ═══════════════════════════════════════════
   § 8. ACCESSIBILITY: REDUCED MOTION
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  .skeleton-loading {
    animation: none !important;
  }
}

/* ===== style-utilities.css ===== */
/* style-utilities.css — Generic responsive breakpoints and utility overrides */

/* Responsive */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-dashboard-grid,
  .home-dashboard-grid-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-card-span-2,
  .home-dashboard-card-span2 {
    grid-column: span 2;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 768px: Tablets — force settings grids to single column ── */
@media (max-width: 768px) {
  /* Override inline grid-template-columns on settings grids */
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .home-dashboard-grid,
  .home-dashboard-grid-4col {
    grid-template-columns: 1fr;
  }

  .home-card-span-2,
  .home-dashboard-card-span2 {
    grid-column: span 1;
  }
}

@media (max-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 720px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile: 1024px — sidebar becomes drawer ── */
@media (max-width: 1024px) {
  /* Disable hover transforms on touch devices — prevents layout shifts */
  .setting-card:hover {
    transform: none;
  }

  /* Tables: make card-body scrollable when table overflows */
  .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 500px;
  }
}

/* ── 480px: Small phones ── */
@media (max-width: 480px) {
  .main-content {
    margin-left: 0;
    padding: 10px;
    padding-top: 60px;
  }

  .top-bar {
    padding: 10px 12px;
  }

  .top-bar h1 {
    font-size: 18px !important;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .stat-card {
    padding: 12px 10px;
    gap: 10px;
    border-radius: 10px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 16px;
  }

  .stat-value {
    font-size: clamp(20px, 6vw, 26px);
  }

  .stat-label {
    font-size: 15px;
  }

  .card-body {
    padding: 10px 8px;
  }

  .card-header {
    padding: 10px 10px;
  }

  .card-header h2 {
    font-size: 1rem;
  }

  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-bottom: 14px;
  }

  .setting-card {
    border-radius: 10px;
  }

  .embed-preview-card {
    max-width: 100%;
  }

  .embed-preview-message-shell {
    max-width: 100%;
  }

  .form-group label {
    font-size: 16px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }

  .home-dashboard-grid,
  .home-dashboard-grid-4col {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .home-card-span-2,
  .home-dashboard-card-span2 {
    grid-column: span 1;
  }

  /* SweetAlert modal grids */
  .swal2-html-container [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .swal2-popup {
    padding: 14px 10px !important;
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
  }

  .swal2-title {
    font-size: 1.1rem !important;
  }

  /* Data tables: ensure horizontal scroll */
  .data-table-wrapper,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav menu items */
  .nav-menu li {
    font-size: 16px;
  }

  /* Tab buttons */
  .tab-buttons {
    flex-wrap: wrap;
    gap: 4px;
  }

  .tab-buttons button,
  .tab-buttons .tab-btn {
    font-size: 15px;
    padding: 6px 8px;
  }

  /* Feature grid single column */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  /* db-stats-row single column */
  .db-stats-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== style-dashboard-redesign.css ===== */
/* ═══════════════════════════════════════════════════════════════════════════
   BBYD DASHBOARD REDESIGN — Member · Admin · Profile
   Layered on top of style-*.css. Scoped to body.page-user / body.page-admin / body.page-developer.

   Strategy:
   1) 새 디자인 토큰을 페이지 스코프에 정의 (다른 페이지 영향 없음)
   2) 기존 핵심 클래스(.sidebar, .setting-card, .stat-card, .btn-primary 등)를
      새 비주얼 언어로 재스킨
   3) 신규 위젯 클래스는 .bbyd- 프리픽스로 추가
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-user,
body.page-admin,
body.page-developer,
body.page-developer {
  /* ── Typography ── 모두 Pretendard로 통일 (한글·영문·숫자·기호 동일 폰트)
     디스플레이/모노/EN 변수는 호환을 위해 유지하되 같은 폰트로 매핑 */
  --bbyd-f-kr: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
  --bbyd-f-display: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
  --bbyd-f-mono: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
  --bbyd-f-en: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;

  /* 전체 페이지에서 숫자 등폭 + 커닝 + 폰트 피처 통일 */
  font-feature-settings: 'kern' 1, 'tnum' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ── Surfaces ── */
  --bbyd-bg: #07080C;
  --bbyd-bg-2: #0E1018;
  --bbyd-bg-3: #14171F;
  --bbyd-bg-4: #1A1D27;
  --bbyd-ink: #F5F5F7;
  --bbyd-ink-2: #C9CBD1;
  --bbyd-dim: #8A8F99;
  --bbyd-dim-2: #585C66;
  --bbyd-line: rgba(255,255,255,.08);
  --bbyd-line-2: rgba(255,255,255,.16);

  --bbyd-red: #FF4655;
  --bbyd-red-soft: rgba(255,70,85,.12);
  --bbyd-cyan: #00E5FF;
  --bbyd-cyan-soft: rgba(0,229,255,.10);
  --bbyd-gold: #FFD166;
  --bbyd-green: #4ade80;
  --bbyd-purple: #A78BFA;

  /* ── Override existing tokens so legacy classes inherit the new language ── */
  --bg-dark: var(--bbyd-bg);
  --bg-card: var(--bbyd-bg-2);
  --bg-card-hover: var(--bbyd-bg-3);
  --bg-elevated: var(--bbyd-bg-3);
  --text: var(--bbyd-ink);
  --text-muted: var(--bbyd-dim);
  --text-secondary: var(--bbyd-ink-2);
  --border: var(--bbyd-line);
  --border-subtle: var(--bbyd-line);
  --border-strong: var(--bbyd-line-2);
  --glass-bg: var(--bbyd-bg-2);
  --glass-bg-strong: var(--bbyd-bg-2);
  --glass-blur: blur(0);
  --glass-border: var(--bbyd-line);
}

body.page-user {
  background: var(--bbyd-bg);
  background-image: none;
  font-family: var(--bbyd-f-kr);
  line-height: 1.5;
}
body.page-admin,
body.page-developer {
  background: var(--bbyd-bg);
  background-image: none;
  font-family: var(--bbyd-f-kr);
  line-height: 1.5;
}

/* Disable busy background layers (grain / scanlines / particles / gradient image) */
body.page-user .user-bg-layer,
body.page-user .user-particles,
body.page-admin .admin-bg-layer,
body.page-admin .admin-particles,
body.page-developer .dev-bg-layer,
body.page-developer .dev-particles,
body.page-developer .dev-strip { display: none !important; }

body.page-developer .main-content::before,
body.page-developer .main-content::after { display: none !important; }

body.page-user ::selection,
body.page-admin ::selection,
body.page-developer ::selection { background: var(--bbyd-red); color: #fff; }

/* ═══ SIDEBAR ═══ */
body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  width: 264px;
  background: var(--bbyd-bg-2);
  border-right: 1px solid var(--bbyd-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-user .sidebar::before,
body.page-admin .sidebar::before,
body.page-developer .sidebar::before,
body.page-user .sidebar::after,
body.page-admin .sidebar::after,
body.page-developer .sidebar::after { display: none; }

body.page-user .sidebar-bracket,
body.page-admin .sidebar-bracket,
body.page-developer .sidebar-bracket { display: none; }

body.page-user .sidebar > *,
body.page-admin .sidebar > *,
body.page-developer .sidebar > * { padding-left: 0; padding-right: 0; }

/* Brand row */
body.page-user .sidebar-top,
body.page-admin .sidebar-top,
body.page-developer .sidebar-top {
  padding: 0 !important;
  border-bottom: 1px solid var(--bbyd-line);
  gap: 0;
}
body.page-user .sidebar-top::after,
body.page-admin .sidebar-top::after,
body.page-developer .sidebar-top::after { display: none; }

body.page-user .sidebar-brand,
body.page-admin .sidebar-brand,
body.page-developer .sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}
body.page-user .sidebar-brand__logo,
body.page-admin .sidebar-brand__logo,
body.page-developer .sidebar-brand__logo {
  width: 34px; height: 34px;
  border-radius: 0;
  filter: none;
  background: var(--bbyd-red);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  object-fit: cover;
}
body.page-user .sidebar-brand__name,
body.page-admin .sidebar-brand__name,
body.page-developer .sidebar-brand__name {
  font-family: var(--bbyd-f-kr);
  font-weight: 900; font-size: 16px;
  background: none; -webkit-text-fill-color: var(--bbyd-ink); color: var(--bbyd-ink);
  letter-spacing: -.3px;
}
body.page-user .sidebar-brand__label,
body.page-admin .sidebar-brand__label,
body.page-developer .sidebar-brand__label {
  display: block;
  font-family: var(--bbyd-f-en);
  font-size: 9px; letter-spacing: .3em;
  color: var(--bbyd-dim);
  margin-top: 2px;
  text-transform: uppercase;
}
body.page-user .sidebar-brand__name + .sidebar-brand__label,
body.page-admin .sidebar-brand__name + .sidebar-brand__label,
body.page-developer .sidebar-brand__name + .sidebar-brand__label {
  position: relative; top: 0;
}
/* Stack brand name + label vertically */
body.page-user .sidebar-brand,
body.page-admin .sidebar-brand,
body.page-developer .sidebar-brand {
  flex-wrap: wrap;
}
body.page-user .sidebar-brand .sidebar-brand__name,
body.page-admin .sidebar-brand .sidebar-brand__name,
body.page-developer .sidebar-brand .sidebar-brand__name { line-height: 1.1; }

/* ROLE switcher (member/admin/profile) — injected via sidebar.ejs */
.bbyd-sb-role {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: 16px 16px 12px;
  padding: 4px;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
}
.bbyd-sb-role a,
.bbyd-sb-role button {
  font-family: var(--bbyd-f-en);
  font-size: 10px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 8px 4px;
  color: var(--bbyd-dim);
  background: none; border: 0; cursor: pointer;
  text-align: center; text-decoration: none;
  transition: color .2s, background .2s;
}
.bbyd-sb-role a:hover,
.bbyd-sb-role button:hover { color: var(--bbyd-ink); }
.bbyd-sb-role a.active,
.bbyd-sb-role button.active { background: var(--bbyd-red); color: #fff; }

/* Profile card (sidebar-id) */
body.page-user .sidebar-id,
body.page-admin .sidebar-id,
body.page-developer .sidebar-id {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  margin: 0 12px 12px;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}
body.page-user .sidebar-id:hover,
body.page-admin .sidebar-id:hover,
body.page-developer .sidebar-id:hover { background: var(--bbyd-bg-3); }
body.page-user .sidebar-id__avatar,
body.page-admin .sidebar-id__avatar,
body.page-developer .sidebar-id__avatar {
  width: 38px; height: 38px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: linear-gradient(135deg, var(--bbyd-red), var(--bbyd-cyan));
}
body.page-user .sidebar-id__name,
body.page-admin .sidebar-id__name,
body.page-developer .sidebar-id__name {
  font-weight: 800; font-size: 14px; color: var(--bbyd-ink);
  letter-spacing: -.2px; line-height: 1.2;
}
body.page-user .sidebar-id__meta,
body.page-admin .sidebar-id__meta,
body.page-developer .sidebar-id__meta {
  font-family: var(--bbyd-f-en);
  font-size: 10px; letter-spacing: .15em;
  color: var(--bbyd-red);
  text-transform: uppercase;
  margin-top: 4px; gap: 6px;
}
body.page-user .sidebar-id__sep,
body.page-admin .sidebar-id__sep,
body.page-developer .sidebar-id__sep { color: var(--bbyd-line-2); }
body.page-user .sidebar-id__currency,
body.page-admin .sidebar-id__currency,
body.page-developer .sidebar-id__currency {
  font-family: var(--bbyd-f-mono);
  font-size: 10px;
  color: var(--bbyd-ink-2);
}
body.page-user .sidebar-id__currency strong,
body.page-admin .sidebar-id__currency strong,
body.page-developer .sidebar-id__currency strong { color: var(--bbyd-ink); }

/* 큰 POINT/COIN 카드가 있으면 sidebar-id 안의 inline 포인트·코인은 중복이라 숨김 */
body.page-user .sidebar-top:has(.bbyd-sb-balances) .sidebar-id__currency,
body.page-user .sidebar-top:has(.bbyd-sb-balances) .sidebar-id__sep,
body.page-admin .sidebar-top:has(.bbyd-sb-balances) .sidebar-id__currency,
body.page-admin .sidebar-top:has(.bbyd-sb-balances) .sidebar-id__sep,
body.page-developer .sidebar-top:has(.bbyd-sb-balances) .sidebar-id__currency,
body.page-developer .sidebar-top:has(.bbyd-sb-balances) .sidebar-id__sep {
  display: none;
}

/* Balance cards (POINT / COIN) — optional, can be added next to sidebar-id */
.bbyd-sb-balances {
  display: flex; gap: 8px;
  padding: 0 14px;
  margin-bottom: 14px;
}
.bbyd-sb-bal {
  flex: 1; padding: 10px;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  text-align: center;
}
.bbyd-sb-bal__label {
  font-family: var(--bbyd-f-en);
  font-size: 9px; color: var(--bbyd-dim);
  letter-spacing: .2em; text-transform: uppercase;
}
.bbyd-sb-bal__value {
  font-family: var(--bbyd-f-display);
  font-size: 20px; line-height: 1;
  color: var(--bbyd-ink);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.bbyd-sb-bal--accent .bbyd-sb-bal__value { color: var(--bbyd-gold); }

/* Nav menu */
body.page-user .sidebar .nav-menu-wrapper,
body.page-admin .sidebar .nav-menu-wrapper,
body.page-developer .sidebar .nav-menu-wrapper {
  padding-left: 0; padding-right: 0; padding-top: 4px;
}
body.page-user .sidebar .nav-menu,
body.page-admin .sidebar .nav-menu,
body.page-developer .sidebar .nav-menu {
  padding: 0 12px 16px;
}
body.page-user .sidebar .nav-menu-wrapper::after,
body.page-admin .sidebar .nav-menu-wrapper::after,
body.page-developer .sidebar .nav-menu-wrapper::after { display: none; }

body.page-user .sidebar .nav-menu .menu-group,
body.page-admin .sidebar .nav-menu .menu-group,
body.page-developer .sidebar .nav-menu .menu-group {
  font-family: var(--bbyd-f-en);
  font-size: 12px; font-weight: 700;
  letter-spacing: .22em;
  color: var(--bbyd-dim);
  padding: 16px 12px 8px;
  background: transparent;
  text-transform: uppercase;
}
body.page-user .sidebar .nav-menu .menu-group span::before,
body.page-admin .sidebar .nav-menu .menu-group span::before,
body.page-developer .sidebar .nav-menu .menu-group span::before { display: none; }
body.page-user .sidebar .nav-menu .menu-group .group-caret,
body.page-admin .sidebar .nav-menu .menu-group .group-caret,
body.page-developer .sidebar .nav-menu .menu-group .group-caret {
  color: var(--bbyd-dim);
  font-size: 11px;
}

body.page-user .sidebar .nav-menu li.feature-item a,
body.page-admin .sidebar .nav-menu li.feature-item a,
body.page-developer .sidebar .nav-menu li.feature-item a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px;
  font-family: var(--bbyd-f-kr);
  font-size: 14px; font-weight: 500;
  color: var(--bbyd-ink-2);
  background: transparent;
  border-radius: 0;
  border-left: 2px solid transparent;
  letter-spacing: -0.1px;
  transition: background .15s, color .15s, border-color .15s, padding .15s;
}
body.page-user .sidebar .nav-menu li.feature-item a::before,
body.page-admin .sidebar .nav-menu li.feature-item a::before,
body.page-developer .sidebar .nav-menu li.feature-item a::before { display: none; }

body.page-user .sidebar .nav-menu li.feature-item a i,
body.page-admin .sidebar .nav-menu li.feature-item a i,
body.page-developer .sidebar .nav-menu li.feature-item a i {
  width: 18px; text-align: center;
  font-size: 13px;
  color: var(--bbyd-dim);
  filter: none;
}
body.page-user .sidebar .nav-menu li.feature-item a:hover,
body.page-admin .sidebar .nav-menu li.feature-item a:hover,
body.page-developer .sidebar .nav-menu li.feature-item a:hover {
  background: var(--bbyd-bg-3);
  color: var(--bbyd-ink);
  padding-left: 14px;
}
body.page-user .sidebar .nav-menu li.feature-item a:hover i,
body.page-admin .sidebar .nav-menu li.feature-item a:hover i,
body.page-developer .sidebar .nav-menu li.feature-item a:hover i { color: var(--bbyd-ink-2); }

body.page-user .sidebar .nav-menu li.feature-item.active a,
body.page-admin .sidebar .nav-menu li.feature-item.active a,
body.page-developer .sidebar .nav-menu li.feature-item.active a {
  background: var(--bbyd-red-soft);
  color: var(--bbyd-ink);
  border-left-color: var(--bbyd-red);
}
body.page-user .sidebar .nav-menu li.feature-item.active a i,
body.page-admin .sidebar .nav-menu li.feature-item.active a i,
body.page-developer .sidebar .nav-menu li.feature-item.active a i {
  color: var(--bbyd-red); filter: none;
}

/* Footer links */
body.page-user .sidebar-bottom-menu,
body.page-admin .sidebar-bottom-menu,
body.page-developer .sidebar-bottom-menu {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--bbyd-line);
  margin-top: auto;
  background: transparent;
  display: flex; flex-direction: column; gap: 2px;
}
body.page-user .sidebar-bottom-menu::before,
body.page-admin .sidebar-bottom-menu::before,
body.page-developer .sidebar-bottom-menu::before { display: none; }
body.page-user .sidebar-bottom-menu a,
body.page-admin .sidebar-bottom-menu a,
body.page-developer .sidebar-bottom-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  font-family: var(--bbyd-f-kr);
  font-size: 13px; font-weight: 500;
  color: var(--bbyd-ink-2);
  background: transparent;
  border-radius: 0;
  letter-spacing: -0.1px;
}
body.page-user .sidebar-bottom-menu a:hover,
body.page-admin .sidebar-bottom-menu a:hover,
body.page-developer .sidebar-bottom-menu a:hover {
  background: var(--bbyd-bg-3);
  color: var(--bbyd-ink);
  transform: none;
}
body.page-user .sidebar-bottom-menu a i,
body.page-admin .sidebar-bottom-menu a i,
body.page-developer .sidebar-bottom-menu a i {
  width: 18px; text-align: center;
  font-size: 13px; color: var(--bbyd-dim);
  opacity: 1;
}
body.page-user .sidebar-bottom-menu a:hover i,
body.page-admin .sidebar-bottom-menu a:hover i,
body.page-developer .sidebar-bottom-menu a:hover i { color: var(--bbyd-ink-2); }
body.page-user .sidebar-bottom-menu .sidebar-logout,
body.page-admin .sidebar-bottom-menu .sidebar-logout,
body.page-developer .sidebar-bottom-menu .sidebar-logout { color: var(--bbyd-dim); }
body.page-user .sidebar-bottom-menu .sidebar-logout:hover,
body.page-admin .sidebar-bottom-menu .sidebar-logout:hover,
body.page-developer .sidebar-bottom-menu .sidebar-logout:hover {
  background: var(--bbyd-red-soft); color: var(--bbyd-red);
}

/* ═══ MAIN CONTENT SHELL ═══ */
body.page-user .main-content,
body.page-admin .main-content,
body.page-developer .main-content {
  margin-left: 264px;
  padding: 0;
}
body.page-user .main-content--no-topbar,
body.page-admin .main-content--no-topbar,
body.page-developer .main-content--no-topbar { padding-top: 0; }

/* ═══ PAGE HEADER (.bbyd-ph) ═══ */
.bbyd-ph {
  padding: 36px 32px 24px;
  border-bottom: 1px solid var(--bbyd-line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}
.bbyd-ph__meta {
  font-family: var(--bbyd-f-en);
  font-size: 11px; letter-spacing: .25em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bbyd-ph__meta .red { color: var(--bbyd-red); }
.bbyd-ph__title {
  font-family: var(--bbyd-f-kr);
  font-weight: 900; font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -1.2px; line-height: 1.05;
  color: var(--bbyd-ink);
}
.bbyd-ph__title em {
  font-style: normal; color: var(--bbyd-red);
}
.bbyd-ph__sub {
  font-size: 13px; color: var(--bbyd-ink-2);
  margin-top: 10px; max-width: 640px;
}
.bbyd-ph__actions { display: flex; gap: 8px; }

@media (max-width: 720px) {
  .bbyd-ph { grid-template-columns: 1fr; padding: 22px 16px 16px; }
}

/* ═══ BUTTONS ═══ */
.bbyd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--bbyd-f-en);
  font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  border: 0; cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.bbyd-btn--primary { background: var(--bbyd-red); color: #fff; }
.bbyd-btn--primary:hover { background: #fff; color: var(--bbyd-red); }
.bbyd-btn--ghost {
  background: transparent; color: var(--bbyd-ink);
  border: 1px solid var(--bbyd-line-2);
}
.bbyd-btn--ghost:hover { border-color: var(--bbyd-ink); }
.bbyd-btn--cyan { background: var(--bbyd-cyan); color: var(--bbyd-bg); }

/* Legacy button re-skin */
body.page-user .btn-primary,
body.page-admin .btn-primary,
body.page-developer .btn-primary,
body.page-user .btn-add,
body.page-admin .btn-add,
body.page-developer .btn-add {
  background: var(--bbyd-red);
  border-radius: 0;
  border: 0;
  box-shadow: none;
  font-family: var(--bbyd-f-en);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  padding: 10px 16px;
  min-height: 0;
  color: #fff;
}
body.page-user .btn-primary::after,
body.page-admin .btn-primary::after,
body.page-developer .btn-primary::after,
body.page-user .btn-add::after,
body.page-admin .btn-add::after,
body.page-developer .btn-add::after { display: none; }
body.page-user .btn-primary:hover,
body.page-admin .btn-primary:hover,
body.page-developer .btn-primary:hover,
body.page-user .btn-add:hover,
body.page-admin .btn-add:hover,
body.page-developer .btn-add:hover {
  background: #fff; color: var(--bbyd-red);
  transform: none; box-shadow: none;
}

body.page-user .btn-secondary,
body.page-admin .btn-secondary,
body.page-developer .btn-secondary,
body.page-user .btn-cancel,
body.page-admin .btn-cancel,
body.page-developer .btn-cancel {
  background: transparent;
  color: var(--bbyd-ink);
  border: 1px solid var(--bbyd-line-2);
  border-radius: 0;
  font-family: var(--bbyd-f-en);
  letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; font-size: 12px;
  padding: 10px 16px;
  box-shadow: none;
}
body.page-user .btn-secondary:hover,
body.page-admin .btn-secondary:hover,
body.page-developer .btn-secondary:hover,
body.page-user .btn-cancel:hover,
body.page-admin .btn-cancel:hover,
body.page-developer .btn-cancel:hover {
  border-color: var(--bbyd-ink); background: transparent;
}

body.page-user .btn-danger,
body.page-admin .btn-danger,
body.page-developer .btn-danger {
  background: var(--bbyd-red); border-radius: 0; border: 0;
  font-family: var(--bbyd-f-en); letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; font-size: 12px;
}

/* ═══ CARDS (legacy re-skin) ═══ */
body.page-user .setting-card,
body.page-admin .setting-card,
body.page-developer .setting-card,
body.page-user .home-dashboard-card,
body.page-admin .home-dashboard-card,
body.page-developer .home-dashboard-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-user .setting-card::before,
body.page-admin .setting-card::before,
body.page-developer .setting-card::before,
body.page-user .home-dashboard-card::before,
body.page-admin .home-dashboard-card::before,
body.page-developer .home-dashboard-card::before { display: none; }

body.page-user .setting-card:hover,
body.page-admin .setting-card:hover,
body.page-developer .setting-card:hover,
body.page-user .home-dashboard-card:hover,
body.page-admin .home-dashboard-card:hover,
body.page-developer .home-dashboard-card:hover {
  transform: none;
  border-color: var(--bbyd-line-2);
  box-shadow: none;
}

body.page-user .card-header,
body.page-admin .card-header,
body.page-developer .card-header {
  background: transparent;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--bbyd-line);
}
body.page-user .card-header h2,
body.page-admin .card-header h2,
body.page-developer .card-header h2 {
  font-family: var(--bbyd-f-kr);
  font-weight: 800; font-size: 15px;
  letter-spacing: -.2px;
}
body.page-user .card-header h2 i,
body.page-admin .card-header h2 i,
body.page-developer .card-header h2 i {
  color: var(--bbyd-red);
  filter: none;
  font-size: 0.85em;
}
body.page-user .card-body,
body.page-admin .card-body,
body.page-developer .card-body { padding: 18px; }

/* Stat card (legacy 4-up KPI on member home) */
body.page-user .stat-card,
body.page-admin .stat-card,
body.page-developer .stat-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 18px;
  gap: 14px;
}
body.page-user .stat-card::before,
body.page-user .stat-card::after,
body.page-admin .stat-card::before,
body.page-developer .stat-card::before,
body.page-admin .stat-card::after { display: none; }
body.page-user .stat-card:hover,
body.page-admin .stat-card:hover,
body.page-developer .stat-card:hover {
  transform: none;
  border-color: var(--bbyd-line-2);
  box-shadow: none;
}
body.page-user .stat-icon,
body.page-admin .stat-icon,
body.page-developer .stat-icon {
  width: 44px; height: 44px;
  border-radius: 0;
  background: var(--bbyd-bg-3) !important;
  box-shadow: none !important;
  color: var(--bbyd-ink-2);
}
body.page-user .stat-icon.blue,
body.page-admin .stat-icon.blue,
body.page-developer .stat-icon.blue {
  background: var(--bbyd-red-soft) !important; color: var(--bbyd-red);
}
body.page-user .stat-icon.gold,
body.page-admin .stat-icon.gold,
body.page-developer .stat-icon.gold {
  background: rgba(255,209,102,.12) !important; color: var(--bbyd-gold);
}
body.page-user .stat-icon.red,
body.page-admin .stat-icon.red,
body.page-developer .stat-icon.red {
  background: var(--bbyd-red-soft) !important; color: var(--bbyd-red);
}
body.page-user .stat-icon.purple,
body.page-admin .stat-icon.purple,
body.page-developer .stat-icon.purple {
  background: rgba(167,139,250,.12) !important; color: var(--bbyd-purple);
}
body.page-user .stat-card:hover .stat-icon,
body.page-admin .stat-card:hover .stat-icon,
body.page-developer .stat-card:hover .stat-icon { transform: none; box-shadow: none !important; }
body.page-user .stat-value,
body.page-admin .stat-value,
body.page-developer .stat-value {
  font-family: var(--bbyd-f-display);
  font-size: 32px; line-height: 1;
  letter-spacing: -.02em; color: var(--bbyd-ink);
}
body.page-user .stat-label,
body.page-admin .stat-label,
body.page-developer .stat-label {
  font-family: var(--bbyd-f-en);
  font-size: 10px; letter-spacing: .25em;
  color: var(--bbyd-dim); text-transform: uppercase;
}

/* Home dashboard grid layout */
body.page-user .home-dashboard-grid,
body.page-admin .home-dashboard-grid,
body.page-developer .home-dashboard-grid { gap: 16px; }

/* Stats grid container */
body.page-user .stats-grid,
body.page-admin .stats-grid,
body.page-developer .stats-grid { gap: 16px; margin-bottom: 24px; }

/* ═══ TABLES ═══ */
body.page-user .table-responsive table,
body.page-admin .table-responsive table,
body.page-developer .table-responsive table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
body.page-user .table-responsive th,
body.page-admin .table-responsive th,
body.page-developer .table-responsive th {
  font-family: var(--bbyd-f-en);
  font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bbyd-dim);
  text-align: left;
  padding: 12px 14px;
  background: var(--bbyd-bg-3);
  border-bottom: 1px solid var(--bbyd-line);
  border-radius: 0;
}
body.page-user .table-responsive td,
body.page-admin .table-responsive td,
body.page-developer .table-responsive td {
  padding: 12px 14px;
  border-bottom: 1px dashed var(--bbyd-line);
  color: var(--bbyd-ink-2);
  background: transparent;
}
body.page-user .table-responsive tr:hover td,
body.page-admin .table-responsive tr:hover td,
body.page-developer .table-responsive tr:hover td { background: var(--bbyd-bg-3); }

/* ═══ INPUTS / FORMS ═══ */
body.page-user .form-control,
body.page-admin .form-control,
body.page-developer .form-control,
body.page-user .form-group input,
body.page-admin .form-group input,
body.page-developer .form-group input,
body.page-user .form-group select,
body.page-admin .form-group select,
body.page-developer .form-group select,
body.page-user .form-group textarea,
body.page-admin .form-group textarea,
body.page-developer .form-group textarea {
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  min-height: 40px;
  padding: 10px 12px;
}
body.page-user .form-control:focus,
body.page-admin .form-control:focus,
body.page-developer .form-control:focus,
body.page-user .form-group input:focus,
body.page-admin .form-group input:focus,
body.page-developer .form-group input:focus {
  outline: none;
  border-color: var(--bbyd-red);
  box-shadow: none;
}
body.page-user .form-group label,
body.page-admin .form-group label,
body.page-developer .form-group label {
  font-family: var(--bbyd-f-en);
  font-size: 10px; letter-spacing: .25em;
  color: var(--bbyd-dim); text-transform: uppercase;
}

/* ═══ TAB BAR (mobile / inline tabs) ═══ */
.bbyd-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--bbyd-line);
  margin-bottom: 22px;
  overflow-x: auto;
}
.bbyd-tabs .bbyd-tab {
  padding: 12px 18px;
  font-family: var(--bbyd-f-en);
  font-size: 12px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--bbyd-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent; border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer; white-space: nowrap;
}
.bbyd-tabs .bbyd-tab.active {
  color: var(--bbyd-ink);
  border-bottom-color: var(--bbyd-red);
}
.bbyd-tabs .bbyd-tab:hover { color: var(--bbyd-ink); }

/* ═══ NEW WIDGETS (bbyd-) ═══ */

/* Card primitive */
.bbyd-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  min-width: 0;
}
.bbyd-card--accent { border-left: 2px solid var(--bbyd-red); }
.bbyd-card--cyan { border-left: 2px solid var(--bbyd-cyan); }
.bbyd-card--gold { border-left: 2px solid var(--bbyd-gold); }
.bbyd-card--green { border-left: 2px solid var(--bbyd-green); }

.bbyd-card__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.bbyd-card__title {
  font-family: var(--bbyd-f-en);
  font-size: 10px; font-weight: 600;
  letter-spacing: .25em; color: var(--bbyd-dim);
  text-transform: uppercase;
}
.bbyd-card__title .accent { color: var(--bbyd-red); }
.bbyd-card__title-kr {
  font-family: var(--bbyd-f-kr);
  font-weight: 800; font-size: 16px;
  color: var(--bbyd-ink);
  letter-spacing: -.3px;
  margin-top: 2px;
}
.bbyd-card__more {
  font-family: var(--bbyd-f-mono);
  font-size: 11px; color: var(--bbyd-dim);
  text-decoration: none;
}
.bbyd-card__more:hover { color: var(--bbyd-red); }

/* Generic grid helpers */
.bbyd-grid { display: grid; gap: 16px; }
.bbyd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bbyd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bbyd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bbyd-grid--2-1 { grid-template-columns: 2fr 1fr; }
.bbyd-grid--1-2 { grid-template-columns: 1fr 2fr; }

/* Content padding wrapper */
.bbyd-content { padding: 28px 32px; }
@media (max-width: 720px) {
  .bbyd-content { padding: 18px 16px; }
}

/* Metric card */
.bbyd-metric { display: flex; flex-direction: column; gap: 10px; }
.bbyd-metric__value {
  font-family: var(--bbyd-f-display);
  font-size: 52px; line-height: .9;
  color: var(--bbyd-ink); letter-spacing: -.03em;
  display: flex; align-items: baseline; gap: 6px;
}
.bbyd-metric__value sup {
  font-family: var(--bbyd-f-kr);
  font-size: 13px; color: var(--bbyd-dim);
  position: relative; top: -1.8em;
  font-weight: 700;
}
.bbyd-metric__value .bbyd-delta {
  margin-left: auto;
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em;
  padding: 4px 8px;
  background: rgba(74,222,128,.15);
  color: var(--bbyd-green);
}
.bbyd-metric__value .bbyd-delta.neg { background: var(--bbyd-red-soft); color: var(--bbyd-red); }
.bbyd-metric__foot {
  font-size: 12px; color: var(--bbyd-ink-2); line-height: 1.55;
  padding-top: 12px; border-top: 1px dashed var(--bbyd-line);
  display: flex; justify-content: space-between;
}
.bbyd-metric__foot b { color: var(--bbyd-ink); font-weight: 700; }

/* Sparkline */
.bbyd-spark { height: 40px; width: 100%; display: block; }
.bbyd-spark path { fill: none; stroke: var(--bbyd-red); stroke-width: 2; }
.bbyd-spark.cyan path { stroke: var(--bbyd-cyan); }
.bbyd-spark.gold path { stroke: var(--bbyd-gold); }
.bbyd-spark.green path { stroke: var(--bbyd-green); }
.bbyd-spark .bbyd-spark__area { fill: var(--bbyd-red-soft); }
.bbyd-spark.cyan .bbyd-spark__area { fill: var(--bbyd-cyan-soft); }
.bbyd-spark.gold .bbyd-spark__area { fill: rgba(255,209,102,.12); }
.bbyd-spark.green .bbyd-spark__area { fill: rgba(74,222,128,.12); }

/* Progress bar */
.bbyd-bar {
  height: 6px;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  position: relative; overflow: hidden;
}
.bbyd-bar__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bbyd-red), #FF8B95);
  width: 0;
}
.bbyd-bar__fill.cyan { background: linear-gradient(90deg, var(--bbyd-cyan), #80FFE5); }
.bbyd-bar__fill.gold { background: linear-gradient(90deg, var(--bbyd-gold), #FFE5A8); }
.bbyd-bar__fill.green { background: linear-gradient(90deg, var(--bbyd-green), #90F0B3); }

/* Chip */
.bbyd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bbyd-f-en);
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px;
  background: var(--bbyd-bg-3); color: var(--bbyd-ink-2);
  border: 1px solid var(--bbyd-line);
}
.bbyd-chip--red { background: var(--bbyd-red-soft); color: var(--bbyd-red); border-color: rgba(255,70,85,.3); }
.bbyd-chip--cyan { background: var(--bbyd-cyan-soft); color: var(--bbyd-cyan); border-color: rgba(0,229,255,.3); }
.bbyd-chip--green { background: rgba(74,222,128,.15); color: var(--bbyd-green); border-color: rgba(74,222,128,.3); }
.bbyd-chip--gold { background: rgba(255,209,102,.15); color: var(--bbyd-gold); border-color: rgba(255,209,102,.3); }
.bbyd-chip .bbyd-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* List row primitive */
.bbyd-list { display: flex; flex-direction: column; }
.bbyd-list__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--bbyd-line);
  font-size: 13px;
}
.bbyd-list__row:last-child { border-bottom: none; }
.bbyd-list__avatar {
  width: 30px; height: 30px;
  background: var(--bbyd-bg-4);
  display: grid; place-items: center;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-mono);
  font-size: 10px; flex-shrink: 0;
}
.bbyd-list__name {
  color: var(--bbyd-ink); font-weight: 700; letter-spacing: -.2px;
}
.bbyd-list__sub {
  font-family: var(--bbyd-f-mono);
  font-size: 11px; color: var(--bbyd-dim);
}
.bbyd-list__right {
  font-family: var(--bbyd-f-mono);
  font-size: 12px; color: var(--bbyd-ink-2); text-align: right;
}
.bbyd-list__right .accent { color: var(--bbyd-red); }
.bbyd-list__right .cyan { color: var(--bbyd-cyan); }
.bbyd-list__right .green { color: var(--bbyd-green); }

/* Leaderboard rows */
.bbyd-lb__row {
  display: grid;
  grid-template-columns: 28px 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed var(--bbyd-line);
  font-size: 13px;
}
/* avatar-less variant: 순위 · 이름 · 값 (이모지/이니셜 박스 제거) */
.bbyd-lb--no-avatar .bbyd-lb__row {
  grid-template-columns: 32px 1fr auto;
}
.bbyd-lb__row:last-child { border-bottom: none; }
.bbyd-lb__rank {
  font-family: var(--bbyd-f-display);
  font-size: 18px; color: var(--bbyd-dim);
  line-height: 1; text-align: center;
}
.bbyd-lb__row:nth-child(1) .bbyd-lb__rank { color: var(--bbyd-gold); }
.bbyd-lb__row:nth-child(2) .bbyd-lb__rank { color: var(--bbyd-ink-2); }
.bbyd-lb__row:nth-child(3) .bbyd-lb__rank { color: #CD7F32; }
.bbyd-lb__avatar {
  width: 28px; height: 28px;
  background: var(--bbyd-bg-4);
  display: grid; place-items: center;
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-mono); font-size: 10px;
}
.bbyd-lb__name { font-weight: 700; color: var(--bbyd-ink); }
.bbyd-lb__val { font-family: var(--bbyd-f-mono); color: var(--bbyd-red); }
.bbyd-lb__row.me { background: var(--bbyd-red-soft); border-bottom-color: var(--bbyd-red); }

/* Schedule rows */
.bbyd-sched__row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--bbyd-line);
  align-items: center;
}
.bbyd-sched__row:last-child { border-bottom: none; }
.bbyd-sched__d {
  font-family: var(--bbyd-f-display);
  font-size: 22px; color: var(--bbyd-ink); line-height: 1;
  letter-spacing: -.04em; text-align: center;
}
.bbyd-sched__d span {
  display: block;
  font-family: var(--bbyd-f-en);
  font-size: 9px; color: var(--bbyd-dim);
  letter-spacing: .2em; margin-top: 2px;
}
.bbyd-sched__t {
  font-family: var(--bbyd-f-kr);
  font-weight: 800; font-size: 14px;
  color: var(--bbyd-ink); letter-spacing: -.2px;
}
.bbyd-sched__sub {
  font-family: var(--bbyd-f-mono);
  font-size: 11px; color: var(--bbyd-dim);
  margin-top: 2px;
}
.bbyd-sched__st {
  font-family: var(--bbyd-f-mono);
  font-size: 11px; color: var(--bbyd-cyan);
  text-align: right;
}

/* Activity feed */
.bbyd-feed__row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--bbyd-line);
  align-items: start;
  font-size: 13px;
}
.bbyd-feed__row:last-child { border-bottom: none; }
.bbyd-feed__icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-dim);
  font-size: 10px;
}
.bbyd-feed__icon.red { color: var(--bbyd-red); border-color: rgba(255,70,85,.3); }
.bbyd-feed__icon.cyan { color: var(--bbyd-cyan); border-color: rgba(0,229,255,.3); }
.bbyd-feed__icon.green { color: var(--bbyd-green); border-color: rgba(74,222,128,.3); }
.bbyd-feed__icon.gold { color: var(--bbyd-gold); border-color: rgba(255,209,102,.3); }
.bbyd-feed__txt b { color: var(--bbyd-ink); font-weight: 700; }
.bbyd-feed__sub {
  font-family: var(--bbyd-f-mono);
  font-size: 11px; color: var(--bbyd-dim);
  margin-top: 2px;
}
.bbyd-feed__time {
  font-family: var(--bbyd-f-mono);
  font-size: 10px; color: var(--bbyd-dim-2);
  white-space: nowrap;
}

/* Calendar */
.bbyd-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.bbyd-cal__weekday {
  font-family: var(--bbyd-f-en);
  font-size: 9px; letter-spacing: .2em;
  color: var(--bbyd-dim); text-align: center;
  padding: 6px 0;
}
.bbyd-cal__day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-family: var(--bbyd-f-mono);
  font-size: 12px;
  color: var(--bbyd-ink-2);
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  position: relative;
  transition: all .15s;
}
.bbyd-cal__day.out {
  color: var(--bbyd-dim-2);
  background: transparent;
  border-color: transparent;
}
.bbyd-cal__day.check {
  background: var(--bbyd-red-soft);
  color: var(--bbyd-red);
  border-color: rgba(255,70,85,.3);
}
.bbyd-cal__day.check::after {
  content: '✓'; position: absolute;
  top: 4px; right: 4px; font-size: 8px;
}
.bbyd-cal__day.today {
  border-color: var(--bbyd-cyan);
  color: var(--bbyd-cyan); font-weight: 700;
}
.bbyd-cal__day:hover { transform: scale(1.06); }

/* Inventory grid */
.bbyd-inv {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bbyd-inv__cell {
  aspect-ratio: 1;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  display: grid; place-items: center;
  font-size: 22px;
  color: var(--bbyd-ink-2);
  position: relative; overflow: hidden;
  cursor: pointer; transition: all .15s;
}
.bbyd-inv__cell:hover {
  border-color: var(--bbyd-red);
  transform: translateY(-2px);
}
.bbyd-inv__cell.equip {
  border-color: var(--bbyd-gold);
  background: linear-gradient(135deg, rgba(255,209,102,.15), transparent);
  color: var(--bbyd-gold);
}
.bbyd-inv__cell.equip::after {
  content: 'E'; position: absolute;
  top: 4px; right: 4px;
  font-family: var(--bbyd-f-mono);
  font-size: 9px; color: var(--bbyd-gold);
}
.bbyd-inv__cell.empty { color: var(--bbyd-dim-2); font-size: 14px; }

/* Admin KPI strip */
.bbyd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--bbyd-line);
  border-bottom: 1px solid var(--bbyd-line);
  background: var(--bbyd-bg-2);
}
.bbyd-kpi {
  padding: 18px 22px;
  border-right: 1px solid var(--bbyd-line);
  display: flex; flex-direction: column; gap: 6px;
}
.bbyd-kpi:last-child { border-right: none; }
.bbyd-kpi__label {
  font-family: var(--bbyd-f-en);
  font-size: 10px; color: var(--bbyd-dim);
  letter-spacing: .25em; text-transform: uppercase;
}
.bbyd-kpi__value {
  font-family: var(--bbyd-f-display);
  font-size: 36px; line-height: 1;
  color: var(--bbyd-ink);
  letter-spacing: -.02em;
}
.bbyd-kpi__delta {
  font-family: var(--bbyd-f-mono);
  font-size: 11px; color: var(--bbyd-green);
}
.bbyd-kpi__delta.neg { color: var(--bbyd-red); }
.bbyd-kpi--accent .bbyd-kpi__value { color: var(--bbyd-red); }

/* Server status strip */
.bbyd-svr-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--bbyd-line);
  margin-bottom: 16px;
}
.bbyd-svr {
  padding: 14px 18px;
  border-right: 1px solid var(--bbyd-line);
  display: flex; align-items: center; gap: 10px;
}
.bbyd-svr:last-child { border-right: none; }
.bbyd-svr__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bbyd-green);
  box-shadow: 0 0 10px var(--bbyd-green);
}
.bbyd-svr.warn .bbyd-svr__dot {
  background: var(--bbyd-gold);
  box-shadow: 0 0 10px var(--bbyd-gold);
}
.bbyd-svr.dead .bbyd-svr__dot {
  background: var(--bbyd-red);
  box-shadow: 0 0 10px var(--bbyd-red);
}
.bbyd-svr__name {
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--bbyd-ink);
}
.bbyd-svr__sub {
  font-family: var(--bbyd-f-mono);
  font-size: 10px; color: var(--bbyd-dim);
  margin-top: 2px;
}

/* Moderation alert */
.bbyd-alert {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  background: var(--bbyd-red-soft);
  border: 1px solid rgba(255,70,85,.3);
  border-left: 3px solid var(--bbyd-red);
  font-size: 13px;
}
.bbyd-alert__icon { color: var(--bbyd-red); margin-top: 2px; }
.bbyd-alert b { color: var(--bbyd-ink); }
.bbyd-alert__cta {
  margin-left: auto;
  padding: 6px 12px;
  background: var(--bbyd-red); color: #fff;
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em;
  border: 0; cursor: pointer;
}

/* ═══ PROFILE VIEW (.pv-*) RE-SKIN ═══ */
body.page-user .pv-wrap,
body.page-admin .pv-wrap,
body.page-developer .pv-wrap {
  border-radius: 0;
  border: 1px solid var(--bbyd-line);
  min-height: auto;
}
body.page-user .pv-bg,
body.page-admin .pv-bg,
body.page-developer .pv-bg { filter: brightness(0.4) saturate(0.7); }
body.page-user .pv-bg-dim,
body.page-admin .pv-bg-dim,
body.page-developer .pv-bg-dim {
  background: linear-gradient(180deg, rgba(7,8,12,.55) 0%, rgba(7,8,12,.92) 100%);
}
body.page-user .pv-content,
body.page-admin .pv-content,
body.page-developer .pv-content {
  padding: 36px 32px 32px;
}
body.page-user .pv-identity,
body.page-admin .pv-identity,
body.page-developer .pv-identity {
  align-items: flex-start;
  gap: 18px;
}
body.page-user .pv-avatar,
body.page-admin .pv-avatar,
body.page-developer .pv-avatar {
  width: 110px; height: 110px;
  border-radius: 0;
  padding: 3px;
  background: linear-gradient(135deg, var(--bbyd-red), var(--bbyd-cyan));
  box-shadow: none;
  animation: none;
}
body.page-user .pv-avatar img,
body.page-admin .pv-avatar img,
body.page-developer .pv-avatar img,
body.page-user .pv-avatar-fallback,
body.page-admin .pv-avatar-fallback,
body.page-developer .pv-avatar-fallback {
  border-radius: 0;
  border: 3px solid var(--bbyd-bg);
}
body.page-user .pv-name-area,
body.page-admin .pv-name-area,
body.page-developer .pv-name-area { align-items: flex-end; gap: 22px; }
body.page-user .pv-name-role,
body.page-admin .pv-name-role,
body.page-developer .pv-name-role { align-items: flex-start; gap: 8px; }
body.page-user .pv-name,
body.page-admin .pv-name,
body.page-developer .pv-name {
  font-family: var(--bbyd-f-kr);
  font-size: 32px; font-weight: 900;
  letter-spacing: -.8px; line-height: 1.05;
  text-shadow: none;
  color: var(--bbyd-ink);
}
body.page-user .pv-badge,
body.page-admin .pv-badge,
body.page-developer .pv-badge {
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 4px 10px;
  background: var(--bbyd-red-soft);
  color: var(--bbyd-red);
  border: 1px solid rgba(255,70,85,.3);
}
body.page-user .pv-greeting,
body.page-admin .pv-greeting,
body.page-developer .pv-greeting {
  font-family: var(--bbyd-f-kr);
  font-size: 14px; font-weight: 500;
  color: var(--bbyd-ink-2);
  text-shadow: none;
  text-align: left;
}

body.page-user .pv-chips,
body.page-admin .pv-chips,
body.page-developer .pv-chips {
  justify-content: flex-start;
  margin-top: 14px;
}
body.page-user .pv-chip,
body.page-admin .pv-chip,
body.page-developer .pv-chip {
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  padding: 12px 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-user .pv-chip:hover,
body.page-admin .pv-chip:hover,
body.page-developer .pv-chip:hover {
  transform: none;
  border-color: var(--bbyd-line-2);
  background: var(--bbyd-bg-3);
}
body.page-user .pv-chip i,
body.page-admin .pv-chip i,
body.page-developer .pv-chip i { color: var(--bbyd-red); }
body.page-user .pv-chip strong,
body.page-admin .pv-chip strong,
body.page-developer .pv-chip strong {
  font-family: var(--bbyd-f-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--bbyd-ink);
}
body.page-user .pv-chip span,
body.page-admin .pv-chip span,
body.page-developer .pv-chip span {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
}

body.page-user .pv-card,
body.page-admin .pv-card,
body.page-developer .pv-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-user .pv-card:hover,
body.page-admin .pv-card:hover,
body.page-developer .pv-card:hover {
  border-color: var(--bbyd-line-2);
  box-shadow: none;
}
body.page-user .pv-card-head,
body.page-admin .pv-card-head,
body.page-developer .pv-card-head {
  font-family: var(--bbyd-f-kr);
  font-weight: 800; font-size: 15px;
  letter-spacing: -.2px;
  border-bottom: 1px solid var(--bbyd-line);
  padding: 14px 18px;
}
body.page-user .pv-card-head i,
body.page-admin .pv-card-head i,
body.page-developer .pv-card-head i { color: var(--bbyd-red); }
body.page-user .pv-row,
body.page-admin .pv-row,
body.page-developer .pv-row {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--bbyd-line);
  border-radius: 0;
  padding: 10px 0;
}
body.page-user .pv-row + .pv-row,
body.page-admin .pv-row + .pv-row,
body.page-developer .pv-row + .pv-row { margin-top: 0; }
body.page-user .pv-row:hover,
body.page-admin .pv-row:hover,
body.page-developer .pv-row:hover { background: var(--bbyd-bg-3); }
body.page-user .pv-row > span,
body.page-admin .pv-row > span,
body.page-developer .pv-row > span {
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .15em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
}

/* ═══ PROFILE COVER + AVATAR ═══ */
.bbyd-profile-cover {
  position: relative;
  height: 220px;
  background:
    linear-gradient(180deg, transparent 0%, var(--bbyd-bg) 100%),
    linear-gradient(135deg, var(--bbyd-red), var(--bbyd-cyan));
  border-bottom: 1px solid var(--bbyd-line);
  overflow: hidden;
}
.bbyd-profile-cover::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 6px);
  pointer-events: none;
}
.bbyd-profile-id {
  display: flex; align-items: end; gap: 22px;
  padding: 0 32px;
  margin-top: -60px;
  position: relative;
}
.bbyd-profile-id__avatar {
  width: 120px; height: 120px;
  background: linear-gradient(135deg, var(--bbyd-red), var(--bbyd-cyan));
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--bbyd-f-display);
  font-size: 56px;
  border: 4px solid var(--bbyd-bg);
  flex-shrink: 0;
}
.bbyd-profile-id__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.bbyd-profile-id__body { padding-bottom: 14px; flex: 1; min-width: 0; }
.bbyd-profile-id__name {
  font-family: var(--bbyd-f-kr);
  font-weight: 900; font-size: 28px;
  letter-spacing: -.6px; color: var(--bbyd-ink);
  line-height: 1.1;
}
.bbyd-profile-id__meta {
  font-family: var(--bbyd-f-en);
  font-size: 11px; letter-spacing: .25em;
  color: var(--bbyd-dim); text-transform: uppercase;
  margin-top: 6px;
}
.bbyd-profile-id__meta .red { color: var(--bbyd-red); }

@media (max-width: 720px) {
  .bbyd-profile-cover { height: 140px; }
  .bbyd-profile-id { padding: 0 16px; gap: 14px; }
  .bbyd-profile-id__avatar { width: 84px; height: 84px; font-size: 38px; }
  .bbyd-profile-id__name { font-size: 22px; }
}

/* ═══ HUD COMPONENTS RE-SKIN ═══
   기존 단원/운영진 페이지의 HUD 컴포넌트를 새 디자인 언어로 흡수 */

/* HUD Hero → bbyd-ph 톤 */
body.page-user .hud-hero,
body.page-admin .hud-hero,
body.page-developer .hud-hero {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--bbyd-line);
  margin: 0 -32px 22px;
  animation: none;
}
body.page-user .hud-hero__tag,
body.page-admin .hud-hero__tag,
body.page-developer .hud-hero__tag {
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .25em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
}
body.page-user .hud-hero__tag-line,
body.page-admin .hud-hero__tag-line,
body.page-developer .hud-hero__tag-line {
  width: 14px; background: var(--bbyd-red);
}
body.page-user .hud-hero__headline,
body.page-admin .hud-hero__headline,
body.page-developer .hud-hero__headline {
  font-family: var(--bbyd-f-kr);
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--bbyd-ink);
  margin-top: 8px;
}
body.page-user .hud-hero__headline em,
body.page-admin .hud-hero__headline em,
body.page-developer .hud-hero__headline em {
  color: var(--bbyd-red);
  text-shadow: none;
}
body.page-user .hud-hero__headline em::after,
body.page-admin .hud-hero__headline em::after,
body.page-developer .hud-hero__headline em::after { display: none; }
body.page-user .hud-hero__sub,
body.page-admin .hud-hero__sub,
body.page-developer .hud-hero__sub {
  font-family: var(--bbyd-f-kr);
  font-size: 13px; font-weight: 500;
  color: var(--bbyd-ink-2);
  margin-top: 8px;
}

/* HUD Section tag */
body.page-user .hud-section__tag,
body.page-admin .hud-section__tag,
body.page-developer .hud-section__tag {
  font-family: var(--bbyd-f-en);
  font-size: 10px; font-weight: 600;
  letter-spacing: .3em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
}
body.page-user .hud-section__dot,
body.page-admin .hud-section__dot,
body.page-developer .hud-section__dot {
  background: var(--bbyd-red);
  box-shadow: 0 0 8px var(--bbyd-red);
}
body.page-user .hud-section__divider,
body.page-admin .hud-section__divider,
body.page-developer .hud-section__divider {
  background: linear-gradient(90deg, var(--bbyd-line-2), transparent);
}

/* HUD Feat strip */
body.page-user .hud-features,
body.page-admin .hud-features,
body.page-developer .hud-features { gap: 12px; }
body.page-user .hud-feat,
body.page-admin .hud-feat,
body.page-developer .hud-feat {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 16px 14px;
}
body.page-user .hud-feat::before,
body.page-admin .hud-feat::before,
body.page-developer .hud-feat::before { display: none; }
body.page-user .hud-feat:hover,
body.page-admin .hud-feat:hover,
body.page-developer .hud-feat:hover {
  transform: none;
  border-color: var(--bbyd-line-2);
  box-shadow: none;
}
body.page-user .hud-feat__icon,
body.page-admin .hud-feat__icon,
body.page-developer .hud-feat__icon {
  font-size: 16px;
  filter: none;
  margin-bottom: 10px;
}
body.page-user .hud-feat__value,
body.page-admin .hud-feat__value,
body.page-developer .hud-feat__value {
  font-family: var(--bbyd-f-display);
  font-size: 28px;
  letter-spacing: -.02em;
  color: var(--bbyd-ink);
  font-weight: 400;
  margin-bottom: 6px;
}
body.page-user .hud-feat__label,
body.page-admin .hud-feat__label,
body.page-developer .hud-feat__label {
  font-family: var(--bbyd-f-en);
  font-size: 10px; font-weight: 600;
  letter-spacing: .25em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
}

/* HUD Glass panel */
body.page-user .hud-glass-panel,
body.page-admin .hud-glass-panel,
body.page-developer .hud-glass-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 20px;
}
body.page-user .hud-glass-panel::before,
body.page-admin .hud-glass-panel::before,
body.page-developer .hud-glass-panel::before { display: none; }

/* HUD video frames */
body.page-user .hud-video-fixed .home-video-frame-wrap,
body.page-admin .hud-video-fixed .home-video-frame-wrap,
body.page-developer .hud-video-fixed .home-video-frame-wrap {
  border-radius: 0;
}

/* Admin dashboard "db-*" components → 새 디자인 언어 */
body.page-admin .db-stat,
body.page-developer .db-stat,
body.page-admin .db-chart-card,
body.page-developer .db-chart-card,
body.page-admin .db-news-card,
body.page-developer .db-news-card,
body.page-admin .db-queue-card,
body.page-developer .db-queue-card,
body.page-admin .db-status-card,
body.page-developer .db-status-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-admin .db-stat:hover,
body.page-developer .db-stat:hover,
body.page-admin .db-chart-card:hover,
body.page-developer .db-chart-card:hover,
body.page-admin .db-news-card:hover,
body.page-developer .db-news-card:hover,
body.page-admin .db-queue-card:hover,
body.page-developer .db-queue-card:hover,
body.page-admin .db-status-card:hover,
body.page-developer .db-status-card:hover {
  transform: none;
  border-color: var(--bbyd-line-2);
  box-shadow: none;
}
body.page-admin .db-stat::before,
body.page-developer .db-stat::before { display: none; }
body.page-admin .db-stat-icon,
body.page-developer .db-stat-icon {
  border-radius: 0;
  background: var(--bbyd-bg-3) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.page-admin .db-stat-value,
body.page-developer .db-stat-value {
  font-family: var(--bbyd-f-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--bbyd-ink);
}
body.page-admin .db-stat-label,
body.page-developer .db-stat-label {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Attendance calendar tweaks for new language */
body.page-user .attendance-shell {
  padding-top: 0;
}

body.page-user .attendance-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .attendance-command-panel,
body.page-user .attendance-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .attendance-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-green);
}

body.page-user .attendance-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-green);
  text-transform: uppercase;
}

body.page-user .attendance-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .attendance-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .attendance-summary-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

body.page-user .attendance-summary-grid .bbyd-card {
  min-width: 0;
  padding: 14px;
}

body.page-user .attendance-summary-grid .bbyd-metric__value {
  overflow-wrap: anywhere;
}

body.page-user .attendance-main-panel {
  min-width: 0;
  padding: 16px;
}

body.page-user .attendance-calendar-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr);
  gap: 16px;
  align-items: start;
}

body.page-user .attendance-calendar-card,
body.page-user .attendance-milestone-card {
  min-width: 0;
}

body.page-user .attendance-calendar-card {
  padding: 18px 20px;
}

@media (max-width: 1120px) {
  body.page-user .attendance-workspace,
  body.page-user .attendance-calendar-panel {
    grid-template-columns: 1fr;
  }

  body.page-user .attendance-command-panel {
    position: static;
  }

  body.page-user .attendance-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-user .attendance-command-panel,
  body.page-user .attendance-main-panel,
  body.page-user .attendance-calendar-card {
    padding: 14px;
  }

  body.page-user .attendance-summary-grid {
    grid-template-columns: 1fr;
  }
}

body.page-user .attendance-calendar-month,
body.page-admin .attendance-calendar-month,
body.page-developer .attendance-calendar-month {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 16px;
  color: var(--bbyd-ink);
  letter-spacing: -.3px;
}
body.page-user .attendance-weekday,
body.page-admin .attendance-weekday,
body.page-developer .attendance-weekday {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
}

/* Events calendar workspace */
body.page-user .events-shell {
  padding-top: 0;
}

body.page-user .events-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .events-command-panel,
body.page-user .events-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .events-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-cyan);
}

body.page-user .events-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-cyan);
  text-transform: uppercase;
}

body.page-user .events-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .events-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .events-month-controls {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
}

body.page-user .events-month-controls .bbyd-btn {
  width: 42px;
  min-width: 42px;
  padding: 0;
  justify-content: center;
}

body.page-user .events-month-label {
  min-width: 0;
  padding: 0 8px;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-en);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
  overflow-wrap: anywhere;
}

body.page-user .events-command-panel .events-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
}

body.page-user .events-main-panel {
  min-width: 0;
  padding: 16px;
}

body.page-user .events-calendar-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 16px;
  align-items: start;
}

body.page-user .events-calendar-card,
body.page-user .events-upcoming-card {
  min-width: 0;
}

body.page-user .events-calendar-card {
  padding: 18px 20px;
}

body.page-user .events-upcoming-card #eventsUpcomingList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 1120px) {
  body.page-user .events-workspace,
  body.page-user .events-calendar-panel {
    grid-template-columns: 1fr;
  }

  body.page-user .events-command-panel {
    position: static;
  }

  body.page-user .events-command-panel .events-legend {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-user .events-command-panel,
  body.page-user .events-main-panel,
  body.page-user .events-calendar-card {
    padding: 14px;
  }

  body.page-user .events-command-panel .events-legend {
    grid-template-columns: 1fr 1fr;
  }
}

/* Survey workspace */
body.page-user .survey-shell {
  padding-top: 0;
}

body.page-user .survey-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .survey-command-panel,
body.page-user .survey-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .survey-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-red);
}

body.page-user .survey-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-red);
  text-transform: uppercase;
}

body.page-user .survey-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .survey-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .survey-brief-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  font-size: 12px;
}

body.page-user .survey-brief-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.page-user .survey-brief-list i {
  color: var(--bbyd-cyan);
}

body.page-user .survey-main-panel {
  min-width: 0;
}

body.page-user .survey-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-user .survey-list-header > i {
  color: var(--bbyd-cyan);
  font-size: 15px;
}

body.page-user .survey-card-list {
  display: grid;
  gap: 12px;
  min-height: 80px;
  padding: 18px;
}

body.page-user .survey-card-list .empty-placeholder {
  padding: 24px 0;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-align: center;
  text-transform: uppercase;
}

body.page-user .survey-user-card {
  min-width: 0;
  padding: 16px;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-left: 2px solid var(--bbyd-cyan);
}

body.page-user .survey-user-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body.page-user .survey-user-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

body.page-user .survey-user-card__title {
  color: var(--bbyd-ink);
  font-size: 16px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body.page-user .survey-status-badge {
  font-size: 11px;
  white-space: nowrap;
}

body.page-user .survey-user-card__deadline {
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

body.page-user .survey-user-card__desc {
  margin: 8px 0 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .survey-my-response {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.55;
}

body.page-user .survey-my-response strong {
  color: var(--bbyd-dim);
  font-weight: 800;
}

body.page-user .survey-response-form-slot {
  margin-top: 10px;
}

body.page-user .survey-action-btn {
  margin-top: 10px;
}

body.page-user .survey-response-form {
  padding: 14px;
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
}

body.page-user .survey-question-block {
  margin-bottom: 14px;
}

body.page-user .survey-question-block:last-child {
  margin-bottom: 0;
}

body.page-user .survey-question-label {
  display: block;
  margin-bottom: 8px;
  color: var(--bbyd-ink);
  font-size: 13px;
  font-weight: 800;
}

body.page-user .survey-required {
  color: var(--bbyd-red);
}

body.page-user .survey-question-image-wrap {
  margin: 8px 0 10px;
}

body.page-user .survey-question-image {
  max-width: 100%;
  max-height: 300px;
  border: 1px solid var(--bbyd-line);
  object-fit: contain;
}

body.page-user .survey-option-row {
  margin: 7px 0;
}

body.page-user .survey-option-row label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}

body.page-user .survey-option-row input {
  margin-top: 2px;
  flex-shrink: 0;
}

body.page-user .survey-text-input {
  width: 100%;
  min-width: 0;
  margin-top: 3px;
  padding: 10px 11px;
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink);
  resize: vertical;
}

body.page-user .survey-response-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 1040px) {
  body.page-user .survey-workspace {
    grid-template-columns: 1fr;
  }

  body.page-user .survey-command-panel {
    position: static;
  }

  body.page-user .survey-brief-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-user .survey-command-panel,
  body.page-user .survey-card-list,
  body.page-user .survey-list-header,
  body.page-user .survey-user-card,
  body.page-user .survey-response-form {
    padding: 14px;
  }

  body.page-user .survey-brief-list {
    grid-template-columns: 1fr;
  }
}

/* Donation history workspace */
body.page-user .donation-shell {
  padding-top: 0;
}

body.page-user .donation-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .donation-command-panel,
body.page-user .donation-main-panel,
body.page-user .donation-history-panel,
body.page-user .hud-donation-info-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .donation-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-gold);
}

body.page-user .donation-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-gold);
  text-transform: uppercase;
}

body.page-user .donation-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .donation-command-panel > p {
  margin: 0 0 16px;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .donation-command-panel .hud-donation-steps {
  border-top: 1px solid var(--bbyd-line);
}

body.page-user .hud-donation-step strong {
  color: var(--bbyd-ink);
  font-size: 13px;
  font-weight: 800;
}

body.page-user .hud-donation-step p {
  margin: 4px 0 0;
  color: var(--bbyd-ink-2);
  font-size: 12px;
  line-height: 1.55;
}

body.page-user .hud-donation-step a {
  color: var(--bbyd-red);
  font-weight: 800;
}

body.page-user .donation-main-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

body.page-user .donation-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: stretch;
}

body.page-user .hud-donation-info-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

body.page-user .hud-donation-info-panel .hud-donation-title {
  margin-bottom: 8px;
}

body.page-user .hud-donation-info p {
  margin: 0;
}

body.page-user .hud-donation-info p + p {
  margin-top: 5px;
}

body.page-user .hud-donation-qr-panel {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

body.page-user .donation-history-panel {
  min-width: 0;
}

body.page-user .donation-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-user .donation-history-table-wrap {
  border: 0;
}

body.page-user .donation-history-empty {
  padding: 24px 0;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-align: center;
  text-transform: uppercase;
}

body.page-user .donation-history-empty--error {
  color: var(--bbyd-red);
}

body.page-user .donation-history-pagination {
  padding: 14px 20px;
  border-top: 1px solid var(--bbyd-line);
}

body.page-user .donation-pagination {
  margin-top: 0;
}

body.page-user .donation-page-btn {
  border-radius: 0;
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-mono);
}

body.page-user .donation-page-btn:hover:not(:disabled) {
  background: var(--bbyd-bg-3);
  border-color: var(--bbyd-line-2);
}

body.page-user .donation-page-btn.is-active {
  background: var(--bbyd-gold);
  border-color: var(--bbyd-gold);
  color: #1a1200;
}

@media (max-width: 1120px) {
  body.page-user .donation-workspace,
  body.page-user .donation-top-grid {
    grid-template-columns: 1fr;
  }

  body.page-user .donation-command-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  body.page-user .donation-command-panel,
  body.page-user .donation-main-panel,
  body.page-user .hud-donation-info-panel,
  body.page-user .hud-donation-qr-panel,
  body.page-user .donation-history-head {
    padding: 14px;
  }

  body.page-user .hud-donation-info-panel {
    grid-template-columns: 1fr;
  }

  body.page-user .hud-donation-qr-img {
    width: 180px;
    height: 180px;
  }
}

/* Transaction history workspace */
body.page-user .history-shell {
  padding-top: 0;
}

body.page-user .history-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .history-command-panel,
body.page-user .history-main-panel,
body.page-user .history-ledger-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .history-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-cyan);
}

body.page-user .history-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-cyan);
  text-transform: uppercase;
}

body.page-user .history-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .history-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .history-brief-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  font-size: 12px;
}

body.page-user .history-brief-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.page-user .history-brief-list i {
  color: var(--bbyd-gold);
}

body.page-user .history-main-panel {
  min-width: 0;
  padding: 16px;
}

body.page-user .history-ledger-panel {
  min-width: 0;
}

body.page-user .history-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-user .history-ledger-head > i {
  color: var(--bbyd-cyan);
  font-size: 15px;
}

body.page-user .history-table-wrap {
  border: 0;
}

body.page-user .history-empty {
  padding: 24px 0;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-align: center;
  text-transform: uppercase;
}

body.page-user .history-empty--error {
  color: var(--bbyd-red);
}

body.page-user .history-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  border-top: 1px solid var(--bbyd-line);
}

body.page-user .history-pagination .tx-pagination {
  margin: 0;
}

@media (max-width: 1040px) {
  body.page-user .history-workspace {
    grid-template-columns: 1fr;
  }

  body.page-user .history-command-panel {
    position: static;
  }

  body.page-user .history-brief-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-user .history-command-panel,
  body.page-user .history-main-panel,
  body.page-user .history-ledger-head {
    padding: 14px;
  }

  body.page-user .history-brief-list {
    grid-template-columns: 1fr;
  }
}

/* Reaction game workspace */
body.page-user .reaction-shell {
  padding-top: 0;
}

body.page-user .reaction-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .reaction-command-panel,
body.page-user .reaction-main-panel,
body.page-user .reaction-stage-panel,
body.page-user .reaction-ranking-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .reaction-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-red);
}

body.page-user .reaction-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-red);
  text-transform: uppercase;
}

body.page-user .reaction-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .reaction-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .reaction-metric-stack {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

body.page-user .reaction-metric-card {
  min-width: 0;
  padding: 14px;
}

body.page-user .reaction-metric-card .bbyd-metric__value {
  margin-top: 8px;
  font-size: 30px;
  overflow-wrap: anywhere;
}

body.page-user .reaction-main-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

body.page-user .reaction-stage-panel,
body.page-user .reaction-ranking-panel {
  min-width: 0;
}

body.page-user .reaction-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-user .reaction-panel-head > i {
  color: var(--bbyd-gold);
  font-size: 15px;
}

body.page-user .reaction-stage-panel .reaction-stage {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

body.page-user .reaction-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px 8px;
}

body.page-user .reaction-footnote {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-align: center;
  text-transform: uppercase;
}

body.page-user .reaction-ranking-panel .reaction-daily-ranking {
  padding: 6px 20px 12px;
}

body.page-user .reaction-ranking-panel .reaction-daily-ranking > .empty {
  margin: 0;
  padding: 18px 0;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 1040px) {
  body.page-user .reaction-workspace {
    grid-template-columns: 1fr;
  }

  body.page-user .reaction-command-panel {
    position: static;
  }

  body.page-user .reaction-metric-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-user .reaction-command-panel,
  body.page-user .reaction-main-panel,
  body.page-user .reaction-panel-head {
    padding: 14px;
  }

  body.page-user .reaction-metric-stack {
    grid-template-columns: 1fr;
  }

  body.page-user .reaction-metric-card .bbyd-metric__value {
    font-size: 28px;
  }
}

/* Support center workspace */
body.page-user .support-shell,
body.page-user .support-chat-shell {
  padding-top: 0;
}

body.page-user .support-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .support-command-panel,
body.page-user .support-main-panel,
body.page-user .support-list-panel,
body.page-user .support-chat-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .support-command-panel {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-red);
}

body.page-user .support-command-panel__kicker {
  color: var(--bbyd-red);
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.page-user .support-command-panel h2 {
  margin: 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

body.page-user .support-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.65;
}

body.page-user .support-guide-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

body.page-user .support-guide-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(236, 250, 255, 0.1);
  color: var(--bbyd-ink-2);
  font-size: 12px;
}

body.page-user .support-guide-list i {
  width: 16px;
  color: var(--bbyd-red);
  text-align: center;
}

body.page-user .support-main-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

body.page-user .support-create-card,
body.page-user .support-list-panel {
  min-width: 0;
}

body.page-user .support-create-card .bbyd-card__head {
  margin-bottom: 14px;
}

body.page-user .support-card-icon {
  font-size: 15px;
}

body.page-user .support-shell--report .support-card-icon,
body.page-user .support-shell--report .support-guide-list i {
  color: var(--bbyd-red);
}

body.page-user .support-shell--inquiry .support-card-icon,
body.page-user .support-shell--inquiry .support-guide-list i {
  color: var(--bbyd-cyan);
}

body.page-user .support-shell--bug .support-card-icon,
body.page-user .support-shell--bug .support-guide-list i {
  color: var(--bbyd-gold);
}

body.page-user .support-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.page-user .support-form-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.page-user .support-form-label {
  color: var(--tab-muted);
  font-size: 12px;
  font-weight: 900;
}

body.page-user .support-form-input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--tab-line-strong);
  border-radius: 12px;
  background: #111927;
  color: var(--tab-text);
  font: inherit;
  outline: none;
}

body.page-user .support-form-input:focus {
  border-color: rgba(0,168,139,.55);
}

body.page-user .support-form-textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

body.page-user .support-create-form .bbyd-btn {
  align-self: flex-start;
}

body.page-user .support-list-panel {
  overflow: hidden;
}

body.page-user .support-list-head,
body.page-user .support-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-user .support-ticket-list {
  padding: 12px;
}

body.page-user .support-ticket-list .empty,
body.page-user .support-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-align: center;
  text-transform: uppercase;
}

body.page-user .support-ticket-list .mc-list-item {
  border-radius: 0;
}

body.page-user .support-chat-panel {
  overflow: hidden;
}

body.page-user .support-chat-head {
  padding: 14px 18px;
}

body.page-user .support-chat-body {
  padding: 18px;
}

@media (max-width: 1120px) {
  body.page-user .support-workspace,
  body.page-user .support-main-panel {
    grid-template-columns: 1fr;
  }

  body.page-user .support-command-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  body.page-user .support-command-panel,
  body.page-user .support-main-panel,
  body.page-user .support-list-head,
  body.page-user .support-chat-head,
  body.page-user .support-chat-body {
    padding: 14px;
  }

  body.page-user .support-create-form .bbyd-btn {
    align-self: stretch;
  }

  body.page-user .support-chat-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ═══ LEADERBOARD PAGE RE-SKIN ═══ */
body.page-user .leaderboard-shell {
  padding-top: 0;
}

body.page-user .leaderboard-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .leaderboard-command-panel,
body.page-user .leaderboard-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .leaderboard-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-gold);
}

body.page-user .leaderboard-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-gold);
  text-transform: uppercase;
}

body.page-user .leaderboard-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .leaderboard-command-panel p {
  margin: 0 0 16px;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .leaderboard-main-panel {
  min-width: 0;
  padding: 16px;
}

body.page-user .leaderboard-main-panel .leaderboard-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-user .leaderboard-main-panel .leaderboard-list {
  min-width: 0;
}

body.page-user .leaderboard-type-tabs {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bbyd-line);
  gap: 0;
  padding-bottom: 0;
  flex-wrap: wrap;
}
body.page-user .leaderboard-type-tab {
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bbyd-dim);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: -1px;
  box-shadow: none;
  transition: color .15s, border-color .15s;
}
body.page-user .leaderboard-type-tab:hover:not(.is-active) {
  background: transparent;
  border-color: transparent;
  color: var(--bbyd-ink-2);
}
body.page-user .leaderboard-type-tab.is-active {
  background: transparent;
  color: var(--bbyd-ink);
  border-bottom-color: var(--bbyd-red);
  box-shadow: none;
}

body.page-user .leaderboard-scope-label {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

body.page-user .leaderboard-header-row {
  font-family: var(--bbyd-f-en);
  font-size: 10px; font-weight: 600;
  letter-spacing: .25em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
  padding: 12px 14px;
  margin-bottom: 0;
  background: var(--bbyd-bg-3);
  border-bottom: 1px solid var(--bbyd-line);
  grid-template-columns: 70px minmax(0,1fr) 130px;
}

body.page-user .leaderboard-list {
  gap: 0;
  background: var(--bbyd-bg-2);
  border-left: 1px solid var(--bbyd-line);
  border-right: 1px solid var(--bbyd-line);
}

body.page-user .leaderboard-row {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--bbyd-line);
  border-radius: 0;
  padding: 12px 14px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  grid-template-columns: 70px minmax(0,1fr) 130px;
  transition: background .15s;
}
body.page-user .leaderboard-row:last-child { border-bottom: 0; }
body.page-user .leaderboard-row:hover {
  background: var(--bbyd-bg-3);
  transform: none;
  border-color: var(--bbyd-line);
}
body.page-user .leaderboard-row.is-me {
  background: var(--bbyd-red-soft);
  border-color: var(--bbyd-red);
  box-shadow: none;
}

/* Top-3 podium styling within rows */
body.page-user .leaderboard-row:nth-child(1) {
  background: linear-gradient(180deg, rgba(255,209,102,.08), transparent);
  border-color: var(--bbyd-line);
  box-shadow: none;
}
body.page-user .leaderboard-row:nth-child(2) {
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-color: var(--bbyd-line);
  box-shadow: none;
}
body.page-user .leaderboard-row:nth-child(3) {
  background: linear-gradient(180deg, rgba(205,127,50,.08), transparent);
  border-color: var(--bbyd-line);
  box-shadow: none;
}
body.page-user .leaderboard-row:nth-child(1) .leaderboard-rank { color: var(--bbyd-gold); }
body.page-user .leaderboard-row:nth-child(2) .leaderboard-rank { color: var(--bbyd-ink-2); }
body.page-user .leaderboard-row:nth-child(3) .leaderboard-rank { color: #CD7F32; }

body.page-user .leaderboard-rank {
  font-family: var(--bbyd-f-display);
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--bbyd-dim);
  font-weight: 400;
}
body.page-user .leaderboard-name {
  font-family: var(--bbyd-f-kr);
  font-weight: 700; color: var(--bbyd-ink);
  letter-spacing: -.2px;
}
body.page-user .leaderboard-detail {
  font-family: var(--bbyd-f-mono);
  font-size: 11px;
  color: var(--bbyd-dim);
}
body.page-user .leaderboard-value {
  font-family: var(--bbyd-f-mono);
  font-size: 13px; font-weight: 700;
  color: var(--bbyd-red);
}

@media (max-width: 1040px) {
  body.page-user .leaderboard-workspace {
    grid-template-columns: 1fr;
  }

  body.page-user .leaderboard-command-panel {
    position: static;
  }

  body.page-user .leaderboard-command-panel .leaderboard-type-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-user .leaderboard-command-panel,
  body.page-user .leaderboard-main-panel {
    padding: 14px;
  }

  body.page-user .leaderboard-command-panel .leaderboard-type-tabs,
  body.page-user .leaderboard-main-panel .leaderboard-summary-grid {
    grid-template-columns: 1fr;
  }

  body.page-user .leaderboard-type-tab {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Pagination */
body.page-user .lb-page-btn {
  border-radius: 0;
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-mono);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
body.page-user .lb-page-btn:hover:not(:disabled) {
  border-color: var(--bbyd-line-2);
  color: var(--bbyd-ink);
  background: var(--bbyd-bg-3);
}
body.page-user .lb-page-btn.is-active {
  background: var(--bbyd-red);
  border-color: var(--bbyd-red);
  color: #fff;
}
body.page-user .lb-page-btn:disabled {
  opacity: .4; cursor: not-allowed;
}

/* ═══ ATTENDANCE CALENDAR RE-SKIN ═══ */
body.page-user .attendance-calendar-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 0 14px;
  border-bottom: 1px solid var(--bbyd-line);
  margin-bottom: 14px;
}
body.page-user .attendance-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
body.page-user .attendance-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
body.page-user .attendance-calendar-grid > *,
body.page-user .attendance-calendar-grid .attendance-day-cell {
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-family: var(--bbyd-f-mono);
  font-size: 12px;
  color: var(--bbyd-ink-2);
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  position: relative;
  transition: transform .15s, border-color .15s, background .15s;
  cursor: pointer;
}
body.page-user .attendance-calendar-grid > *:hover,
body.page-user .attendance-calendar-grid .attendance-day-cell:hover {
  transform: scale(1.06);
  border-color: var(--bbyd-line-2);
}
body.page-user .attendance-calendar-grid .attendance-day-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
body.page-user .attendance-calendar-grid .attendance-day-cell.empty:hover {
  transform: none;
}
body.page-user .attendance-calendar-grid .attendance-day-cell.is-attended {
  background: var(--bbyd-red-soft);
  color: var(--bbyd-red);
  border-color: rgba(255,70,85,.3);
}
body.page-user .attendance-day-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  object-fit: contain;
  opacity: .85;
  pointer-events: none;
}
body.page-user .attendance-day-label {
  position: relative;
  z-index: 1;
  font-family: var(--bbyd-f-mono);
  font-size: 12px;
}
body.page-user .attendance-calendar-grid .out,
body.page-user .attendance-calendar-grid .is-out,
body.page-user .attendance-calendar-grid .blank {
  background: transparent;
  border-color: transparent;
  color: var(--bbyd-dim-2);
}
body.page-user .attendance-calendar-grid .checked,
body.page-user .attendance-calendar-grid .is-checked,
body.page-user .attendance-calendar-grid .attended {
  background: var(--bbyd-red-soft);
  color: var(--bbyd-red);
  border-color: rgba(255,70,85,.3);
}
body.page-user .attendance-calendar-grid .today,
body.page-user .attendance-calendar-grid .is-today {
  border-color: var(--bbyd-cyan);
  color: var(--bbyd-cyan);
  font-weight: 700;
}
body.page-user .attendance-calendar-grid .checked::after,
body.page-user .attendance-calendar-grid .is-checked::after,
body.page-user .attendance-calendar-grid .attended::after {
  content: '✓';
  position: absolute;
  top: 4px; right: 4px;
  font-size: 8px;
}

/* ═══ MEMBER ROSTER (.member-role-*) RE-SKIN ═══ */
body.page-user .member-role-total,
body.page-admin .member-role-total {
  font-family: var(--bbyd-f-en);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
  margin-bottom: 16px;
}
body.page-user .member-role-total strong,
body.page-admin .member-role-total strong {
  font-family: var(--bbyd-f-display);
  font-size: 18px;
  color: var(--bbyd-ink);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 4px;
}

body.page-user .member-role-sections,
body.page-admin .member-role-sections {
  gap: 16px;
}

body.page-user .member-role-section,
body.page-admin .member-role-section {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  padding: 18px;
}
body.page-user .member-role-section::before,
body.page-admin .member-role-section::before { display: none; }

body.page-user .member-role-header,
body.page-admin .member-role-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bbyd-line);
  margin-bottom: 14px;
}
body.page-user .member-role-header h3,
body.page-admin .member-role-header h3 {
  font-family: var(--bbyd-f-kr);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--bbyd-ink);
}
body.page-user .member-role-icon,
body.page-admin .member-role-icon { border-radius: 0; }

body.page-user .member-role-count,
body.page-admin .member-role-count {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  border-radius: 0;
  padding: 3px 8px;
  font-weight: 600;
}

body.page-user .member-role-button,
body.page-admin .member-role-button {
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  color: var(--bbyd-ink-2);
  padding: 12px 8px 10px;
  transition: border-color .15s, color .15s, background .15s;
}
body.page-user .member-role-button:hover,
body.page-admin .member-role-button:hover {
  background: var(--bbyd-bg-3);
  border-color: var(--bbyd-red);
  color: var(--bbyd-ink);
  transform: none;
}
body.page-user .member-role-button:hover .member-role-avatar,
body.page-admin .member-role-button:hover .member-role-avatar {
  border-color: var(--bbyd-red);
}
body.page-user .member-role-avatar,
body.page-admin .member-role-avatar {
  border-radius: 0;
  border: 2px solid var(--bbyd-line);
}

body.page-user .member-role-activity,
body.page-user .member-role-last-activity,
body.page-admin .member-role-activity,
body.page-admin .member-role-last-activity {
  color: var(--bbyd-dim);
  font-size: 10px;
  letter-spacing: 0;
}

body.page-user .member-role-item.member-role-selected > .member-role-button,
body.page-admin .member-role-item.member-role-selected > .member-role-button {
  border-color: var(--bbyd-red);
  box-shadow: none;
  background: var(--bbyd-red-soft);
}

body.page-user .member-role-empty,
body.page-admin .member-role-empty {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
}

body.page-user .members-directory-shell {
  padding-top: 0;
}

body.page-user .members-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .members-command-panel,
body.page-user .members-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .members-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-cyan);
}

body.page-user .members-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-cyan);
  text-transform: uppercase;
}

body.page-user .members-command-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .members-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .members-command-panel__stats {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bbyd-line);
}

body.page-user .members-command-panel__stats span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-kr);
  font-size: 12px;
  line-height: 1.35;
}

body.page-user .members-command-panel__stats i {
  width: 18px;
  color: var(--bbyd-red);
  text-align: center;
}

body.page-user .members-command-panel__stats strong {
  color: var(--bbyd-ink);
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

body.page-user .members-main-panel {
  min-width: 0;
  padding: 16px;
}

body.page-user .members-main-panel .member-role-total {
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  border-left: 2px solid var(--bbyd-red);
  margin-bottom: 14px;
  padding: 10px 12px;
}

body.page-user .members-main-panel .member-role-section {
  background: var(--bbyd-bg);
}

@media (max-width: 960px) {
  body.page-user .members-workspace {
    grid-template-columns: 1fr;
  }

  body.page-user .members-command-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  body.page-user .members-workspace {
    gap: 12px;
  }

  body.page-user .members-command-panel,
  body.page-user .members-main-panel {
    padding: 14px;
  }
}

/* ═══ MEMBER CARDS LIST (단원 목록) ═══ */
.bbyd-member-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s;
}
.bbyd-member-card:hover { border-color: var(--bbyd-line-2); }
.bbyd-member-card__head {
  display: flex; align-items: center; gap: 14px;
}
.bbyd-member-card__avatar {
  position: relative;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--bbyd-red), var(--bbyd-cyan));
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--bbyd-f-display);
  font-size: 20px;
  flex-shrink: 0;
}
.bbyd-member-card__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.bbyd-member-card__status {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: var(--bbyd-dim-2);
  border: 2px solid var(--bbyd-bg-2);
  border-radius: 50%;
}
.bbyd-member-card__status--online { background: var(--bbyd-green); }
.bbyd-member-card__status--in-game { background: var(--bbyd-red); }
.bbyd-member-card__status--offline { background: var(--bbyd-dim-2); }
.bbyd-member-card__info { flex: 1; min-width: 0; }
.bbyd-member-card__name {
  font-family: var(--bbyd-f-kr);
  font-weight: 800; font-size: 14px;
  color: var(--bbyd-ink);
  letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bbyd-member-card__tag {
  font-family: var(--bbyd-f-mono);
  font-size: 11px;
  color: var(--bbyd-dim);
  margin-top: 2px;
}
.bbyd-member-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--bbyd-line);
}
.bbyd-member-card__status-text {
  font-family: var(--bbyd-f-mono);
  font-size: 11px;
}
.bbyd-member-card__actions {
  display: flex; gap: 6px;
  margin-top: 4px;
}
.bbyd-member-card__actions .bbyd-btn {
  flex: 1; padding: 8px;
  font-size: 10px;
  justify-content: center;
}

/* ═══ HOME DASHBOARD WIDGETS RE-SKIN ═══
   Client-side rendered in user-script-navigation.ejs */

/* Ranking list */
body.page-user .home-rank-list {
  list-style: none; margin: 0; padding: 0;
}
body.page-user .home-rank-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--bbyd-line);
}
body.page-user .home-rank-list li:last-child { border-bottom: 0; }
body.page-user .home-rank-pos {
  font-family: var(--bbyd-f-display);
  font-size: 18px; font-weight: 400;
  letter-spacing: -.02em;
  background: transparent !important;
  color: var(--bbyd-dim) !important;
  border-radius: 0;
  width: auto; height: auto;
  text-align: center;
  padding: 0;
}
body.page-user .home-rank-list li:nth-child(1) .home-rank-pos { color: var(--bbyd-gold) !important; }
body.page-user .home-rank-list li:nth-child(2) .home-rank-pos { color: var(--bbyd-ink-2) !important; }
body.page-user .home-rank-list li:nth-child(3) .home-rank-pos { color: #CD7F32 !important; }
body.page-user .home-rank-main {
  font-family: var(--bbyd-f-kr);
  font-weight: 700;
  color: var(--bbyd-ink);
  font-size: 13px;
  letter-spacing: -.2px;
}
body.page-user .home-rank-value {
  font-family: var(--bbyd-f-mono);
  font-size: 12px;
  color: var(--bbyd-cyan);
}
body.page-user .home-rank-extra {
  font-family: var(--bbyd-f-mono);
  font-size: 11px;
  color: var(--bbyd-dim);
}
body.page-user .home-rank-tier-img {
  height: 18px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Weekly chart */
body.page-user .wc-wrap {
  display: flex; flex-direction: column; gap: 14px;
}
body.page-user .wc-total {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--bbyd-line);
}
body.page-user .wc-total-num {
  font-family: var(--bbyd-f-display);
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--bbyd-ink);
}
body.page-user .wc-total-label {
  font-family: var(--bbyd-f-en);
  font-size: 10px; letter-spacing: .2em;
  color: var(--bbyd-dim); text-transform: uppercase;
}
body.page-user .wc-rows {
  display: flex; flex-direction: column; gap: 4px;
}
body.page-user .wc-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
}
body.page-user .wc-day {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--bbyd-dim);
  text-align: center;
}
body.page-user .wc-track {
  height: 8px;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  position: relative;
}
body.page-user .wc-fill {
  position: absolute; inset: 0;
  background: var(--bbyd-red);
  width: 0;
}
body.page-user .wc-today .wc-fill { background: var(--bbyd-cyan); }
body.page-user .wc-future .wc-track { opacity: .35; }

/* Attendance heatmap */
body.page-user .ah-wrap { display: flex; flex-direction: column; gap: 8px; }
body.page-user .ah-grid { display: flex; flex-direction: column; gap: 4px; }
body.page-user .ah-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
body.page-user .ah-cell {
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-family: var(--bbyd-f-mono);
  font-size: 11px;
  color: var(--bbyd-ink-2);
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
}
body.page-user .ah-day-label {
  font-family: var(--bbyd-f-en);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--bbyd-dim);
  background: transparent;
  border: 0;
  text-transform: uppercase;
}
body.page-user .ah-attended {
  background: var(--bbyd-red-soft);
  color: var(--bbyd-red);
  border-color: rgba(255,70,85,.3);
}
body.page-user .ah-missed {
  background: var(--bbyd-bg-2);
  color: var(--bbyd-dim-2);
  border-color: var(--bbyd-line);
}
body.page-user .ah-today {
  border-color: var(--bbyd-cyan);
  color: var(--bbyd-cyan);
  font-weight: 700;
}

/* Scrim winners */
body.page-user .sw-wrap {
  display: flex; flex-direction: column; gap: 12px;
}
body.page-user .sw-header {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--bbyd-line);
}
body.page-user .sw-round {
  font-family: var(--bbyd-f-display);
  font-size: 18px;
  color: var(--bbyd-ink);
  letter-spacing: -.02em;
}
body.page-user .sw-label {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
}
body.page-user .sw-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.page-user .sw-col-header {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
body.page-user .sw-col-header.sw-gold { color: var(--bbyd-gold); }
body.page-user .sw-col-header.sw-silver { color: var(--bbyd-ink-2); }
body.page-user .sw-name {
  font-family: var(--bbyd-f-kr);
  font-weight: 700;
  font-size: 13px;
  color: var(--bbyd-ink);
  padding: 4px 0;
}

/* Patch hero card */
body.page-user .home-patch-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bbyd-line);
  background: var(--bbyd-bg-3);
  border-radius: 0;
}
body.page-user .home-patch-hero-image { display: block; width: 100%; }
body.page-user .home-patch-hero-dim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(7,8,12,.85) 70%, var(--bbyd-bg-2) 100%);
  pointer-events: none;
}
body.page-user .home-patch-hero-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
body.page-user .home-patch-hero-title {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 16px;
  color: var(--bbyd-ink);
  letter-spacing: -.2px;
}
body.page-user .home-patch-hero-text {
  font-size: 12px; color: var(--bbyd-ink-2);
}
body.page-user .home-patch-overlay-btn {
  align-self: flex-start;
  padding: 8px 14px;
  font-family: var(--bbyd-f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  background: var(--bbyd-red); color: #fff;
  text-decoration: none;
}
body.page-user .home-patch-overlay-btn:hover {
  background: #fff; color: var(--bbyd-red);
}

/* ═══ 패치노트 좌우 분할 — 좁은 화면에서 1열로 ═══ */
@media (max-width: 1100px) {
  body.page-user .bbyd-patch-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  body.page-user .bbyd-patch-grid > div:first-child {
    aspect-ratio: 16/9;
    min-height: 220px !important;
  }
}

/* ═══ HOME DASHBOARD METRIC CARDS — bbyd-stat-grid ═══ */
.bbyd-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 1200px) {
  .bbyd-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bbyd-stat-grid { grid-template-columns: 1fr; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1200px) {
  .bbyd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .bbyd-grid--3 { grid-template-columns: 1fr; }
  .bbyd-grid--2-1, .bbyd-grid--1-2 { grid-template-columns: 1fr; }
  .bbyd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .bbyd-svr-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  /* 사이드바가 drawer로 빠지므로 콘텐츠는 풀너비 */
  body.page-user .main-content,
  body.page-admin .main-content { margin-left: 0; padding-top: 56px; }
  /* developer 페이지는 사이드바를 펼침 모드로 두고 토글 미사용 → padding-top 불필요 */
  body.page-developer .main-content { margin-left: 0; }
  body.page-developer .sidebar { width: 100%; height: auto; position: static; }
}
@media (max-width: 900px) {
  .bbyd-grid--4, .bbyd-grid--2 { grid-template-columns: 1fr; }
  .bbyd-kpi-strip { grid-template-columns: 1fr; }
}

/* ═══ EXTENDED COVERAGE — 단원 / 운영진 / 개발자 페이지 고유 컴포넌트 ═══ */

/* ── data-table: 후원/상점 인벤토리 등에서 사용 ── */
body.page-user .hud-table-wrap,
body.page-admin .hud-table-wrap,
body.page-developer .hud-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bbyd-line);
  background: var(--bbyd-bg-2);
}
body.page-user .data-table,
body.page-admin .data-table,
body.page-developer .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--bbyd-f-kr);
}
body.page-user .data-table th,
body.page-admin .data-table th,
body.page-developer .data-table th {
  text-align: left;
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
  padding: 12px 14px;
  background: var(--bbyd-bg-3);
  border-bottom: 1px solid var(--bbyd-line);
}
body.page-user .data-table td,
body.page-admin .data-table td,
body.page-developer .data-table td {
  padding: 12px 14px;
  border-bottom: 1px dashed var(--bbyd-line);
  color: var(--bbyd-ink-2);
}
body.page-user .data-table tr:hover td,
body.page-admin .data-table tr:hover td,
body.page-developer .data-table tr:hover td { background: var(--bbyd-bg-3); }
body.page-user .data-table.table-sticky-first td:first-child,
body.page-admin .data-table.table-sticky-first td:first-child,
body.page-developer .data-table.table-sticky-first td:first-child {
  position: sticky; left: 0;
  background: var(--bbyd-bg-2);
}

/* ── hud-donation-* (후원 페이지) ── */
body.page-user .hud-donation-guide,
body.page-user .hud-donation-qr-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  padding: 20px;
}
body.page-user .hud-donation-title {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 15px;
  color: var(--bbyd-ink);
  letter-spacing: -.2px;
  margin-bottom: 12px;
}
body.page-user .hud-donation-icon {
  width: 36px; height: 36px;
  background: var(--bbyd-red-soft);
  display: grid; place-items: center;
  color: var(--bbyd-red);
  font-size: 14px;
  flex-shrink: 0;
}
body.page-user .hud-donation-info {
  font-size: 13px;
  color: var(--bbyd-ink-2);
  line-height: 1.6;
}
body.page-user .hud-donation-info b { color: var(--bbyd-ink); }
body.page-user .hud-donation-steps {
  display: flex; flex-direction: column;
  gap: 0;
}
body.page-user .hud-donation-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--bbyd-line);
  font-size: 13px;
  color: var(--bbyd-ink-2);
}
body.page-user .hud-donation-step:last-child { border-bottom: 0; }
body.page-user .hud-donation-step-badge {
  width: 24px; height: 24px;
  background: var(--bbyd-bg-3);
  display: grid; place-items: center;
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-display);
  font-size: 12px;
}
body.page-user .hud-donation-step--warn .hud-donation-step-badge {
  background: var(--bbyd-red);
  color: #fff;
}
body.page-user .hud-donation-qr-img {
  width: 200px; height: 200px;
  border: 1px solid var(--bbyd-line);
  background: var(--bbyd-bg-3);
  object-fit: contain;
  padding: 8px;
}
body.page-user .hud-donation-qr-label {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--bbyd-dim);
  text-transform: uppercase;
  margin-top: 10px;
}

/* ── hud-market-* (거래소) ── */
body.page-user .hud-market-toolbar {
  display: flex; align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bbyd-line);
  margin-bottom: 14px;
}
body.page-user .hud-market-disclaimer {
  font-family: var(--bbyd-f-kr);
  font-size: 12px;
  color: var(--bbyd-dim);
  padding: 12px 14px;
  background: var(--bbyd-bg-2);
  border-left: 3px solid var(--bbyd-gold);
  margin-bottom: 14px;
}

/* ── market-chat-* (거래 채팅) ── */
body.page-user .market-chat-room-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}
body.page-user .market-chat-tabs {
  display: flex;
  border-bottom: 1px solid var(--bbyd-line);
  background: var(--bbyd-bg-3);
}
body.page-user .market-chat-tab {
  padding: 12px 16px;
  font-family: var(--bbyd-f-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
body.page-user .market-chat-tab.is-active,
body.page-user .market-chat-tab.active {
  color: var(--bbyd-ink);
  border-bottom-color: var(--bbyd-red);
}

/* ── log-* (운영진 로그 탭) ── */
body.page-admin .log-timeline,
body.page-developer .log-timeline {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
}
body.page-admin .log-pagination,
body.page-developer .log-pagination {
  display: flex;
  gap: 4px;
  padding: 14px;
  border-top: 1px solid var(--bbyd-line);
}
body.page-admin .log-pagination button,
body.page-developer .log-pagination button {
  font-family: var(--bbyd-f-mono);
  font-size: 11px;
  padding: 6px 10px;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  border-radius: 0;
}
body.page-admin .log-pagination button:hover:not(:disabled),
body.page-developer .log-pagination button:hover:not(:disabled) {
  border-color: var(--bbyd-line-2);
  color: var(--bbyd-ink);
  background: var(--bbyd-bg-3);
}
body.page-admin .log-pagination button.is-active,
body.page-developer .log-pagination button.is-active {
  background: var(--bbyd-red);
  border-color: var(--bbyd-red);
  color: #fff;
}
body.page-admin .log-limit-select,
body.page-developer .log-limit-select {
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-mono);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 0;
}
body.page-admin .log-empty,
body.page-developer .log-empty {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
  padding: 32px 0;
  text-align: center;
}

/* ── dev-* (개발자 페이지) ── */
body.page-developer .dev-panel,
body.page-admin .dev-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  padding: 20px;
  margin-bottom: 16px;
}
body.page-developer .dev-panel--flush,
body.page-admin .dev-panel--flush { padding: 0; }
body.page-developer .dev-section,
body.page-admin .dev-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--bbyd-line);
}
body.page-developer .dev-section:last-child,
body.page-admin .dev-section:last-child { border-bottom: 0; }
body.page-developer .dev-stat-grid,
body.page-admin .dev-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
body.page-developer .dev-stat,
body.page-admin .dev-stat {
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  padding: 14px 16px;
}

/* ── embed editor (운영진 임베드 편집) ── */
body.page-admin .embed-cat-grid,
body.page-developer .embed-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
body.page-admin .embed-preview-card,
body.page-developer .embed-preview-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  padding: 14px;
}
body.page-admin .embed-hub-toolbar,
body.page-developer .embed-hub-toolbar {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bbyd-line);
  flex-wrap: wrap;
}
body.page-admin .embed-hub-search-group,
body.page-admin .embed-hub-select-group,
body.page-developer .embed-hub-search-group,
body.page-developer .embed-hub-select-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── 부드러운 hud-link 처리 ── */
body.page-user .hud-link,
body.page-admin .hud-link,
body.page-developer .hud-link {
  font-family: var(--bbyd-f-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bbyd-red);
  text-decoration: none;
}
body.page-user .hud-link:hover,
body.page-admin .hud-link:hover,
body.page-developer .hud-link:hover { color: #fff; }

/* ── select / textarea 일반 ── */
body.page-user select,
body.page-admin select,
body.page-developer select,
body.page-user textarea,
body.page-admin textarea,
body.page-developer textarea {
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  padding: 9px 12px;
}
body.page-user select:focus,
body.page-admin select:focus,
body.page-developer select:focus,
body.page-user textarea:focus,
body.page-admin textarea:focus,
body.page-developer textarea:focus {
  outline: none;
  border-color: var(--bbyd-red);
  box-shadow: none;
}

/* ── code / kbd ── */
body.page-admin code,
body.page-developer code,
body.page-user code {
  font-family: var(--bbyd-f-mono);
  font-size: 12px;
  background: var(--bbyd-bg-3);
  padding: 1px 6px;
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-cyan);
}

body.page-developer .external-api-guide h3 {
  margin: 0 0 8px;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 14px;
  font-weight: 800;
}

body.page-developer .external-api-guide p {
  margin: 0 0 10px;
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  line-height: 1.6;
}

body.page-developer .external-api-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.page-developer .bbyd-codeblock {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  color: var(--bbyd-ink);
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  border-radius: 8px;
  font-family: var(--bbyd-f-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
}

body.page-developer .bbyd-codeblock code {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

body.page-developer .external-api-guide__table td {
  vertical-align: top;
}

@media (max-width: 860px) {
  body.page-developer .external-api-guide__grid {
    grid-template-columns: 1fr;
  }
}

/* ── status pill (사용자 페이지 상단) ── */
body.page-user .status-pill,
body.page-admin .status-pill,
body.page-developer .status-pill {
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  color: var(--bbyd-ink-2);
  border-radius: 0;
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .15em;
  font-weight: 600;
}
body.page-user .status-pill.up,
body.page-admin .status-pill.up,
body.page-developer .status-pill.up {
  border-color: rgba(74,222,128,.5);
  color: var(--bbyd-green);
  box-shadow: none;
}
body.page-user .status-pill.down,
body.page-admin .status-pill.down,
body.page-developer .status-pill.down {
  border-color: rgba(255,70,85,.5);
  color: var(--bbyd-red);
  box-shadow: none;
}
body.page-user .status-pill.warn,
body.page-admin .status-pill.warn,
body.page-developer .status-pill.warn {
  border-color: rgba(255,209,102,.5);
  color: var(--bbyd-gold);
  box-shadow: none;
}

/* ── 모달 / dialog ── */
body.page-user .modal,
body.page-admin .modal,
body.page-developer .modal,
body.page-user .modal-content,
body.page-admin .modal-content,
body.page-developer .modal-content {
  background: var(--bbyd-bg-2) !important;
  border: 1px solid var(--bbyd-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 80px rgba(0,0,0,.6) !important;
  backdrop-filter: none !important;
}

/* ── pv-grid / pv-card (프로필 보기) 그리드 ── */
body.page-user .pv-grid,
body.page-admin .pv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  body.page-user .pv-grid,
  body.page-admin .pv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body.page-user .pv-grid,
  body.page-admin .pv-grid { grid-template-columns: 1fr; }
  body.page-developer .dev-stat-grid,
  body.page-admin .dev-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── admin dashboard db-chart-* / db-widget-* ── */
body.page-admin .db-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
body.page-admin .db-chart-card {
  padding: 18px;
}
body.page-admin .db-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bbyd-line);
}
body.page-admin .db-chart-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bbyd-red);
  box-shadow: 0 0 8px var(--bbyd-red);
}
body.page-admin .db-chart-title {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.2px;
  color: var(--bbyd-ink);
}
body.page-admin .db-chart-canvas {
  width: 100%; height: 200px;
}

body.page-admin .db-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) {
  body.page-admin .db-stats-row { grid-template-columns: repeat(2, 1fr); }
  body.page-admin .db-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.page-admin .db-stats-row { grid-template-columns: 1fr; }
}

body.page-admin .db-stat-body {
  display: flex; flex-direction: column;
  gap: 4px;
}

body.page-admin .db-widget {
  padding: 0;
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  display: flex; flex-direction: column;
}
body.page-admin .db-widget-header {
  display: flex; align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bbyd-line);
  background: var(--bbyd-bg-3);
}
body.page-admin .db-widget-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--bbyd-red-soft);
  color: var(--bbyd-red);
  font-size: 12px;
  border-radius: 0;
}
body.page-admin .db-widget-title {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.2px;
  color: var(--bbyd-ink);
}
body.page-admin .db-widget-body {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--bbyd-ink-2);
}
body.page-admin .db-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
body.page-admin .db-widget-wide { grid-column: 1 / -1; }
body.page-admin .db-widget-loading {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
  text-align: center;
  padding: 24px 0;
}
body.page-admin .db-widget-scroll {
  max-height: 360px;
  overflow-y: auto;
}
@media (max-width: 1100px) {
  body.page-admin .db-widget-grid { grid-template-columns: 1fr; }
}

/* ═══ 통일된 Pretendard 환경에서 큰 숫자 시각 임팩트 보강 ═══
   Anton/Bebas Neue 같은 condensed 디스플레이 폰트를 안 쓰니
   weight·letter-spacing·tabular-nums로 디스플레이 룩 보강 */
body.page-user .bbyd-metric__value,
body.page-admin .bbyd-metric__value,
body.page-developer .bbyd-metric__value,
body.page-user .bbyd-kpi__value,
body.page-admin .bbyd-kpi__value,
body.page-developer .bbyd-kpi__value,
body.page-user .bbyd-sb-bal__value,
body.page-admin .bbyd-sb-bal__value,
body.page-developer .bbyd-sb-bal__value,
body.page-user .bbyd-lb__rank,
body.page-admin .bbyd-lb__rank,
body.page-developer .bbyd-lb__rank,
body.page-user .bbyd-sched__d,
body.page-admin .bbyd-sched__d,
body.page-developer .bbyd-sched__d,
body.page-user .stat-value,
body.page-admin .stat-value,
body.page-developer .stat-value,
body.page-user .db-stat-value,
body.page-admin .db-stat-value,
body.page-developer .db-stat-value,
body.page-user .hud-feat__value,
body.page-admin .hud-feat__value,
body.page-developer .hud-feat__value,
body.page-user .home-rank-pos,
body.page-admin .home-rank-pos,
body.page-developer .home-rank-pos,
body.page-user .sw-round,
body.page-admin .sw-round,
body.page-developer .sw-round,
body.page-user .wc-total-num,
body.page-admin .wc-total-num,
body.page-developer .wc-total-num,
body.page-user .bbyd-profile-id__avatar,
body.page-admin .bbyd-profile-id__avatar,
body.page-developer .bbyd-profile-id__avatar {
  font-family: var(--bbyd-f-kr);
  font-weight: 900;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'kern' 1;
}

/* 모노 폰트가 적용되던 메타·시간·통계 텍스트: 한글이 섞일 수 있으므로
   Pretendard 유지 + tabular-nums + 약간 가벼운 weight */
body.page-user .bbyd-list__sub,
body.page-admin .bbyd-list__sub,
body.page-developer .bbyd-list__sub,
body.page-user .bbyd-feed__sub,
body.page-admin .bbyd-feed__sub,
body.page-developer .bbyd-feed__sub,
body.page-user .bbyd-feed__time,
body.page-admin .bbyd-feed__time,
body.page-developer .bbyd-feed__time,
body.page-user .bbyd-sched__sub,
body.page-admin .bbyd-sched__sub,
body.page-developer .bbyd-sched__sub,
body.page-user .bbyd-sched__st,
body.page-admin .bbyd-sched__st,
body.page-developer .bbyd-sched__st,
body.page-user .bbyd-list__right,
body.page-admin .bbyd-list__right,
body.page-developer .bbyd-list__right,
body.page-user .bbyd-lb__val,
body.page-admin .bbyd-lb__val,
body.page-developer .bbyd-lb__val,
body.page-user .home-rank-value,
body.page-admin .home-rank-value,
body.page-developer .home-rank-value,
body.page-user .leaderboard-rank,
body.page-admin .leaderboard-rank,
body.page-developer .leaderboard-rank,
body.page-user .leaderboard-value,
body.page-admin .leaderboard-value,
body.page-developer .leaderboard-value,
body.page-user .leaderboard-detail,
body.page-admin .leaderboard-detail,
body.page-developer .leaderboard-detail {
  font-family: var(--bbyd-f-kr);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* 작은 라벨(.bbyd-card__title 등)에 letter-spacing이 강하면 한글이 너무
   벌어져 어색하므로 한글이 들어갈 가능성 있는 곳의 letter-spacing 약화는
   각 클래스에서 이미 처리됨 (EN 라벨은 영문 전용이라 그대로 유지) */

/* ═══════════════════════════════════════════════════════════════════
   SHOP / INVENTORY — bbyd 톤 통일 (사각, 타이트한 톤)
   기존 .shop-* / .inv-* 셀렉터를 그대로 덮어쓰기. JS·HTML 구조 변경 없음.
   ═══════════════════════════════════════════════════════════════════ */

/* 잔액 헤더 — bbyd-bg-2 패널로 */
body.page-user .shop-balance-header,
body.page-user .shop-toolbar .shop-balance-header {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-left: 2px solid var(--bbyd-red);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 14px 18px;
  font-family: var(--bbyd-f-kr);
  font-weight: 700;
  color: var(--bbyd-ink);
}

/* 툴바 행 */
body.page-user .shop-toolbar { margin-bottom: 16px; }
body.page-user .shop-toolbar-row { gap: 8px; }
body.page-user .shop-filter-label {
  font-family: var(--bbyd-f-en);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
  font-size: 10px;
}

/* 화폐/등급 칩 버튼 */
body.page-user .shop-currency-btn,
body.page-user .shop-rarity-toggle {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  padding: 6px 12px;
  min-height: 34px;
  letter-spacing: 0;
  text-transform: none;
}
body.page-user .shop-currency-btn:hover,
body.page-user .shop-rarity-toggle:hover {
  background: var(--bbyd-bg-3);
  border-color: var(--bbyd-line-2);
  transform: none;
}
body.page-user .shop-currency-btn.is-active {
  background: var(--bbyd-cyan-soft);
  border-color: rgba(0,229,255,.4);
  color: var(--bbyd-cyan);
  box-shadow: none;
}
body.page-user .shop-rarity-toggle.is-active {
  background: color-mix(in srgb, var(--rarity-color, var(--bbyd-ink-2)) 14%, transparent);
  border-color: color-mix(in srgb, var(--rarity-color, var(--bbyd-ink-2)) 45%, transparent);
  color: var(--rarity-color, var(--bbyd-ink));
  box-shadow: none;
}
body.page-user .shop-filter-count {
  background: var(--bbyd-bg);
  border-radius: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  font-family: var(--bbyd-f-en);
}
body.page-user .shop-rarity-box { border-radius: 0; }

/* 좌·우 분할 */
body.page-user .shop-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
body.page-user .shop-command-panel,
body.page-user .shop-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}
body.page-user .shop-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-cyan);
}
body.page-user .shop-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-cyan);
  text-transform: uppercase;
}
body.page-user .shop-command-panel h2 {
  margin: 8px 0 8px;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}
body.page-user .shop-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}
body.page-user .shop-wallet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
body.page-user .shop-wallet-grid > div {
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  padding: 10px;
}
body.page-user .shop-wallet-grid span,
body.page-user .shop-command-panel__summary span {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--bbyd-dim);
}
body.page-user .shop-wallet-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-en);
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
body.page-user .shop-command-panel__summary {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bbyd-line);
}
body.page-user .shop-command-panel__summary span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bbyd-dim);
  letter-spacing: 0;
  text-transform: none;
}
body.page-user .shop-command-panel__summary i {
  color: var(--bbyd-red);
  width: 14px;
}
body.page-user .shop-command-panel__summary strong {
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-en);
  font-variant-numeric: tabular-nums;
}
body.page-user .shop-main-panel {
  padding: 16px;
}
body.page-user .shop-split-body { gap: 16px; }
body.page-user .shop-split-right { top: 14px; }

/* 타입 섹션 카드 */
body.page-user .shop-type-section {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-left: 2px solid var(--bbyd-red);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 18px;
  margin-bottom: 14px;
}
body.page-user .shop-type-section:hover { border-color: var(--bbyd-line-2); }
body.page-user .shop-type-header {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 16px;
  color: var(--bbyd-ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bbyd-line);
}
body.page-user .shop-type-icon {
  border-radius: 0;
  background: var(--bbyd-bg-3) !important;
  width: 30px; height: 30px;
  font-size: 14px;
}
body.page-user .shop-type-header .shop-cat-count,
body.page-user .shop-rarity-header .shop-cat-count {
  background: var(--bbyd-bg);
  border-radius: 0;
  font-family: var(--bbyd-f-en);
  font-size: 11px;
  font-weight: 700;
  color: var(--bbyd-dim);
  padding: 2px 8px;
  letter-spacing: .05em;
}

/* 등급 섹션 */
body.page-user .shop-rarity-section { margin-bottom: 18px; }
body.page-user .shop-rarity-header {
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  font-weight: 700;
  color: var(--bbyd-ink-2);
}

/* 카테고리 헤더 (인벤토리) */
body.page-user .shop-category-header {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 15px;
  color: var(--bbyd-ink);
  border-radius: 0;
  background: transparent;
  border-left: 2px solid var(--bbyd-red);
  padding: 6px 0 6px 10px;
  margin: 18px 0 10px;
}
body.page-user .shop-category-header:first-child { margin-top: 0; }
body.page-user .shop-category-header i { color: var(--bbyd-red); }

/* 아이템 카드 */
body.page-user .shop-item-card {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  transition: border-color .15s ease, background .15s ease;
}
body.page-user .shop-item-card:hover {
  background: var(--bbyd-bg-3);
  border-color: var(--bbyd-line-2);
  transform: none;
  box-shadow: none;
}
body.page-user .shop-item-card.is-equipped {
  border-color: var(--bbyd-cyan);
  background: var(--bbyd-cyan-soft);
}
body.page-user .shop-item-card.is-expired {
  opacity: .55;
  border-color: var(--bbyd-line);
}
body.page-user .shop-item-card.is-expiring-soon {
  border-color: rgba(255,209,102,.5);
}
body.page-user .shop-item-card.is-tryon-selected {
  border-color: var(--bbyd-red);
  background: var(--bbyd-red-soft);
}
body.page-user .shop-item-card.is-tryon-selected::after { display: none; }
body.page-user .shop-item-card.rarity-border-rare    { border-top: 2px solid #3A8DFF; }
body.page-user .shop-item-card.rarity-border-heroic  { border-top: 2px solid #A335EE; }
body.page-user .shop-item-card.rarity-border-legendary { border-top: 2px solid #FF8000; }

/* 카드 내부 미리보기/라벨/가격 */
body.page-user .shop-card-preview {
  background: var(--bbyd-bg);
  border-radius: 0;
  border: 1px solid var(--bbyd-line);
}
body.page-user .shop-preview-strip {
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}
body.page-user .shop-card-label {
  font-family: var(--bbyd-f-kr);
  font-weight: 700;
  color: var(--bbyd-ink);
}
body.page-user .shop-card-price {
  font-family: var(--bbyd-f-en);
  font-variant-numeric: tabular-nums;
  color: var(--bbyd-gold);
}

/* 등급 배지 */
body.page-user .shop-rarity-badge {
  border-radius: 0;
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 3px 8px;
}

/* 장착중·만료 배지 */
body.page-user .shop-equipped-badge,
body.page-user .shop-expired-badge,
body.page-user .shop-equipped-badge.inv-badge,
body.page-user .shop-expired-badge.inv-badge {
  border-radius: 0;
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* 카드 액션 버튼: bbyd 톤 */
body.page-user .shop-card-actions .btn-primary,
body.page-user .shop-card-actions .btn-secondary {
  border-radius: 0;
  font-family: var(--bbyd-f-kr);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Try-on(시착) 패널 — 사각 + bbyd 톤 */
body.page-user .shop-tryon-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-left: 2px solid var(--bbyd-red);
  border-radius: 0;
  box-shadow: none;
  padding: 16px;
}
body.page-user .shop-price-table,
body.page-user .shop-tryon-receipt {
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}
body.page-user .shop-price-table-title,
body.page-user .shop-receipt-title {
  font-family: var(--bbyd-f-en);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--bbyd-dim);
  font-weight: 700;
}
body.page-user .shop-price-matrix th {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .15em;
}
body.page-user .shop-tryon-nickname {
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 24px;
}
body.page-user .shop-tryon-chip {
  border-radius: 0;
  font-family: var(--bbyd-f-kr);
}

/* 인벤토리 요약 */
body.page-user .inventory-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
body.page-user .inventory-vault-panel,
body.page-user .inventory-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}
body.page-user .inventory-vault-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-purple);
}
body.page-user .inventory-vault-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-purple);
  text-transform: uppercase;
}
body.page-user .inventory-vault-panel h2 {
  margin: 8px 0 8px;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}
body.page-user .inventory-vault-panel p {
  margin: 0 0 16px;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}
body.page-user .inventory-main-panel {
  padding: 16px;
}
body.page-user .inventory-toolbar {
  margin-bottom: 16px;
}
body.page-user .inventory-card-list .shop-category-header:first-child {
  margin-top: 0;
}
body.page-user .shop-inventory-summary {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-left: 2px solid var(--bbyd-cyan);
  border-radius: 0;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: none;
}
body.page-user .shop-inventory-summary-preview .shop-preview-strip {
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  min-height: 48px;
  padding: 10px 14px;
}
body.page-user .inventory-vault-panel .shop-inventory-summary-preview {
  width: 100%;
  margin-bottom: 16px;
}
body.page-user .inventory-vault-panel .shop-inventory-summary-preview .shop-preview-strip {
  width: 100%;
  justify-content: center;
}
body.page-user .inventory-vault-panel .shop-inventory-summary-stats {
  display: grid;
  gap: 8px;
}
body.page-user .shop-inventory-stat {
  font-family: var(--bbyd-f-kr);
  color: var(--bbyd-ink-2);
}
body.page-user .shop-inventory-stat strong {
  font-family: var(--bbyd-f-en);
  color: var(--bbyd-ink);
  font-variant-numeric: tabular-nums;
}
body.page-user .shop-inventory-stat-warn { color: var(--bbyd-red); }
body.page-user .shop-inventory-stat-warn strong { color: var(--bbyd-red); }

@media (max-width: 768px) {
  body.page-user .inventory-workspace {
    grid-template-columns: 1fr;
  }
  body.page-user .inventory-vault-panel {
    position: static;
  }
}

/* 비어있음/로딩 */
body.page-user .shop-empty-state,
body.page-user .shop-loading {
  background: var(--bbyd-bg-2);
  border: 1px dashed var(--bbyd-line);
  border-radius: 0;
  font-family: var(--bbyd-f-kr);
  color: var(--bbyd-dim);
  padding: 36px 24px;
}
body.page-user .shop-empty-state i,
body.page-user .shop-loading i { color: var(--bbyd-dim); }

/* 반응형 모바일 보텀 시트도 사각으로 */
@media (max-width: 768px) {
  body.page-user .shop-workspace {
    grid-template-columns: 1fr;
  }
  body.page-user .shop-command-panel {
    position: static;
  }
  body.page-user .shop-split-right .shop-tryon-panel {
    border-radius: 0;
    background: var(--bbyd-bg-2);
    border-top: 1px solid var(--bbyd-line);
    border-left: 2px solid var(--bbyd-red);
  }
  body.page-user .shop-type-section { border-radius: 0; padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME DASHBOARD — briefing rail + operational main panel
   ═══════════════════════════════════════════════════════════════════ */
body.page-user .home-dashboard-shell {
  padding-top: 0;
}

body.page-user .home-dashboard-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .home-briefing-panel,
body.page-user .home-main-panel {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .home-briefing-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-red);
}

body.page-user .home-briefing-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-red);
  text-transform: uppercase;
}

body.page-user .home-briefing-panel h2 {
  margin: 8px 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

body.page-user .home-briefing-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .home-briefing-stats {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bbyd-line);
}

body.page-user .home-briefing-stats span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-kr);
  font-size: 12px;
  line-height: 1.35;
}

body.page-user .home-briefing-stats i {
  width: 18px;
  color: var(--bbyd-cyan);
  text-align: center;
}

body.page-user .home-briefing-stats strong {
  min-width: 0;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

body.page-user .home-briefing-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

body.page-user .home-briefing-actions .bbyd-btn {
  width: 100%;
  justify-content: center;
}

body.page-user .home-main-panel {
  min-width: 0;
  padding: 16px;
}

body.page-user .home-main-panel > .bbyd-card,
body.page-user .home-main-panel > .bbyd-grid {
  max-width: 100%;
}

body.page-user .home-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-user .home-metrics-grid .bbyd-card {
  min-width: 0;
}

body.page-user .home-metrics-grid .bbyd-metric__value {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  body.page-user .home-dashboard-workspace {
    grid-template-columns: 1fr;
  }

  body.page-user .home-briefing-panel {
    position: static;
  }

  body.page-user .home-briefing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.page-user .home-dashboard-workspace {
    gap: 12px;
  }

  body.page-user .home-briefing-panel,
  body.page-user .home-main-panel {
    padding: 14px;
  }

  body.page-user .home-briefing-stats,
  body.page-user .home-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BBYD MARKET — bbyd 톤 통일 (사각, 빨강·시안·골드 액센트)
   ═══════════════════════════════════════════════════════════════════ */

/* 안내문 (거래 안내 디스클레이머) */
body.page-user .hud-market-disclaimer {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-left: 2px solid var(--bbyd-gold);
  border-radius: 0;
  color: var(--bbyd-ink-2);
  font-family: var(--bbyd-f-kr);
  padding: 12px 16px;
  margin-bottom: 14px;
}
body.page-user .hud-market-disclaimer > i { color: var(--bbyd-gold); }
body.page-user .hud-market-disclaimer strong { color: var(--bbyd-ink); }

/* 마켓 채팅 탭 */
body.page-user .market-chat-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 14px 18px 0;
  border-bottom: 1px solid var(--bbyd-line);
}
body.page-user .market-chat-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
  font-family: var(--bbyd-f-kr);
  font-weight: 700;
  font-size: 13px;
  color: var(--bbyd-dim);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: -1px;
  min-height: 38px;
}
body.page-user .market-chat-tab:hover { color: var(--bbyd-ink-2); }
body.page-user .market-chat-tab.is-active {
  background: transparent;
  color: var(--bbyd-ink);
  border-bottom-color: var(--bbyd-red);
}

/* 마켓 채팅 리스트 아이템 */
body.page-user .mc-list-item {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
  padding: 12px 14px;
}
body.page-user .mc-list-item:hover {
  background: var(--bbyd-bg-3);
  border-color: var(--bbyd-line-2);
}
body.page-user .mc-list-title {
  font-family: var(--bbyd-f-kr);
  color: var(--bbyd-ink);
}
body.page-user .mc-list-price {
  color: var(--bbyd-gold);
  font-family: var(--bbyd-f-en);
  font-variant-numeric: tabular-nums;
}
body.page-user .mc-list-bottom { color: var(--bbyd-ink-2); }
body.page-user .mc-list-role,
body.page-user .mc-list-status {
  border-radius: 0;
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 2px 8px;
}
body.page-user .mc-role-seller { background: rgba(0,229,255,.15); color: var(--bbyd-cyan); }
body.page-user .mc-role-buyer  { background: rgba(74,222,128,.15); color: var(--bbyd-green); }
body.page-user .mc-status-inquiry  { background: var(--bbyd-red-soft); color: var(--bbyd-red); }
body.page-user .mc-status-reserved { background: rgba(255,209,102,.15); color: var(--bbyd-gold); }
body.page-user .mc-status-completed{ background: rgba(74,222,128,.15); color: var(--bbyd-green); }

/* 마켓 채팅 메시지 영역 */
body.page-user .mc-messages {
  background: var(--bbyd-bg);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

/* 상품 카드 미리보기 — JS 인라인 border-radius 덮어쓰기 */
body.page-user #marketListingsGrid .shop-card-preview,
body.page-user #marketMyListingsContainer .shop-card-preview,
body.page-user #marketWishlistContainer .shop-card-preview {
  border-radius: 0 !important;
  background: var(--bbyd-bg) !important;
  border: 1px solid var(--bbyd-line) !important;
  border-bottom: 0 !important;
}

/* 상품 상세 뷰 — 인라인 border-radius 덮어쓰기 */
body.page-user #marketDetailView [style*="border-radius"] {
  border-radius: 0 !important;
}

/* 가격 강조 */
body.page-user .shop-price-tag {
  color: var(--bbyd-gold);
  font-family: var(--bbyd-f-en);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

body.page-user .market-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-user .market-command-panel,
body.page-user .market-main-panel,
body.page-user .market-toolbar-card,
body.page-user .market-listing-card,
body.page-user .market-agreement__body {
  background: var(--bbyd-bg-2);
  border: 1px solid var(--bbyd-line);
  border-radius: 0;
}

body.page-user .market-command-panel {
  position: sticky;
  top: 24px;
  padding: 18px;
  border-left: 2px solid var(--bbyd-red);
}

body.page-user .market-kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--bbyd-red);
  text-transform: uppercase;
}

body.page-user .market-command-panel h2 {
  margin: 8px 0 8px;
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  color: var(--bbyd-ink);
  letter-spacing: 0;
}

body.page-user .market-command-panel p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .market-command-panel__actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

body.page-user .market-command-panel__actions .bbyd-btn {
  width: 100%;
  justify-content: center;
}

body.page-user .market-command-panel__rules {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bbyd-line);
}

body.page-user .market-command-panel__rules span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bbyd-dim);
  font-size: 12px;
}

body.page-user .market-command-panel__rules i {
  color: var(--bbyd-cyan);
  width: 14px;
}

body.page-user .market-main-panel {
  padding: 16px;
}

body.page-user .market-toolbar-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin-bottom: 16px;
}

body.page-user .market-search-field {
  position: relative;
  display: block;
  min-width: 0;
}

body.page-user .market-search-field i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bbyd-dim);
  pointer-events: none;
}

body.page-user .market-search-field .form-control {
  width: 100%;
  padding-left: 36px;
}

body.page-user .market-toolbar-card .form-control,
body.page-user .market-toolbar-card .bbyd-btn {
  min-height: 40px;
}

body.page-user .market-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

body.page-user .market-listing-card {
  display: grid;
  overflow: hidden;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

body.page-user .market-listing-card:hover,
body.page-user .market-listing-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--bbyd-line-2);
  background: var(--bbyd-bg-3);
  outline: none;
}

body.page-user .market-listing-card.is-removed {
  opacity: .62;
}

body.page-user .market-listing-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bbyd-bg);
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-user .market-listing-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-user .market-listing-card__body {
  display: grid;
  gap: 5px;
  padding: 12px 13px 13px;
}

body.page-user .market-listing-card__title {
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-user .market-listing-card__price {
  color: var(--bbyd-gold);
  font-family: var(--bbyd-f-en);
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

body.page-user .market-listing-card__seller {
  color: var(--bbyd-ink-2);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-user .market-listing-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 11px;
  margin-top: 2px;
}

body.page-user .market-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

body.page-user .market-agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
}

body.page-user .market-agreement__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--bbyd-red-soft);
  border: 1px solid rgba(255,70,85,.3);
}

body.page-user .market-agreement__icon i {
  color: var(--bbyd-red);
  font-size: 26px;
}

body.page-user .market-agreement h3 {
  margin: 6px 0 8px;
  color: var(--bbyd-ink);
  font-family: var(--bbyd-f-kr);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body.page-user .market-agreement__lead {
  margin: 0 0 22px;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  text-align: center;
}

body.page-user .market-agreement__body {
  width: 100%;
  max-width: 680px;
  padding: 22px 24px;
  margin-bottom: 20px;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.7;
}

body.page-user .market-agreement__body p {
  margin: 0 0 14px;
}

body.page-user .market-agreement__body b {
  color: var(--bbyd-ink);
}

body.page-user .market-rule-list {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

body.page-user .market-rule-list > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

body.page-user .market-rule-list i {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--bbyd-red);
  font-size: 11px;
}

body.page-user .market-rule-list .market-rule-list__warn {
  color: var(--bbyd-gold);
}

body.page-user .market-agreement__foot {
  margin: 0;
  color: var(--bbyd-dim);
  font-size: 12px;
}

body.page-user .market-agreement__confirm {
  width: 100%;
  max-width: 440px;
  text-align: center;
}

body.page-user .market-agreement__confirm p {
  margin: 0 0 10px;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.page-user .market-agreement__confirm b {
  color: var(--bbyd-red);
}

body.page-user .market-agreement__confirm > div {
  display: flex;
  gap: 8px;
}

body.page-user .market-agreement__confirm input {
  flex: 1;
  text-align: center;
}

body.page-user #marketAgreementError {
  display: none;
  margin: 8px 0 0;
  color: var(--bbyd-red);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

body.page-user .hud-market-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

@media (max-width: 980px) {
  body.page-user .market-workspace {
    grid-template-columns: 1fr;
  }
  body.page-user .market-command-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  body.page-user .market-main-panel {
    padding: 12px;
  }
  body.page-user .market-toolbar-card {
    grid-template-columns: 1fr;
  }
  body.page-user .market-listing-grid {
    grid-template-columns: 1fr;
  }
  body.page-user .market-agreement__confirm > div {
    flex-direction: column;
  }
}

/* 페이지네이션 버튼 (인라인 btn-primary/btn-secondary) */
body.page-user #marketPagination .btn-primary,
body.page-user #marketPagination .btn-secondary {
  border-radius: 0;
  font-family: var(--bbyd-f-en);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}

/* ═══════════════════════════════════════════════════════════════════
   LAZY-LOAD 진입 애니메이션
   - 탭 컨텐츠가 display:none → block 으로 바뀔 때 페이드업
   - 동적으로 렌더된 카드/리스트 아이템은 .bbyd-stagger 클래스로 스태거 인
   ═══════════════════════════════════════════════════════════════════ */
@keyframes bbyd-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bbyd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bbyd-skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* 탭 컨텐츠가 display:none에서 block으로 토글되는 순간 페이드업 */
body.page-user .tab-content[style*="display: block"],
body.page-user .tab-content[style*="display:block"],
body.page-admin .tab-content[style*="display: block"],
body.page-admin .tab-content[style*="display:block"],
body.page-developer .tab-content[style*="display: block"],
body.page-developer .tab-content[style*="display:block"] {
  animation: bbyd-fade-up 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 홈 대시보드의 bbyd-card / shop-item-card 가 처음 그려질 때 스태거.
   매번 그려지는 영역이라 첫 12개에만 지연 적용 — 그 뒤는 즉시 */
body.page-user #homeDashboardContainer .bbyd-card,
body.page-user #homeDashboardContainer .bbyd-grid > *,
body.page-user #shopItemList .shop-item-card,
body.page-user #inventoryContainer .shop-item-card,
body.page-user #marketListingsGrid .shop-item-card,
body.page-user #marketMyListingsContainer .shop-item-card,
body.page-user #marketWishlistContainer .shop-item-card,
body.page-user #userMemberListContainer .member-role-item,
body.page-user #eventsCalendarGrid .events-cal-cell,
body.page-user #eventsUpcomingList > *,
body.page-user #reactionDailyRanking > *,
body.page-user #leaderboardRows > *,
body.page-user #leaderboardPodium > *,
body.page-user #homeDailyChallengesContainer .bbyd-card {
  animation: bbyd-fade-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-user #homeDashboardContainer .bbyd-grid > *:nth-child(1)  { animation-delay: 0.00s; }
body.page-user #homeDashboardContainer .bbyd-grid > *:nth-child(2)  { animation-delay: 0.04s; }
body.page-user #homeDashboardContainer .bbyd-grid > *:nth-child(3)  { animation-delay: 0.08s; }
body.page-user #homeDashboardContainer .bbyd-grid > *:nth-child(4)  { animation-delay: 0.12s; }
body.page-user #shopItemList .shop-item-card:nth-child(n+1)         { animation-delay: 0.00s; }
body.page-user #shopItemList .shop-item-card:nth-child(2n)          { animation-delay: 0.05s; }
body.page-user #shopItemList .shop-item-card:nth-child(3n)          { animation-delay: 0.08s; }
body.page-user #marketListingsGrid .shop-item-card:nth-child(2n)    { animation-delay: 0.04s; }
body.page-user #marketListingsGrid .shop-item-card:nth-child(3n)    { animation-delay: 0.08s; }
body.page-user #userMemberListContainer .member-role-item:nth-child(2n) { animation-delay: 0.04s; }
body.page-user #userMemberListContainer .member-role-item:nth-child(3n) { animation-delay: 0.08s; }
body.page-user #eventsCalendarGrid .events-cal-cell:nth-child(7n)    { animation-delay: 0.05s; }
body.page-user #eventsCalendarGrid .events-cal-cell:nth-child(14n)   { animation-delay: 0.10s; }
body.page-user #eventsUpcomingList > *:nth-child(2)                  { animation-delay: 0.05s; }
body.page-user #eventsUpcomingList > *:nth-child(3)                  { animation-delay: 0.10s; }
body.page-user #eventsUpcomingList > *:nth-child(4)                  { animation-delay: 0.15s; }
body.page-user #eventsUpcomingList > *:nth-child(5)                  { animation-delay: 0.20s; }

/* 운영진/개발자 페이지의 데이터 테이블 행도 첫 진입 시 페이드 */
body.page-admin .data-table tbody tr,
body.page-developer .data-table tbody tr {
  animation: bbyd-fade-in 0.25s ease-out both;
}
body.page-admin .data-table tbody tr:nth-child(2n) { animation-delay: 0.02s; }
body.page-admin .data-table tbody tr:nth-child(3n) { animation-delay: 0.04s; }
body.page-admin .data-table tbody tr:nth-child(4n) { animation-delay: 0.06s; }

/* 운영진 페이지의 bbyd-card도 진입 시 페이드업 */
body.page-admin .tab-content[style*="display:block"] .bbyd-card,
body.page-admin .tab-content[style*="display: block"] .bbyd-card {
  animation: bbyd-fade-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-admin .tab-content[style*="display:block"] .bbyd-card:nth-of-type(2),
body.page-admin .tab-content[style*="display: block"] .bbyd-card:nth-of-type(2) { animation-delay: 0.05s; }
body.page-admin .tab-content[style*="display:block"] .bbyd-card:nth-of-type(3),
body.page-admin .tab-content[style*="display: block"] .bbyd-card:nth-of-type(3) { animation-delay: 0.10s; }

body.page-admin .ops-drive-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  min-height: 640px;
}

body.page-admin .ops-drive-sidebar,
body.page-admin .ops-drive-main {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px;
}

body.page-admin .ops-drive-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-admin .ops-drive-import-tile {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon desc";
  gap: 2px 10px;
  align-items: center;
  border: 1px dashed rgba(14, 165, 233, 0.54);
  border-radius: 8px;
  padding: 12px;
  background: rgba(14, 165, 233, 0.10);
  color: var(--bbyd-ink, #f8fafc);
  cursor: pointer;
  text-align: left;
}

body.page-admin .ops-drive-import-tile i {
  grid-area: icon;
  color: var(--bbyd-cyan, #0ea5e9);
  font-size: 20px;
}

body.page-admin .ops-drive-import-tile strong { grid-area: title; font-size: 13px; }
body.page-admin .ops-drive-import-tile span {
  grid-area: desc;
  color: var(--bbyd-dim, #94a3b8);
  font-size: 12px;
}

body.page-admin .ops-drive-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text-primary, #e5e7eb);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

body.page-admin .ops-drive-nav.is-active,
body.page-admin .ops-drive-nav:hover {
  background: rgba(14, 165, 233, 0.18);
}

body.page-admin .ops-drive-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--bbyd-dim, #94a3b8);
  font-size: 12px;
}

body.page-admin .ops-drive-breadcrumbs button,
body.page-admin .ops-drive-tree-item {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

body.page-admin .ops-drive-breadcrumbs button:hover {
  color: var(--bbyd-ink, #f8fafc);
}

body.page-admin .ops-drive-tree {
  display: grid;
  gap: 4px;
  overflow: auto;
  max-height: 360px;
}

body.page-admin .ops-drive-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-radius: 6px;
  padding: 8px 8px 8px calc(8px + var(--depth, 0) * 14px);
  text-align: left;
}

body.page-admin .ops-drive-tree-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin .ops-drive-tree-item.is-active,
body.page-admin .ops-drive-tree-item:hover {
  background: rgba(255, 70, 85, 0.14);
  color: var(--bbyd-ink, #f8fafc);
}

body.page-admin .ops-drive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-admin .ops-drive-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin-bottom: 10px;
}

body.page-admin .ops-drive-bulkbar,
body.page-admin .ops-drive-view-controls,
body.page-admin .ops-drive-notice {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-admin .ops-drive-notice {
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--bbyd-dim, #94a3b8);
  font-size: 12px;
}

body.page-admin .ops-drive-notice[data-tone="ok"] { background: rgba(34, 197, 94, 0.14); color: #86efac; }
body.page-admin .ops-drive-notice[data-tone="saving"] { background: rgba(14, 165, 233, 0.14); color: #7dd3fc; }
body.page-admin .ops-drive-notice[data-tone="error"] { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }

body.page-admin .ops-drive-bulkbar strong {
  color: var(--bbyd-ink, #f8fafc);
  font-size: 13px;
  white-space: nowrap;
}

body.page-admin .ops-drive-view-controls {
  margin-left: auto;
}

body.page-admin .ops-drive-view-controls select {
  min-width: 132px;
  height: 34px;
}

body.page-admin .ops-drive-dropzone {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon desc";
  gap: 2px 12px;
  align-items: center;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 14px;
  background: rgba(2, 6, 23, 0.22);
  color: var(--bbyd-ink, #f8fafc);
}

body.page-admin .ops-drive-dropzone.is-compact { padding: 10px 12px; }
body.page-admin .ops-drive-dropzone.is-dragging,
.ops-drive-import-dialog__drop.is-dragging {
  border-color: rgba(14, 165, 233, 0.9);
  background: rgba(14, 165, 233, 0.14);
}

body.page-admin .ops-drive-dropzone i {
  grid-area: icon;
  color: var(--bbyd-cyan, #0ea5e9);
  font-size: 24px;
}

body.page-admin .ops-drive-dropzone strong { grid-area: title; }
body.page-admin .ops-drive-dropzone span {
  grid-area: desc;
  color: var(--bbyd-dim, #94a3b8);
  font-size: 12px;
}

body.page-admin .ops-drive-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 260px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.20);
  color: var(--bbyd-dim, #94a3b8);
  text-align: center;
}

body.page-admin .ops-drive-empty i {
  color: var(--bbyd-cyan, #0ea5e9);
  font-size: 34px;
}

body.page-admin .ops-drive-empty strong {
  color: var(--bbyd-ink, #f8fafc);
  font-size: 16px;
}

body.page-admin .ops-drive-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 8px;
  background: rgba(2, 6, 23, 0.28);
}

body.page-admin .ops-drive-row.is-selected {
  border-color: rgba(14, 165, 233, 0.64);
  background: rgba(14, 165, 233, 0.12);
}

body.page-admin .ops-drive-row__check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
}

body.page-admin .ops-drive-row__check input {
  width: 16px;
  height: 16px;
}

body.page-admin .ops-drive-row__open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

body.page-admin .ops-drive-row__open span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin .ops-drive-row__meta {
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
}

body.page-admin .ops-drive-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-admin .ops-drive-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

body.page-admin .ops-drive-list.is-grid .ops-drive-row {
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas:
    "check title"
    "meta meta"
    "actions actions";
  align-content: start;
  min-height: 132px;
}

body.page-admin .ops-drive-list.is-grid .ops-drive-row__check { grid-area: check; }
body.page-admin .ops-drive-list.is-grid .ops-drive-row__open {
  grid-area: title;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}
body.page-admin .ops-drive-list.is-grid .ops-drive-row__open i {
  font-size: 28px;
}
body.page-admin .ops-drive-list.is-grid .ops-drive-row__meta { grid-area: meta; }
body.page-admin .ops-drive-list.is-grid .ops-drive-row__actions {
  grid-area: actions;
  justify-content: flex-end;
}

body.page-admin .ops-drive-menu {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  z-index: 80;
}

body.page-admin .ops-drive-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

body.page-admin .ops-drive-menu > summary::-webkit-details-marker {
  display: none;
}

body.page-admin .ops-drive-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10020;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  min-width: 226px;
  max-width: min(320px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 180px));
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(12, 18, 30, 0.98);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.46);
}

body.page-admin .ops-drive-create-menu[open] {
  z-index: 10021;
}

body.page-admin .ops-drive-menu__panel button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--bbyd-ink, #f8fafc);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

body.page-admin .ops-drive-menu__panel button:hover,
body.page-admin .ops-drive-menu__panel button:focus-visible {
  border-color: rgba(14, 165, 233, 0.55);
  background: rgba(14, 165, 233, 0.16);
  outline: none;
}

body.page-admin .ops-drive-share-panel,
body.page-admin .ops-drive-collab-panel {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(2, 6, 23, 0.44);
}

body.page-admin .ops-drive-share-create,
body.page-admin .ops-drive-share-result {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

body.page-admin .ops-drive-share-create :where(select, input),
body.page-admin .ops-drive-share-result input,
body.page-admin .ops-drive-collab-panel textarea {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.76);
  color: var(--bbyd-ink, #f8fafc);
  padding: 8px 10px;
}

body.page-admin .ops-drive-collab-panel form {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

body.page-admin .ops-drive-collab-list {
  display: grid;
  gap: 8px;
}

body.page-admin .ops-drive-collab-row {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 8px;
}

body.page-admin .ops-drive-collab-row p {
  margin: 6px 0;
}

body.page-admin .ops-drive-collab-row pre {
  overflow: auto;
  max-height: 180px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  padding: 8px;
  white-space: pre-wrap;
}

.ops-drive-move-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.68);
}

.ops-drive-move-dialog__panel {
  width: min(460px, 100%);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.ops-drive-move-dialog__header,
.ops-drive-move-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.ops-drive-move-dialog__header button,
.ops-drive-move-dialog__actions button {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  cursor: pointer;
}

.ops-drive-move-dialog__panel label {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.ops-drive-move-dialog__panel select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 6px;
  padding: 10px 12px;
  background: #020617;
  color: #f8fafc;
}

.ops-drive-move-dialog__actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  border-bottom: 0;
}

.ops-drive-import-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.72);
}

.ops-drive-import-dialog__panel {
  width: min(620px, 100%);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: #0f172a;
  color: #f8fafc;
  padding: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.ops-drive-import-dialog__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ops-drive-import-dialog__header div {
  display: grid;
  gap: 4px;
}

.ops-drive-import-dialog__header span,
.ops-drive-import-row span {
  color: #94a3b8;
  font-size: 12px;
}

.ops-drive-import-dialog__header button,
.ops-drive-import-dialog__drop {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.84);
  color: #f8fafc;
  cursor: pointer;
}

.ops-drive-import-dialog__header button {
  width: 34px;
  height: 34px;
}

.ops-drive-import-dialog__drop {
  display: grid;
  place-items: center;
  gap: 6px;
  width: 100%;
  min-height: 170px;
  border-style: dashed;
}

.ops-drive-import-dialog__drop i {
  color: #38bdf8;
  font-size: 34px;
}

.ops-drive-import-dialog__queue {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ops-drive-import-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(2, 6, 23, 0.34);
}

.ops-drive-import-row[data-status="ok"] strong { color: #86efac; }
.ops-drive-import-row[data-status="error"] strong { color: #fca5a5; }

.ops-drive-office-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  background: #0f172a;
}

.ops-drive-office-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  background: #111827;
  color: #f8fafc;
}

.ops-drive-office-toolbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.ops-drive-office-toolbar > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.ops-drive-office-editor {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

@media (max-width: 900px) {
  body.page-admin .ops-drive-shell {
    grid-template-columns: 1fr;
  }
}

/* SweetAlert2 모달 진입에도 살짝 더 부드러운 페이드 */
.swal2-popup.swal2-show {
  animation: bbyd-fade-up 0.22s ease-out;
}

/* 사용자가 모션 줄이기를 켰으면 모두 비활성 */
@media (prefers-reduced-motion: reduce) {
  body.page-user .tab-content,
  body.page-admin .tab-content,
  body.page-developer .tab-content,
  body.page-user #homeDashboardContainer .bbyd-grid > *,
  body.page-user #shopItemList .shop-item-card,
  body.page-user #inventoryContainer .shop-item-card,
  body.page-user #marketListingsGrid .shop-item-card,
  body.page-user #marketMyListingsContainer .shop-item-card,
  body.page-user #marketWishlistContainer .shop-item-card,
  body.page-user #userMemberListContainer .member-role-item,
  body.page-user #eventsCalendarGrid .events-cal-cell,
  body.page-user #eventsUpcomingList > *,
  body.page-admin .data-table tbody tr,
  body.page-developer .data-table tbody tr,
  body.page-admin .bbyd-card {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS VISUAL LAYER
   Final scoped override for the web panels. Keeps layout intact, changes the
   surface language to translucent glass with controlled depth and highlights.
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-user,
body.page-admin,
body.page-developer {
  --bbyd-bg: #070b14;
  --bbyd-bg-2: rgba(12, 18, 32, 0.58);
  --bbyd-bg-3: rgba(20, 28, 48, 0.52);
  --bbyd-bg-4: rgba(30, 41, 66, 0.56);
  --bbyd-line: rgba(255, 255, 255, 0.14);
  --bbyd-line-2: rgba(255, 255, 255, 0.24);
  --bbyd-glass: rgba(14, 22, 38, 0.54);
  --bbyd-glass-strong: rgba(9, 15, 27, 0.72);
  --bbyd-glass-soft: rgba(255, 255, 255, 0.08);
  --bbyd-glass-edge: rgba(255, 255, 255, 0.32);
  --bbyd-glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --bbyd-glass-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --glass-bg: var(--bbyd-glass);
  --glass-bg-strong: var(--bbyd-glass-strong);
  --glass-blur: blur(22px) saturate(150%);
  --glass-border: var(--bbyd-line);
  background:
    linear-gradient(135deg, rgba(255, 70, 85, 0.12), transparent 28%),
    linear-gradient(215deg, rgba(0, 229, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #07101d 0%, #08111f 48%, #050912 100%);
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar,
body.page-user .top-bar,
body.page-admin .top-bar,
body.page-developer .top-bar,
body.page-user .bbyd-ph,
body.page-admin .bbyd-ph,
body.page-developer .bbyd-ph {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(10, 16, 30, 0.62));
  border-color: var(--bbyd-line);
  box-shadow: var(--bbyd-glass-shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

body.page-user .sidebar::before,
body.page-admin .sidebar::before,
body.page-developer .sidebar::before,
body.page-user .top-bar::before,
body.page-admin .top-bar::before,
body.page-developer .top-bar::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
  opacity: 0.55;
}

body.page-user .sidebar-id,
body.page-admin .sidebar-id,
body.page-developer .sidebar-id,
.bbyd-sb-role,
.bbyd-sb-bal,
body.page-user .sidebar .nav-menu li.feature-item a,
body.page-admin .sidebar .nav-menu li.feature-item a,
body.page-developer .sidebar .nav-menu li.feature-item a,
body.page-user .sidebar-bottom-menu a,
body.page-admin .sidebar-bottom-menu a,
body.page-developer .sidebar-bottom-menu a {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

body.page-user .sidebar-id:hover,
body.page-admin .sidebar-id:hover,
body.page-developer .sidebar-id:hover,
body.page-user .sidebar .nav-menu li.feature-item a:hover,
body.page-admin .sidebar .nav-menu li.feature-item a:hover,
body.page-developer .sidebar .nav-menu li.feature-item a:hover,
body.page-user .sidebar-bottom-menu a:hover,
body.page-admin .sidebar-bottom-menu a:hover,
body.page-developer .sidebar-bottom-menu a:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.page-user .sidebar .nav-menu li.feature-item.active a,
body.page-admin .sidebar .nav-menu li.feature-item.active a,
body.page-developer .sidebar .nav-menu li.feature-item.active a,
.bbyd-sb-role a.active,
.bbyd-sb-role button.active {
  background: linear-gradient(135deg, rgba(255, 70, 85, 0.34), rgba(255, 255, 255, 0.10));
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: 0 10px 28px rgba(255, 70, 85, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

body.page-user .setting-card,
body.page-admin .setting-card,
body.page-developer .setting-card,
body.page-user .home-dashboard-card,
body.page-admin .home-dashboard-card,
body.page-developer .home-dashboard-card,
body.page-user .stat-card,
body.page-admin .stat-card,
body.page-developer .stat-card,
.bbyd-card,
body.page-admin .ops-drive-shell,
body.page-admin .ops-drive-sidebar,
body.page-admin .ops-drive-share-panel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(9, 15, 27, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--bbyd-glass-shadow);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

body.page-user .setting-card::before,
body.page-admin .setting-card::before,
body.page-developer .setting-card::before,
body.page-user .home-dashboard-card::before,
body.page-admin .home-dashboard-card::before,
body.page-developer .home-dashboard-card::before,
body.page-user .stat-card::before,
body.page-admin .stat-card::before,
body.page-developer .stat-card::before,
.bbyd-card::before,
body.page-admin .ops-drive-shell::before,
body.page-admin .ops-drive-sidebar::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.20), transparent 28%),
    linear-gradient(300deg, rgba(255, 255, 255, 0.08), transparent 40%);
  opacity: 0.55;
}

body.page-user .setting-card:hover,
body.page-admin .setting-card:hover,
body.page-developer .setting-card:hover,
body.page-user .home-dashboard-card:hover,
body.page-admin .home-dashboard-card:hover,
body.page-developer .home-dashboard-card:hover,
body.page-user .stat-card:hover,
body.page-admin .stat-card:hover,
body.page-developer .stat-card:hover,
.bbyd-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

body.page-user .card-header,
body.page-admin .card-header,
body.page-developer .card-header,
.bbyd-card__head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.page-user .table-responsive,
body.page-admin .table-responsive,
body.page-developer .table-responsive,
body.page-user .data-table,
body.page-admin .data-table,
body.page-developer .data-table {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.page-user .table-responsive th,
body.page-admin .table-responsive th,
body.page-developer .table-responsive th {
  background: rgba(255, 255, 255, 0.08);
}

body.page-user .table-responsive tr:hover td,
body.page-admin .table-responsive tr:hover td,
body.page-developer .table-responsive tr:hover td {
  background: rgba(255, 255, 255, 0.08);
}

body.page-user .form-control,
body.page-admin .form-control,
body.page-developer .form-control,
body.page-user .form-group input,
body.page-admin .form-group input,
body.page-developer .form-group input,
body.page-user .form-group select,
body.page-admin .form-group select,
body.page-developer .form-group select,
body.page-user .form-group textarea,
  body.page-admin .form-group textarea,
  body.page-developer .form-group textarea,
  body.page-admin .ops-drive-toolbar input,
  body.page-admin .ops-drive-toolbar select {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

body.page-user .form-control:focus,
body.page-admin .form-control:focus,
body.page-developer .form-control:focus,
body.page-user .form-group input:focus,
body.page-admin .form-group input:focus,
body.page-developer .form-group input:focus {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.bbyd-btn,
body.page-user .btn-primary,
body.page-admin .btn-primary,
body.page-developer .btn-primary,
body.page-user .btn-add,
body.page-admin .btn-add,
body.page-developer .btn-add,
body.page-user .btn-secondary,
body.page-admin .btn-secondary,
body.page-developer .btn-secondary,
body.page-user .btn-cancel,
body.page-admin .btn-cancel,
body.page-developer .btn-cancel {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bbyd-btn--ghost,
body.page-user .btn-secondary,
body.page-admin .btn-secondary,
body.page-developer .btn-secondary,
body.page-user .btn-cancel,
body.page-admin .btn-cancel,
body.page-developer .btn-cancel {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

.bbyd-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.bbyd-tabs .bbyd-tab {
  border-radius: 8px 8px 0 0;
}

.bbyd-tabs .bbyd-tab.active {
  background: rgba(255, 255, 255, 0.09);
  border-bottom-color: rgba(255, 255, 255, 0.26);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    --bbyd-bg-2: #101827;
    --bbyd-bg-3: #172033;
    --bbyd-glass: #101827;
    --bbyd-glass-strong: #0b1220;
  }
}

/* Large editors and dense controls stay glassy without expensive nested blur. */
body.page-admin .ops-drive-shell,
body.page-admin .ops-drive-sidebar,
body.page-admin .ops-drive-share-panel {
  overflow: visible;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(9, 15, 27, 0.72));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-admin .ops-drive-shell::before,
body.page-admin .ops-drive-sidebar::before {
  display: none;
}

body.page-user .form-control,
body.page-admin .form-control,
body.page-developer .form-control,
body.page-user .form-group input,
body.page-admin .form-group input,
body.page-developer .form-group input,
body.page-user .form-group select,
body.page-admin .form-group select,
body.page-developer .form-group select,
body.page-user .form-group textarea,
  body.page-admin .form-group textarea,
  body.page-developer .form-group textarea,
  body.page-admin .ops-drive-toolbar input,
  body.page-admin .ops-drive-toolbar select {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS PALETTE + RESPONSIVE LAYOUT REFINEMENT
   Full color pass for glass surfaces, plus desktop/mobile density tuning.
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-user,
body.page-admin,
body.page-developer {
  --bbyd-bg: #08111f;
  --bbyd-bg-2: rgba(12, 24, 42, 0.60);
  --bbyd-bg-3: rgba(20, 36, 58, 0.56);
  --bbyd-bg-4: rgba(30, 48, 74, 0.58);
  --bbyd-ink: #f7fbff;
  --bbyd-ink-2: #c7d7e8;
  --bbyd-dim: #86a0b8;
  --bbyd-dim-2: #587089;
  --bbyd-line: rgba(215, 238, 255, 0.15);
  --bbyd-line-2: rgba(225, 245, 255, 0.28);
  --bbyd-red: #ff6b7a;
  --bbyd-red-soft: rgba(255, 107, 122, 0.13);
  --bbyd-cyan: #7dd3fc;
  --bbyd-cyan-soft: rgba(125, 211, 252, 0.14);
  --bbyd-gold: #f9d47a;
  --bbyd-green: #86efac;
  --bbyd-purple: #c4b5fd;
  --bbyd-aqua: #99f6e4;
  --bbyd-coral: #fda4af;
  --bbyd-glass: rgba(18, 34, 56, 0.56);
  --bbyd-glass-strong: rgba(9, 18, 34, 0.76);
  --bbyd-glass-soft: rgba(225, 245, 255, 0.09);
  --bbyd-glass-edge: rgba(238, 250, 255, 0.32);
  --bbyd-glass-shadow: 0 20px 54px rgba(1, 8, 18, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.17);
  --bbyd-glass-shadow-sm: 0 12px 34px rgba(1, 8, 18, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(125deg, rgba(125, 211, 252, 0.14), transparent 30%),
    linear-gradient(235deg, rgba(196, 181, 253, 0.12), transparent 36%),
    linear-gradient(180deg, #091827 0%, #081321 48%, #050a13 100%);
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar,
body.page-user .top-bar,
body.page-admin .top-bar,
body.page-developer .top-bar,
body.page-user .bbyd-ph,
body.page-admin .bbyd-ph,
body.page-developer .bbyd-ph {
  background:
    linear-gradient(145deg, rgba(238, 250, 255, 0.13), rgba(12, 24, 42, 0.64)),
    linear-gradient(315deg, rgba(125, 211, 252, 0.08), transparent 46%);
}

body.page-user .setting-card,
body.page-admin .setting-card,
body.page-developer .setting-card,
body.page-user .home-dashboard-card,
body.page-admin .home-dashboard-card,
body.page-developer .home-dashboard-card,
body.page-user .stat-card,
body.page-admin .stat-card,
body.page-developer .stat-card,
.bbyd-card {
  background:
    linear-gradient(150deg, rgba(238, 250, 255, 0.14), rgba(13, 28, 48, 0.60)),
    linear-gradient(330deg, rgba(153, 246, 228, 0.06), transparent 42%);
}

body.page-user .sidebar .nav-menu li.feature-item.active a,
body.page-admin .sidebar .nav-menu li.feature-item.active a,
body.page-developer .sidebar .nav-menu li.feature-item.active a,
.bbyd-sb-role a.active,
.bbyd-sb-role button.active {
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.28), rgba(238, 250, 255, 0.10)),
    linear-gradient(315deg, rgba(196, 181, 253, 0.16), transparent);
  border-color: rgba(238, 250, 255, 0.30);
  box-shadow: 0 12px 30px rgba(125, 211, 252, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.page-user .sidebar .nav-menu li.feature-item.active a i,
body.page-admin .sidebar .nav-menu li.feature-item.active a i,
body.page-developer .sidebar .nav-menu li.feature-item.active a i,
body.page-user .card-header h2 i,
body.page-admin .card-header h2 i,
body.page-developer .card-header h2 i {
  color: var(--bbyd-cyan);
}

.bbyd-btn--primary,
body.page-user .btn-primary,
body.page-admin .btn-primary,
body.page-developer .btn-primary,
body.page-user .btn-add,
body.page-admin .btn-add,
body.page-developer .btn-add {
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.95), rgba(153, 246, 228, 0.88));
  color: #06111f;
  border: 1px solid rgba(238, 250, 255, 0.30);
}

.bbyd-btn--primary:hover,
body.page-user .btn-primary:hover,
body.page-admin .btn-primary:hover,
body.page-developer .btn-primary:hover,
body.page-user .btn-add:hover,
body.page-admin .btn-add:hover,
body.page-developer .btn-add:hover {
  background: linear-gradient(135deg, #f7fbff, rgba(125, 211, 252, 0.82));
  color: #06111f;
}

.bbyd-btn--cyan {
  background: linear-gradient(135deg, rgba(196, 181, 253, 0.95), rgba(125, 211, 252, 0.86));
  color: #06111f;
}

.bbyd-card--accent,
.bbyd-card--cyan,
.bbyd-card--gold,
.bbyd-card--green {
  border-left-color: rgba(238, 250, 255, 0.26);
}

body.page-user .stat-icon.blue,
body.page-admin .stat-icon.blue,
body.page-developer .stat-icon.blue {
  background: rgba(125, 211, 252, 0.16) !important;
  color: var(--bbyd-cyan);
}

body.page-user .stat-icon.red,
body.page-admin .stat-icon.red,
body.page-developer .stat-icon.red {
  background: rgba(253, 164, 175, 0.14) !important;
  color: var(--bbyd-coral);
}

body.page-user .stat-icon.purple,
body.page-admin .stat-icon.purple,
body.page-developer .stat-icon.purple {
  background: rgba(196, 181, 253, 0.16) !important;
  color: var(--bbyd-purple);
}

body.page-user .stat-icon.gold,
body.page-admin .stat-icon.gold,
body.page-developer .stat-icon.gold {
  background: rgba(249, 212, 122, 0.15) !important;
  color: var(--bbyd-gold);
}

@media (min-width: 1280px) {
  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: 280px;
  }

  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    width: 280px;
  }

  .bbyd-content {
    padding: 32px 40px 42px;
  }

  .bbyd-grid,
  .bbyd-stat-grid,
  body.page-user .stats-grid,
  body.page-admin .stats-grid,
  body.page-developer .stats-grid {
    gap: 20px;
  }

  .bbyd-grid--4,
  .bbyd-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bbyd-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bbyd-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: 300px;
  }

  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    width: 300px;
  }

  .bbyd-content {
    padding-left: 48px;
    padding-right: 48px;
  }

  body.page-user .tab-content,
  body.page-admin .tab-content,
  body.page-developer .tab-content,
  body.page-user #homeDashboardContainer,
  body.page-admin #adminTabContent,
  body.page-developer #developerTabContent {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1024px) {
  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: 0;
    padding-top: 64px;
  }

  body.page-user .mobile-sidebar-toggle,
  body.page-admin .mobile-sidebar-toggle,
  body.page-developer .mobile-sidebar-toggle {
    border-radius: 12px;
    background: rgba(238, 250, 255, 0.12);
    border: 1px solid rgba(238, 250, 255, 0.20);
    box-shadow: var(--bbyd-glass-shadow-sm);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
  }

  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    width: min(86vw, 330px);
  }

  body.page-developer .sidebar {
    position: fixed;
    height: 100vh;
  }
}

@media (max-width: 900px) {
  .bbyd-ph {
    padding: 22px 18px 18px;
    align-items: start;
  }

  .bbyd-ph__actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .bbyd-content {
    padding: 18px 14px 28px;
  }

  .bbyd-grid,
  .bbyd-stat-grid,
  body.page-user .stats-grid,
  body.page-admin .stats-grid,
  body.page-developer .stats-grid {
    gap: 14px;
  }

  .bbyd-grid--4,
  .bbyd-grid--3,
  .bbyd-grid--2,
  .bbyd-grid--2-1,
  .bbyd-grid--1-2,
  .bbyd-stat-grid {
    grid-template-columns: 1fr;
  }

  body.page-user .setting-card,
  body.page-admin .setting-card,
  body.page-developer .setting-card,
  body.page-user .home-dashboard-card,
  body.page-admin .home-dashboard-card,
  body.page-developer .home-dashboard-card,
  body.page-user .stat-card,
  body.page-admin .stat-card,
  body.page-developer .stat-card,
  .bbyd-card {
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    background:
      linear-gradient(145deg, rgba(125, 211, 252, 0.12), transparent 42%),
      linear-gradient(180deg, #091827 0%, #060b14 100%);
  }

  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    padding-top: 58px;
  }

  .bbyd-ph {
    padding: 18px 12px 14px;
    gap: 14px;
  }

  .bbyd-ph__title {
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -0.6px;
  }

  .bbyd-ph__sub {
    font-size: 12px;
  }

  .bbyd-content {
    padding: 14px 10px 24px;
  }

  body.page-user .card-body,
  body.page-admin .card-body,
  body.page-developer .card-body,
  .bbyd-card {
    padding: 14px;
  }

  body.page-user .card-header,
  body.page-admin .card-header,
  body.page-developer .card-header {
    padding: 14px 14px 10px;
  }

  body.page-user .stat-card,
  body.page-admin .stat-card,
  body.page-developer .stat-card {
    padding: 14px;
  }

  body.page-user .stat-value,
  body.page-admin .stat-value,
  body.page-developer .stat-value {
    font-size: 28px;
  }

  .bbyd-tabs {
    margin-bottom: 16px;
    padding: 0 2px;
  }

  .bbyd-tabs .bbyd-tab {
    padding: 10px 12px;
    font-size: 11px;
  }

  body.page-user .table-responsive,
  body.page-admin .table-responsive,
  body.page-developer .table-responsive {
    overflow-x: auto;
  }

  body.page-user .table-responsive table,
  body.page-admin .table-responsive table,
  body.page-developer .table-responsive table {
    min-width: 640px;
  }

  .bbyd-btn,
  body.page-user .btn-primary,
  body.page-admin .btn-primary,
  body.page-developer .btn-primary,
  body.page-user .btn-secondary,
  body.page-admin .btn-secondary,
  body.page-developer .btn-secondary {
    min-height: 40px;
    padding: 9px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM LIQUID GLASS DASHBOARD SYSTEM
   Production polish pass: shared material tokens, restrained ambient depth,
   cleaner hierarchy, pill CTAs, softer progress, and resilient mobile layout.
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-user,
body.page-admin,
body.page-developer {
  --bbyd-bg: #07111f;
  --bbyd-bg-deep: #030711;
  --bbyd-bg-2: rgba(10, 20, 36, 0.66);
  --bbyd-bg-3: rgba(17, 31, 52, 0.62);
  --bbyd-bg-4: rgba(27, 45, 72, 0.60);
  --bbyd-ink: #f5f9ff;
  --bbyd-ink-2: #d1deec;
  --bbyd-dim: #96aabd;
  --bbyd-dim-2: #647a90;
  --bbyd-cyan: #83d7ff;
  --bbyd-aqua: #9df4e4;
  --bbyd-pink: #f7a5c4;
  --bbyd-purple: #bfb3ff;
  --bbyd-red: #ff7b8a;
  --bbyd-gold: #f5d68a;
  --bbyd-green: #92e7b4;
  --bbyd-line: rgba(255, 255, 255, 0.11);
  --bbyd-line-2: rgba(255, 255, 255, 0.16);
  --bbyd-glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.135), rgba(9, 21, 39, 0.58) 54%, rgba(7, 15, 29, 0.70));
  --bbyd-glass-bg-quiet: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(10, 22, 40, 0.58) 56%, rgba(5, 12, 25, 0.68));
  --bbyd-glass-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(11, 25, 45, 0.72) 58%, rgba(4, 10, 22, 0.82));
  --bbyd-glass-border: rgba(255, 255, 255, 0.13);
  --bbyd-glass-border-soft: rgba(255, 255, 255, 0.09);
  --bbyd-glass-border-strong: rgba(255, 255, 255, 0.18);
  --bbyd-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.21), inset 0 -1px 0 rgba(255, 255, 255, 0.045);
  --bbyd-shadow-card: 0 22px 64px rgba(0, 0, 0, 0.42), 0 0 34px rgba(131, 215, 255, 0.055), 0 0 42px rgba(247, 165, 196, 0.035), var(--bbyd-glass-highlight);
  --bbyd-shadow-card-hover: 0 28px 74px rgba(0, 0, 0, 0.46), 0 0 38px rgba(131, 215, 255, 0.09), 0 0 46px rgba(247, 165, 196, 0.06), var(--bbyd-glass-highlight);
  --bbyd-shadow-panel: 0 18px 54px rgba(0, 0, 0, 0.38), 0 0 30px rgba(131, 215, 255, 0.05), var(--bbyd-glass-highlight);
  --bbyd-radius-card: 22px;
  --bbyd-radius-panel: 24px;
  --bbyd-radius-control: 999px;
  --bbyd-radius-inner: 16px;
  --bbyd-blur-card: blur(24px) saturate(155%);
  --bbyd-blur-panel: blur(28px) saturate(160%);
  --bbyd-blur-control: blur(18px) saturate(145%);
  --bbyd-ease-glass: 180ms cubic-bezier(.2, .8, .2, 1);
  --glass-bg: rgba(10, 22, 40, 0.62);
  --glass-bg-strong: rgba(6, 14, 28, 0.78);
  --glass-border: var(--bbyd-glass-border);
  --glass-blur: var(--bbyd-blur-panel);
  color: var(--bbyd-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(131, 215, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 86% 14%, rgba(247, 165, 196, 0.12), transparent 30rem),
    radial-gradient(circle at 62% 78%, rgba(191, 179, 255, 0.10), transparent 34rem),
    linear-gradient(180deg, #081727 0%, #07111f 45%, #030711 100%);
}

body.page-user::after,
body.page-admin::after,
body.page-developer::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, rgba(131, 215, 255, 0.14), transparent 30%, rgba(247, 165, 196, 0.10) 74%, transparent);
  background-size: 5px 5px, 100% 100%;
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar,
body.page-user .main-content,
body.page-admin .main-content,
body.page-developer .main-content,
body.page-user .mobile-sidebar-toggle,
body.page-admin .mobile-sidebar-toggle,
body.page-developer .mobile-sidebar-toggle {
  position: relative;
  z-index: 1;
}

.bbyd-glass-panel,
.bbyd-glass-card,
.bbyd-glass-surface {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bbyd-glass-border);
  background: var(--bbyd-glass-bg);
  box-shadow: var(--bbyd-shadow-card);
  backdrop-filter: var(--bbyd-blur-card);
  -webkit-backdrop-filter: var(--bbyd-blur-card);
}

.bbyd-glass-panel::before,
.bbyd-glass-card::before,
.bbyd-glass-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 30%),
    radial-gradient(circle at 22% 0%, rgba(131, 215, 255, 0.13), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(247, 165, 196, 0.09), transparent 32%);
  opacity: 0.72;
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar,
body.page-user .top-bar,
body.page-admin .top-bar,
body.page-developer .top-bar,
body.page-user .bbyd-ph,
body.page-admin .bbyd-ph,
body.page-developer .bbyd-ph {
  border-color: var(--bbyd-glass-border);
  background: var(--bbyd-glass-bg-strong);
  box-shadow: var(--bbyd-shadow-panel);
  backdrop-filter: var(--bbyd-blur-panel);
  -webkit-backdrop-filter: var(--bbyd-blur-panel);
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  border-right-color: rgba(255, 255, 255, 0.14);
}

body.page-user .bbyd-ph,
body.page-admin .bbyd-ph,
body.page-developer .bbyd-ph {
  border-radius: var(--bbyd-radius-panel);
  padding: 28px 30px;
  margin-bottom: 24px;
}

body.page-user .setting-card,
body.page-admin .setting-card,
body.page-developer .setting-card,
body.page-user .home-dashboard-card,
body.page-admin .home-dashboard-card,
body.page-developer .home-dashboard-card,
body.page-user .stat-card,
body.page-admin .stat-card,
body.page-developer .stat-card,
body.page-user .pv-card,
body.page-admin .pv-card,
body.page-developer .pv-card,
body.page-user .hud-glass-panel,
body.page-admin .hud-glass-panel,
body.page-developer .hud-glass-panel,
body.page-admin .db-chart-card,
body.page-developer .db-chart-card,
body.page-admin .db-news-card,
body.page-developer .db-news-card,
body.page-admin .db-queue-card,
body.page-developer .db-queue-card,
body.page-admin .db-status-card,
body.page-developer .db-status-card,
body.page-user .shop-item-card,
body.page-user .market-chat-room-card,
body.page-admin .embed-preview-card,
body.page-developer .embed-preview-card,
body.page-admin .ops-drive-shell,
body.page-admin .ops-drive-sidebar,
body.page-admin .ops-drive-share-panel,
.bbyd-card,
.bbyd-member-card {
  border-radius: var(--bbyd-radius-card);
  border: 1px solid var(--bbyd-glass-border);
  background: var(--bbyd-glass-bg);
  box-shadow: var(--bbyd-shadow-card);
  backdrop-filter: var(--bbyd-blur-card);
  -webkit-backdrop-filter: var(--bbyd-blur-card);
  transition:
    transform var(--bbyd-ease-glass),
    border-color var(--bbyd-ease-glass),
    box-shadow var(--bbyd-ease-glass),
    background var(--bbyd-ease-glass);
}

body.page-user .setting-card::before,
body.page-admin .setting-card::before,
body.page-developer .setting-card::before,
body.page-user .home-dashboard-card::before,
body.page-admin .home-dashboard-card::before,
body.page-developer .home-dashboard-card::before,
body.page-user .stat-card::before,
body.page-admin .stat-card::before,
body.page-developer .stat-card::before,
body.page-user .pv-card::before,
body.page-admin .pv-card::before,
body.page-developer .pv-card::before,
body.page-user .hud-glass-panel::before,
body.page-admin .hud-glass-panel::before,
body.page-developer .hud-glass-panel::before,
.bbyd-card::before,
.bbyd-member-card::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.045) 28%, transparent 48%),
    radial-gradient(circle at 18% 0%, rgba(131, 215, 255, 0.10), transparent 38%),
    radial-gradient(circle at 96% 12%, rgba(247, 165, 196, 0.07), transparent 34%);
  opacity: 0.76;
}

body.page-user .setting-card:hover,
body.page-admin .setting-card:hover,
body.page-developer .setting-card:hover,
body.page-user .home-dashboard-card:hover,
body.page-admin .home-dashboard-card:hover,
body.page-developer .home-dashboard-card:hover,
body.page-user .stat-card:hover,
body.page-admin .stat-card:hover,
body.page-developer .stat-card:hover,
body.page-user .pv-card:hover,
body.page-admin .pv-card:hover,
body.page-developer .pv-card:hover,
body.page-user .shop-item-card:hover,
body.page-admin .db-chart-card:hover,
body.page-developer .db-chart-card:hover,
body.page-admin .db-news-card:hover,
body.page-developer .db-news-card:hover,
body.page-admin .db-queue-card:hover,
body.page-developer .db-queue-card:hover,
body.page-admin .db-status-card:hover,
body.page-developer .db-status-card:hover,
.bbyd-card:hover,
.bbyd-member-card:hover {
  transform: translateY(-2px) scale(1.003);
  border-color: var(--bbyd-glass-border-strong);
  box-shadow: var(--bbyd-shadow-card-hover);
}

body.page-user .card-header,
body.page-admin .card-header,
body.page-developer .card-header,
.bbyd-card__head,
body.page-admin .db-chart-header,
body.page-admin .db-widget-header,
body.page-developer .db-chart-header,
body.page-developer .db-widget-header {
  min-height: 54px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent);
}

body.page-user .card-header h2,
body.page-admin .card-header h2,
body.page-developer .card-header h2,
.bbyd-card__title,
body.page-user .stat-label,
body.page-admin .stat-label,
body.page-developer .stat-label {
  color: var(--bbyd-ink);
  letter-spacing: 0;
}

.bbyd-card__title,
body.page-user .stat-label,
body.page-admin .stat-label,
body.page-developer .stat-label {
  font-weight: 800;
}

.bbyd-card__title-kr,
body.page-user .stat-desc,
body.page-admin .stat-desc,
body.page-developer .stat-desc,
body.page-user .sidebar-brand__label,
body.page-admin .sidebar-brand__label,
body.page-developer .sidebar-brand__label {
  color: var(--bbyd-dim);
  letter-spacing: 0;
}

body.page-user .card-body,
body.page-admin .card-body,
body.page-developer .card-body {
  padding: 20px;
}

body.page-user .sidebar-id,
body.page-admin .sidebar-id,
body.page-developer .sidebar-id,
.bbyd-sb-role,
.bbyd-sb-bal,
body.page-user .sidebar .nav-menu li.feature-item a,
body.page-admin .sidebar .nav-menu li.feature-item a,
body.page-developer .sidebar .nav-menu li.feature-item a,
body.page-user .sidebar-bottom-menu a,
body.page-admin .sidebar-bottom-menu a,
body.page-developer .sidebar-bottom-menu a,
.bbyd-tabs .bbyd-tab,
body.page-user .shop-currency-btn {
  border-radius: var(--bbyd-radius-inner);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--bbyd-glass-border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition:
    transform var(--bbyd-ease-glass),
    background var(--bbyd-ease-glass),
    border-color var(--bbyd-ease-glass),
    box-shadow var(--bbyd-ease-glass),
    color var(--bbyd-ease-glass);
}

body.page-user .sidebar-id:hover,
body.page-admin .sidebar-id:hover,
body.page-developer .sidebar-id:hover,
body.page-user .sidebar .nav-menu li.feature-item a:hover,
body.page-admin .sidebar .nav-menu li.feature-item a:hover,
body.page-developer .sidebar .nav-menu li.feature-item a:hover,
body.page-user .sidebar-bottom-menu a:hover,
body.page-admin .sidebar-bottom-menu a:hover,
body.page-developer .sidebar-bottom-menu a:hover,
.bbyd-tabs .bbyd-tab:hover,
body.page-user .shop-currency-btn:hover {
  transform: translateY(-1px) scale(1.01);
  background: rgba(255, 255, 255, 0.095);
  border-color: var(--bbyd-glass-border-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20), 0 0 20px rgba(131, 215, 255, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.page-user .sidebar .nav-menu li.feature-item.active a,
body.page-admin .sidebar .nav-menu li.feature-item.active a,
body.page-developer .sidebar .nav-menu li.feature-item.active a,
.bbyd-sb-role a.active,
.bbyd-sb-role button.active,
.bbyd-tabs .bbyd-tab.active,
body.page-user .shop-currency-btn.is-active,
body.page-user .shop-item-card.is-equipped,
body.page-user .shop-item-card.is-tryon-selected {
  color: var(--bbyd-ink);
  background:
    linear-gradient(135deg, rgba(131, 215, 255, 0.20), rgba(255, 255, 255, 0.09)),
    linear-gradient(315deg, rgba(247, 165, 196, 0.105), transparent 58%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), 0 0 24px rgba(131, 215, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.bbyd-btn,
body.page-user .btn-primary,
body.page-admin .btn-primary,
body.page-developer .btn-primary,
body.page-user .btn-add,
body.page-admin .btn-add,
body.page-developer .btn-add,
body.page-user .btn-secondary,
body.page-admin .btn-secondary,
body.page-developer .btn-secondary,
body.page-user .btn-cancel,
body.page-admin .btn-cancel,
body.page-developer .btn-cancel,
body.page-user .btn-danger,
body.page-admin .btn-danger,
body.page-developer .btn-danger {
  border-radius: var(--bbyd-radius-control);
  min-height: 42px;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: 0;
  border: 1px solid var(--bbyd-glass-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: var(--bbyd-blur-control);
  -webkit-backdrop-filter: var(--bbyd-blur-control);
  transition:
    transform var(--bbyd-ease-glass),
    border-color var(--bbyd-ease-glass),
    box-shadow var(--bbyd-ease-glass),
    background var(--bbyd-ease-glass);
}

.bbyd-btn--primary,
body.page-user .btn-primary,
body.page-admin .btn-primary,
body.page-developer .btn-primary,
body.page-user .btn-add,
body.page-admin .btn-add,
body.page-developer .btn-add {
  color: #04111f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(131, 215, 255, 0.78) 46%, rgba(157, 244, 228, 0.70)),
    linear-gradient(315deg, rgba(247, 165, 196, 0.22), transparent);
  border-color: rgba(255, 255, 255, 0.32);
}

.bbyd-btn--ghost,
body.page-user .btn-secondary,
body.page-admin .btn-secondary,
body.page-developer .btn-secondary,
body.page-user .btn-cancel,
body.page-admin .btn-cancel,
body.page-developer .btn-cancel {
  color: var(--bbyd-ink);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--bbyd-glass-border);
}

.bbyd-btn:hover,
body.page-user .btn-primary:hover,
body.page-admin .btn-primary:hover,
body.page-developer .btn-primary:hover,
body.page-user .btn-add:hover,
body.page-admin .btn-add:hover,
body.page-developer .btn-add:hover,
body.page-user .btn-secondary:hover,
body.page-admin .btn-secondary:hover,
body.page-developer .btn-secondary:hover,
body.page-user .btn-cancel:hover,
body.page-admin .btn-cancel:hover,
body.page-developer .btn-cancel:hover {
  transform: translateY(-1px) scale(1.015);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30), 0 0 24px rgba(131, 215, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.page-user .form-control,
body.page-admin .form-control,
body.page-developer .form-control,
body.page-user .form-group input,
body.page-admin .form-group input,
body.page-developer .form-group input,
body.page-user .form-group select,
body.page-admin .form-group select,
body.page-developer .form-group select,
body.page-user .form-group textarea,
body.page-admin .form-group textarea,
body.page-developer .form-group textarea {
  color: var(--bbyd-ink);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.page-user .form-control:focus,
body.page-admin .form-control:focus,
body.page-developer .form-control:focus,
body.page-user .form-group input:focus,
body.page-admin .form-group input:focus,
body.page-developer .form-group input:focus,
body.page-user .form-group select:focus,
body.page-admin .form-group select:focus,
body.page-developer .form-group select:focus,
body.page-user .form-group textarea:focus,
body.page-admin .form-group textarea:focus,
body.page-developer .form-group textarea:focus {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 3px rgba(131, 215, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.bbyd-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34);
}

.bbyd-bar__fill,
body.page-user .wc-fill,
body.page-user .notif-result-progress-fill,
body.page-admin .notif-result-progress-fill,
body.page-developer .notif-result-progress-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(131, 215, 255, 0.82), rgba(157, 244, 228, 0.74));
  box-shadow: 0 0 12px rgba(131, 215, 255, 0.18);
}

body.page-user .table-responsive,
body.page-admin .table-responsive,
body.page-developer .table-responsive,
body.page-user .data-table,
body.page-admin .data-table,
body.page-developer .data-table {
  border-radius: var(--bbyd-radius-inner);
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.045);
}

body.page-user .stat-value,
body.page-admin .stat-value,
body.page-developer .stat-value,
.bbyd-metric__value {
  color: var(--bbyd-ink);
  line-height: 1;
}

body.page-user .stat-icon,
body.page-admin .stat-icon,
body.page-developer .stat-icon {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.page-admin .ops-drive-shell,
body.page-admin .ops-drive-sidebar,
body.page-admin .ops-drive-share-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-admin .ops-drive-shell::before,
body.page-admin .ops-drive-sidebar::before {
  display: none;
}

@media (min-width: 1280px) {
  .bbyd-content {
    padding: 34px 42px 46px;
  }

  body.page-user .stats-grid,
  body.page-admin .stats-grid,
  body.page-developer .stats-grid,
  .bbyd-grid,
  .bbyd-stat-grid {
    gap: 22px;
  }

  body.page-user .card-grid,
  body.page-admin .card-grid,
  body.page-developer .card-grid {
    gap: 22px;
  }
}

@media (min-width: 1600px) {
  .bbyd-content {
    padding: 40px 52px 54px;
  }
}

@media (max-width: 1024px) {
  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    width: min(88vw, 340px);
    border-radius: 0 24px 24px 0;
  }

  body.page-user .mobile-sidebar-toggle,
  body.page-admin .mobile-sidebar-toggle,
  body.page-developer .mobile-sidebar-toggle {
    border-radius: 18px;
    background: var(--bbyd-glass-bg-strong);
    border-color: rgba(255, 255, 255, 0.15);
  }
}

@media (max-width: 900px) {
  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    border-radius: 20px;
    padding: 22px 18px;
  }

  .bbyd-content {
    padding: 18px 14px 30px;
  }

  body.page-user .setting-card,
  body.page-admin .setting-card,
  body.page-developer .setting-card,
  body.page-user .home-dashboard-card,
  body.page-admin .home-dashboard-card,
  body.page-developer .home-dashboard-card,
  body.page-user .stat-card,
  body.page-admin .stat-card,
  body.page-developer .stat-card,
  body.page-user .shop-item-card,
  .bbyd-card,
  .bbyd-member-card {
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    background:
      radial-gradient(circle at 20% 0%, rgba(131, 215, 255, 0.17), transparent 18rem),
      radial-gradient(circle at 100% 8%, rgba(247, 165, 196, 0.10), transparent 18rem),
      linear-gradient(180deg, #081727 0%, #030711 100%);
  }

  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    padding-top: 60px;
  }

  .bbyd-content {
    padding: 14px 10px 26px;
  }

  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    padding: 18px 14px;
    margin-bottom: 16px;
    gap: 12px;
  }

  .bbyd-ph__title {
    font-size: 25px;
    line-height: 1.14;
    letter-spacing: 0;
  }

  body.page-user .card-body,
  body.page-admin .card-body,
  body.page-developer .card-body,
  .bbyd-card {
    padding: 16px;
  }

  body.page-user .card-header,
  body.page-admin .card-header,
  body.page-developer .card-header,
  .bbyd-card__head {
    padding: 16px 16px 12px;
  }

  .bbyd-btn,
  body.page-user .btn-primary,
  body.page-admin .btn-primary,
  body.page-developer .btn-primary,
  body.page-user .btn-secondary,
  body.page-admin .btn-secondary,
  body.page-developer .btn-secondary,
  body.page-user .btn-cancel,
  body.page-admin .btn-cancel,
  body.page-developer .btn-cancel {
    min-height: 42px;
    padding: 10px 14px;
  }

  .bbyd-tabs {
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .bbyd-tabs .bbyd-tab {
    flex: 0 0 auto;
    border-radius: 999px;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    --bbyd-glass-bg: linear-gradient(145deg, #15243a, #091427);
    --bbyd-glass-bg-quiet: linear-gradient(145deg, #111f34, #081225);
    --bbyd-glass-bg-strong: linear-gradient(145deg, #162942, #061126);
  }
}

/* Keep the desktop app shell unified: sidebar is a fixed rail, not a card. */
body.page-user,
body.page-admin,
body.page-developer {
  --bbyd-sidebar-w: 264px;
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bbyd-sidebar-w);
  height: 100vh;
  z-index: 30;
  border-radius: 0 !important;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(8, 18, 34, 0.72) 44%, rgba(4, 10, 22, 0.88)),
    radial-gradient(circle at 16% 4%, rgba(131, 215, 255, 0.12), transparent 18rem),
    radial-gradient(circle at 100% 22%, rgba(247, 165, 196, 0.07), transparent 18rem);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06), 10px 0 34px rgba(0, 0, 0, 0.16);
}

body.page-user .sidebar::before,
body.page-admin .sidebar::before,
body.page-developer .sidebar::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(90deg, transparent, rgba(131, 215, 255, 0.055));
  opacity: 0.62;
}

body.page-user .main-content,
body.page-admin .main-content,
body.page-developer .main-content {
  position: relative;
  display: flow-root;
  margin-left: var(--bbyd-sidebar-w);
  min-height: 100vh;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 1px),
    linear-gradient(180deg, rgba(7, 17, 31, 0.24), transparent 18rem);
  box-shadow: none;
}

body.page-user .bbyd-ph,
body.page-admin .bbyd-ph,
body.page-developer .bbyd-ph {
  width: auto;
  margin: 18px 34px 0;
}

body.page-admin .dashboard-refresh-pill {
  top: 30px !important;
  right: 38px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.page-user .bbyd-content,
body.page-admin .bbyd-content,
body.page-developer .bbyd-content {
  padding-left: 34px;
  padding-right: 34px;
}

@media (min-width: 1280px) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    --bbyd-sidebar-w: 280px;
  }

  body.page-user .bbyd-content,
  body.page-admin .bbyd-content,
  body.page-developer .bbyd-content {
    padding-left: 38px;
    padding-right: 38px;
  }

  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    margin-left: 38px;
    margin-right: 38px;
  }
}

@media (min-width: 1600px) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    --bbyd-sidebar-w: 300px;
  }

  body.page-user .bbyd-content,
  body.page-admin .bbyd-content,
  body.page-developer .bbyd-content {
    padding-left: 46px;
    padding-right: 46px;
  }

  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    margin-left: 46px;
    margin-right: 46px;
  }
}

@media (max-width: 1024px) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    --bbyd-sidebar-w: 0px;
  }

  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: 0;
  }

  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(88vw, 340px);
    height: 100vh;
    border-radius: 0 24px 24px 0 !important;
    box-shadow: 18px 0 46px rgba(0, 0, 0, 0.34), inset -1px 0 0 rgba(255, 255, 255, 0.08);
  }

  body.page-admin .dashboard-refresh-pill {
    top: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 112px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    margin: 10px 10px 0;
  }

  body.page-user .bbyd-content,
  body.page-admin .bbyd-content,
  body.page-developer .bbyd-content {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* LIQUID GLASS FULL SURFACE COMPLETION */
body.page-user,
body.page-admin,
body.page-developer {
  --bbyd-bg: #06131f;
  --bbyd-bg-deep: #020711;
  --bbyd-glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.135), rgba(12, 24, 42, 0.62) 44%, rgba(5, 12, 25, 0.78));
  --bbyd-glass-bg-quiet: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(8, 19, 35, 0.58) 48%, rgba(3, 9, 20, 0.72));
  --bbyd-glass-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(14, 31, 52, 0.72) 46%, rgba(5, 12, 24, 0.86));
  --bbyd-glass-border: rgba(236, 250, 255, 0.145);
  --bbyd-glass-border-soft: rgba(255, 255, 255, 0.09);
  --bbyd-radius-panel: 24px;
  --bbyd-radius-card: 22px;
  --bbyd-radius-inner: 16px;
  --bbyd-radius-control: 14px;
  --bbyd-shadow-glass: 0 22px 58px rgba(0, 0, 0, 0.34), 0 0 32px rgba(91, 214, 255, 0.055), 0 0 46px rgba(255, 119, 168, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --bbyd-shadow-glass-hover: 0 28px 70px rgba(0, 0, 0, 0.38), 0 0 34px rgba(91, 214, 255, 0.11), 0 0 54px rgba(255, 119, 168, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.19);
  background:
    radial-gradient(circle at 12% -8%, rgba(105, 192, 255, 0.19), transparent 31rem),
    radial-gradient(circle at 92% 5%, rgba(255, 137, 176, 0.105), transparent 34rem),
    radial-gradient(circle at 54% 106%, rgba(125, 255, 222, 0.085), transparent 38rem),
    linear-gradient(180deg, #071827 0%, #06131f 43%, #020711 100%) !important;
}

body.page-user::after,
body.page-admin::after,
body.page-developer::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7px);
  background-size: 180px 180px, 240px 240px;
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(8, 20, 38, 0.72) 42%, rgba(3, 8, 19, 0.88)),
    radial-gradient(circle at 12% 3%, rgba(105, 192, 255, 0.16), transparent 18rem),
    radial-gradient(circle at 100% 24%, rgba(255, 137, 176, 0.08), transparent 18rem) !important;
  border-right-color: rgba(236, 250, 255, 0.15) !important;
  box-shadow: 14px 0 42px rgba(0, 0, 0, 0.24), inset -1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-user :where(.card, .bbyd-card, .pe-card, .pe-preview-card, .pe-preview__frame, .vs-section, .member-role-section, .shop-type-section, .shop-inventory-summary, .hud-table-wrap, .leaderboard-list, .vs-crosshair-preview, .reaction-stage, .dev-panel, .hud-market-disclaimer, .attendance-calendar-month),
body.page-admin :where(.card, .bbyd-card, .member-role-section, .hud-table-wrap, .dev-panel, .attendance-calendar-month),
body.page-developer :where(.card, .bbyd-card, .hud-table-wrap, .dev-panel) {
  position: relative;
  overflow: hidden;
  border-radius: var(--bbyd-radius-panel) !important;
  border: 1px solid var(--bbyd-glass-border) !important;
  background: var(--bbyd-glass-bg) !important;
  box-shadow: var(--bbyd-shadow-glass) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

body.page-user :where(.card, .bbyd-card, .pe-card, .vs-section, .member-role-section, .shop-type-section, .hud-table-wrap, .leaderboard-list, .vs-crosshair-preview, .reaction-stage, .dev-panel)::before,
body.page-admin :where(.card, .bbyd-card, .member-role-section, .hud-table-wrap, .dev-panel)::before,
body.page-developer :where(.card, .bbyd-card, .hud-table-wrap, .dev-panel)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 18% 0%, rgba(105, 192, 255, 0.105), transparent 24rem),
    radial-gradient(circle at 100% 22%, rgba(255, 137, 176, 0.07), transparent 24rem);
  opacity: 0.72;
}

body.page-user :where(.card, .bbyd-card, .pe-card, .vs-section, .member-role-section, .shop-type-section, .hud-table-wrap, .leaderboard-list, .vs-crosshair-preview, .reaction-stage, .dev-panel) > *,
body.page-admin :where(.card, .bbyd-card, .member-role-section, .hud-table-wrap, .dev-panel) > *,
body.page-developer :where(.card, .bbyd-card, .hud-table-wrap, .dev-panel) > * {
  position: relative;
  z-index: 1;
}

/* Admin donation management workspace */
body.page-admin #tab-donation-manage .admin-donation-shell {
  padding-top: 24px;
}

body.page-admin #tab-donation-manage .admin-donation-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.35fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-admin #tab-donation-manage .admin-donation-command-panel,
body.page-admin #tab-donation-manage .admin-donation-main-panel,
body.page-admin #tab-donation-manage .admin-donation-register-panel,
body.page-admin #tab-donation-manage .admin-donation-ledger-panel {
  border: 1px solid var(--bbyd-glass-border);
  border-radius: var(--bbyd-radius-panel);
  background: var(--bbyd-glass-bg);
  box-shadow: var(--bbyd-shadow-glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

body.page-admin #tab-donation-manage .admin-donation-command-panel {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

body.page-admin #tab-donation-manage .admin-donation-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--bbyd-gold);
}

body.page-admin #tab-donation-manage .admin-donation-command-panel h2 {
  margin: 0;
  font-family: var(--bbyd-f-kr);
  font-size: 26px;
  line-height: 1.1;
  color: var(--bbyd-ink);
}

body.page-admin #tab-donation-manage .admin-donation-command-panel > p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.7;
}

body.page-admin #tab-donation-manage .admin-donation-balance-card {
  overflow: hidden;
}

body.page-admin #tab-donation-manage .admin-donation-balance-card .fa-wallet {
  color: var(--bbyd-gold);
  font-size: 14px;
}

body.page-admin #tab-donation-manage .admin-donation-balance-card .bbyd-metric__value {
  font-size: 36px;
}

body.page-admin #tab-donation-manage .admin-donation-guide-list {
  display: grid;
  gap: 10px;
}

body.page-admin #tab-donation-manage .admin-donation-guide-list div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(236, 250, 255, 0.12);
  color: var(--bbyd-ink-2);
  font-size: 12px;
  line-height: 1.55;
}

body.page-admin #tab-donation-manage .admin-donation-guide-list span {
  font-weight: 900;
  color: var(--bbyd-ink);
}

body.page-admin #tab-donation-manage .admin-donation-main-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  min-width: 0;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-admin #tab-donation-manage .admin-donation-register-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  padding: 18px;
  min-width: 0;
  overflow: visible;
}

body.page-admin #tab-donation-manage .admin-donation-register-panel:focus-within {
  z-index: 60;
}

body.page-admin #tab-donation-manage .admin-donation-entry-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(236, 250, 255, 0.12);
  border-radius: var(--bbyd-radius-inner);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(105, 192, 255, 0.06));
}

body.page-admin #tab-donation-manage .admin-donation-entry-head p {
  max-width: 520px;
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 12px;
  line-height: 1.6;
  text-align: right;
}

body.page-admin #tab-donation-manage .admin-donation-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

body.page-admin #tab-donation-manage .admin-donation-form-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: visible !important;
}

body.page-admin #tab-donation-manage .admin-donation-form-card:focus-within {
  position: relative;
  z-index: 70;
}

body.page-admin #tab-donation-manage .admin-donation-form-card .fa-arrow-down {
  color: var(--bbyd-green);
  font-size: 14px;
}

body.page-admin #tab-donation-manage .admin-donation-form-card .fa-arrow-up {
  color: var(--bbyd-red);
  font-size: 14px;
}

body.page-admin #tab-donation-manage .admin-donation-form-card .ss-panel {
  z-index: 80;
}

body.page-admin #tab-donation-manage .admin-donation-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

body.page-admin #tab-donation-manage .admin-donation-form-grid__wide {
  grid-column: 1 / -1;
}

body.page-admin #tab-donation-manage .admin-donation-form-card .form-group {
  margin: 0;
  min-width: 0;
}

body.page-admin #tab-donation-manage .admin-donation-form-card .form-control,
body.page-admin #tab-donation-manage .admin-donation-form-card .ss-wrap {
  width: 100%;
}

body.page-admin #tab-donation-manage .admin-donation-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--bbyd-line);
}

body.page-admin #tab-donation-manage .admin-donation-form-actions .bbyd-btn {
  min-width: 132px;
}

body.page-admin #tab-donation-manage .admin-donation-withdrawal-btn {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.94), rgba(248, 113, 113, 0.72)) !important;
  border-color: rgba(254, 202, 202, 0.32) !important;
}

body.page-admin #tab-donation-manage .admin-donation-ledger-panel {
  overflow: hidden;
  min-width: 0;
}

body.page-admin #tab-donation-manage .admin-donation-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-admin #tab-donation-manage .admin-donation-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-admin #tab-donation-manage .admin-donation-table-wrap th:nth-child(4),
body.page-admin #tab-donation-manage .admin-donation-table-wrap td:nth-child(4) {
  text-align: right;
}

body.page-admin #tab-donation-manage .admin-donation-empty {
  text-align: center;
  color: var(--bbyd-dim);
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 24px 0;
}

@media (max-width: 1180px) {
  body.page-admin #tab-donation-manage .admin-donation-workspace {
    grid-template-columns: 1fr;
  }

  body.page-admin #tab-donation-manage .admin-donation-command-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px) {
  body.page-admin #tab-donation-manage .admin-donation-entry-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.page-admin #tab-donation-manage .admin-donation-command-panel,
  body.page-admin #tab-donation-manage .admin-donation-main-panel,
  body.page-admin #tab-donation-manage .admin-donation-form-card {
    padding: 16px;
  }

  body.page-admin #tab-donation-manage .admin-donation-form-grid {
    grid-template-columns: 1fr;
  }

  body.page-admin #tab-donation-manage .admin-donation-form-actions {
    justify-content: stretch;
  }

  body.page-admin #tab-donation-manage .admin-donation-entry-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.page-admin #tab-donation-manage .admin-donation-entry-head p {
    max-width: none;
    text-align: left;
  }

  body.page-admin #tab-donation-manage .admin-donation-form-actions .bbyd-btn {
    width: 100%;
  }
}

/* Admin market moderation workspace */
body.page-admin #tab-market-manage .admin-market-shell {
  padding-top: 24px;
}

body.page-admin #tab-market-manage .admin-market-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-admin #tab-market-manage .admin-market-command-panel,
body.page-admin #tab-market-manage .admin-market-main-panel,
body.page-admin #tab-market-manage .admin-market-list-panel {
  border: 1px solid var(--bbyd-glass-border);
  border-radius: var(--bbyd-radius-panel);
  background: var(--bbyd-glass-bg);
  box-shadow: var(--bbyd-shadow-glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

body.page-admin #tab-market-manage .admin-market-command-panel {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

body.page-admin #tab-market-manage .admin-market-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--bbyd-gold);
}

body.page-admin #tab-market-manage .admin-market-command-panel h2 {
  margin: 0;
  font-family: var(--bbyd-f-kr);
  font-size: 26px;
  line-height: 1.1;
  color: var(--bbyd-ink);
}

body.page-admin #tab-market-manage .admin-market-command-panel > p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.7;
}

body.page-admin #tab-market-manage .admin-market-guide-list {
  display: grid;
  gap: 9px;
}

body.page-admin #tab-market-manage .admin-market-guide-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(236, 250, 255, 0.12);
  color: var(--bbyd-ink-2);
  font-size: 12px;
  line-height: 1.5;
}

body.page-admin #tab-market-manage .admin-market-guide-list i {
  width: 16px;
  color: var(--bbyd-gold);
  text-align: center;
}

body.page-admin #tab-market-manage .admin-market-main-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 18px;
}

body.page-admin #tab-market-manage .admin-market-list-panel {
  overflow: hidden;
  min-width: 0;
}

body.page-admin #tab-market-manage .admin-market-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-admin #tab-market-manage .admin-market-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-admin #tab-market-manage .admin-market-status-filter {
  width: auto;
  min-width: 132px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}

body.page-admin #tab-market-manage .admin-market-listing-table {
  padding: 18px;
  overflow-x: auto;
}

@media (max-width: 1180px) {
  body.page-admin #tab-market-manage .admin-market-workspace {
    grid-template-columns: 1fr;
  }

  body.page-admin #tab-market-manage .admin-market-command-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  body.page-admin #tab-market-manage .admin-market-command-panel,
  body.page-admin #tab-market-manage .admin-market-main-panel,
  body.page-admin #tab-market-manage .admin-market-list-head {
    padding: 14px;
  }

  body.page-admin #tab-market-manage .admin-market-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  body.page-admin #tab-market-manage .admin-market-toolbar,
  body.page-admin #tab-market-manage .admin-market-status-filter,
  body.page-admin #tab-market-manage .admin-market-toolbar .bbyd-btn {
    width: 100%;
  }
}

/* Admin support ticket workspace */
body.page-admin .admin-support-shell {
  padding-top: 24px;
}

body.page-admin .admin-support-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-admin .admin-support-command-panel,
body.page-admin .admin-support-main-panel,
body.page-admin .admin-support-list-panel,
body.page-admin .admin-support-chat-panel {
  border: 1px solid var(--bbyd-glass-border);
  border-radius: var(--bbyd-radius-panel);
  background: var(--bbyd-glass-bg);
  box-shadow: var(--bbyd-shadow-glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

body.page-admin .admin-support-command-panel {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

body.page-admin .admin-support-command-panel__kicker {
  font-family: var(--bbyd-f-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--bbyd-cyan);
}

body.page-admin .admin-support-command-panel h2 {
  margin: 0;
  font-family: var(--bbyd-f-kr);
  font-size: 26px;
  line-height: 1.1;
  color: var(--bbyd-ink);
}

body.page-admin .admin-support-command-panel > p {
  margin: 0;
  color: var(--bbyd-ink-2);
  font-size: 13px;
  line-height: 1.7;
}

body.page-admin .admin-support-guide-list {
  display: grid;
  gap: 9px;
}

body.page-admin .admin-support-guide-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(236, 250, 255, 0.12);
  color: var(--bbyd-ink-2);
  font-size: 12px;
  line-height: 1.5;
}

body.page-admin .admin-support-guide-list i {
  width: 16px;
  color: var(--bbyd-cyan);
  text-align: center;
}

body.page-admin .admin-support-main-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 18px;
}

body.page-admin .admin-support-list-panel,
body.page-admin .admin-support-chat-panel {
  overflow: hidden;
  min-width: 0;
}

body.page-admin .admin-support-list-head,
body.page-admin .admin-support-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-admin .admin-support-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-admin .admin-support-status-filter {
  width: auto;
  min-width: 128px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}

body.page-admin .admin-support-ticket-table {
  padding: 18px;
  overflow-x: auto;
}

body.page-admin .admin-support-chat-section {
  margin-top: 0;
}

body.page-admin .admin-support-chat-head {
  justify-content: flex-start;
  padding: 14px 18px;
}

body.page-admin .admin-support-chat-body {
  padding: 18px;
}

body.page-admin .admin-support-shell--report .admin-support-command-panel__kicker,
body.page-admin .admin-support-shell--report .admin-support-guide-list i {
  color: var(--bbyd-red);
}

body.page-admin .admin-support-shell--bug .admin-support-command-panel__kicker,
body.page-admin .admin-support-shell--bug .admin-support-guide-list i {
  color: var(--bbyd-gold);
}

@media (max-width: 1180px) {
  body.page-admin .admin-support-workspace {
    grid-template-columns: 1fr;
  }

  body.page-admin .admin-support-command-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  body.page-admin .admin-support-command-panel,
  body.page-admin .admin-support-main-panel,
  body.page-admin .admin-support-list-head,
  body.page-admin .admin-support-chat-head,
  body.page-admin .admin-support-chat-body {
    padding: 14px;
  }

  body.page-admin .admin-support-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  body.page-admin .admin-support-toolbar,
  body.page-admin .admin-support-status-filter,
  body.page-admin .admin-support-toolbar .bbyd-btn {
    width: 100%;
  }
}

body.page-user :where(.card:hover, .bbyd-card:hover, .pe-card:hover, .member-role-section:hover, .shop-type-section:hover, .leaderboard-list:hover, .vs-pro-card:hover),
body.page-admin :where(.card:hover, .bbyd-card:hover, .member-role-section:hover),
body.page-developer :where(.card:hover, .bbyd-card:hover, .dev-panel:hover) {
  transform: translateY(-1px) scale(1.003);
  box-shadow: var(--bbyd-shadow-glass-hover) !important;
}

body.page-user :where(.pe-input, .form-control, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *):not([data-cell]),
body.page-admin :where(.form-control, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *):not([data-cell]),
body.page-developer :where(.form-control, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *):not([data-cell]) {
  border-radius: var(--bbyd-radius-control) !important;
  border: 1px solid rgba(236, 250, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(246, 251, 255, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 10px 24px rgba(0, 0, 0, 0.13) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.page-user :where(.btn, .bbyd-btn, .btn-primary, .btn-secondary, .btn-cancel, .member-role-button, .shop-rarity-toggle, .pinball-mode-btn, .lb-page-btn, .log-pagination button):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *),
body.page-admin :where(.btn, .bbyd-btn, .btn-primary, .btn-secondary, .btn-cancel, .member-role-button, .lb-page-btn, .log-pagination button):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *),
body.page-developer :where(.btn, .bbyd-btn, .btn-primary, .btn-secondary, .btn-cancel, .lb-page-btn, .log-pagination button):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *) {
  border-radius: 999px !important;
  border-color: rgba(236, 250, 255, 0.14) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)) !important;
  color: rgba(246, 251, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

body.page-user :where(.btn:hover, .bbyd-btn:hover, .btn-primary:hover, .btn-secondary:hover, .member-role-button:hover, .shop-rarity-toggle:hover, .pinball-mode-btn:hover):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *),
body.page-admin :where(.btn:hover, .bbyd-btn:hover, .btn-primary:hover, .btn-secondary:hover, .member-role-button:hover):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *),
body.page-developer :where(.btn:hover, .bbyd-btn:hover, .btn-primary:hover, .btn-secondary:hover):not(.ops-drive *):not([class*="ops-drive"]):not([class*="ops-drive"] *) {
  transform: translateY(-1px) scale(1.018);
  border-color: rgba(125, 221, 255, 0.34) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), 0 0 22px rgba(91, 214, 255, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.page-user :where(.btn-primary, .bbyd-btn--primary, .shop-rarity-toggle.is-active, .pinball-mode-btn.is-active),
body.page-admin :where(.btn-primary, .bbyd-btn--primary),
body.page-developer :where(.btn-primary, .bbyd-btn--primary) {
  border-color: rgba(125, 221, 255, 0.34) !important;
  background: linear-gradient(135deg, rgba(85, 205, 255, 0.24), rgba(255, 128, 170, 0.14)) !important;
  color: #f8fcff !important;
}

body.page-user :where(.pe-card__icon, .member-role-icon, .sidebar-brand__logo, .sidebar-id__avatar, .shop-rarity-box, .status-pill, .bbyd-chip, .shop-filter-count, .attendance-stamp, .leaderboard-rank),
body.page-admin :where(.member-role-icon, .sidebar-brand__logo, .sidebar-id__avatar, .status-pill, .bbyd-chip),
body.page-developer :where(.sidebar-brand__logo, .sidebar-id__avatar, .status-pill, .bbyd-chip) {
  border-radius: var(--bbyd-radius-control) !important;
  border: 1px solid rgba(236, 250, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.16);
}

body.page-user :where(.bbyd-chip, .status-pill, .shop-filter-count),
body.page-admin :where(.bbyd-chip, .status-pill),
body.page-developer :where(.bbyd-chip, .status-pill) {
  border-radius: 999px !important;
}

body.page-user :where(.shop-card-preview, .shop-item-card, .shop-inventory-card, .market-card, .attendance-day-cell, .leaderboard-row, .vs-pro-card, .vs-pro-card__photo, .vs-pro-card__crosshair, #vcCanvas, #vsCrosshairCanvas, .pinball-track, .pinball-lane, .reaction-stage__icon),
body.page-admin :where(.member-card, .leaderboard-row),
body.page-developer :where(.dev-health-card, .dev-metric-card) {
  border-radius: var(--bbyd-radius-inner) !important;
  overflow: hidden;
  border-color: rgba(236, 250, 255, 0.12) !important;
}

body.page-user :where(.card-header, .bbyd-card__head, .bbyd-metric__head, .bbyd-metric__foot, .vs-section__body, .vs-crosshair-detail, .vs-crosshair-detail-body, .vs-cross-group, .pe-image-preview, .pe-image-overlay),
body.page-admin :where(.card-header, .bbyd-card__head, .bbyd-metric__head, .bbyd-metric__foot),
body.page-developer :where(.card-header, .bbyd-card__head, .bbyd-metric__head, .bbyd-metric__foot) {
  border-radius: var(--bbyd-radius-inner) !important;
}

body.page-user .bbyd-patch-grid > *,
body.page-user .bbyd-patch-grid :where(.patch-card, .patch-badge, .patch-panel, [class*="patch"]) {
  border-radius: var(--bbyd-radius-inner) !important;
  overflow: hidden;
}

body.page-user .sidebar-bottom-menu,
body.page-admin .sidebar-bottom-menu,
body.page-developer .sidebar-bottom-menu {
  border-radius: var(--bbyd-radius-inner) var(--bbyd-radius-inner) 0 0 !important;
}

body.page-user :where(.shop-card-preview, .shop-item-card, .shop-inventory-card, .market-card, .attendance-day-cell, .leaderboard-row, .vs-pro-card) {
  background: var(--bbyd-glass-bg-quiet) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.page-user #marketListingsGrid .shop-card-preview,
body.page-user #marketMyListingsContainer .shop-card-preview,
body.page-user #marketWishlistContainer .shop-card-preview,
body.page-user .shop-item-card .shop-card-preview {
  border-radius: var(--bbyd-radius-inner) !important;
  background: var(--bbyd-glass-bg-quiet) !important;
  border: 1px solid rgba(236, 250, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

body.page-user :where(.bbyd-profile-id__avatar, .vmd-mode-tab, .vmd-counter, .vmd-pool, .vmd-map-chip, .vmd-side, .pinball-overlay, .pinball-iframe, .lg-pane, .shop-tryon-panel, .shop-price-table, .shop-tryon-nickname, .shop-tryon-receipt, #transactions-pagination),
body.page-admin :where(.admin-shop-card-actions) {
  border-radius: var(--bbyd-radius-inner) !important;
  overflow: hidden;
  border-color: rgba(236, 250, 255, 0.13) !important;
}

body.page-user :where(.vmd-mode-tab, .vmd-counter, .vmd-pool, .vmd-map-chip, .vmd-side, .lg-pane, .shop-tryon-panel, .shop-price-table, .shop-tryon-nickname, .shop-tryon-receipt),
body.page-admin :where(.admin-shop-card-actions) {
  background: var(--bbyd-glass-bg-quiet) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.page-user .vmd-mode-tab.is-active,
body.page-user .vmd-map-chip.is-on {
  background: linear-gradient(135deg, rgba(255, 123, 138, 0.18), rgba(91, 214, 255, 0.09)) !important;
  border-color: rgba(255, 123, 138, 0.42) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), 0 0 20px rgba(255, 123, 138, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.page-user .bbyd-profile-id__avatar {
  border-radius: 26px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), 0 0 22px rgba(91, 214, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.page-user :where(.embed-preview-card, .ep-container),
body.page-admin :where(.embed-preview-card, .ep-container),
body.page-developer :where(.embed-preview-card, .ep-container) {
  border-radius: var(--bbyd-radius-inner) !important;
  overflow: hidden;
}

body.page-user .embed-preview-card {
  background: var(--bbyd-glass-bg-quiet) !important;
  border: 1px solid rgba(236, 250, 255, 0.13) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26), 0 0 18px rgba(91, 214, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.page-user :where(.pinball-overlay, .pinball-iframe) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 18px 44px rgba(0, 0, 0, 0.28) !important;
}

body.page-user #transactions-pagination,
body.page-user .bbyd-card > div,
body.page-admin .bbyd-card > div,
body.page-developer .bbyd-card > div {
  border-radius: var(--bbyd-radius-inner) !important;
}

body.page-user .donation-warning-strip {
  border-radius: var(--bbyd-radius-inner) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, rgba(255, 107, 122, 0.15), rgba(255, 255, 255, 0.055)) !important;
  border: 1px solid rgba(255, 123, 138, 0.28) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.page-user .donation-warning-strip__icon {
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(255, 107, 122, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.page-admin .sq-card-footer,
body.page-admin .ete-preview-frame-body,
body.page-developer .ete-preview-frame-body,
body.page-developer :where(#rulesPageList, #coinRulesPageList).rules-preview > div,
body.page-developer .bbyd-card > div[style*="border-top"] {
  border-radius: var(--bbyd-radius-inner) !important;
  overflow: hidden;
  border-color: rgba(236, 250, 255, 0.13) !important;
}

body.page-admin .ete-preview-frame-body,
body.page-developer .ete-preview-frame-body,
body.page-developer :where(#rulesPageList, #coinRulesPageList).rules-preview > div,
body.page-developer .bbyd-card > div[style*="border-top"] {
  background: var(--bbyd-glass-bg-quiet) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.page-developer #tab-point-settings :where(.pt-layout, .pt-section, .pt-card) {
  max-width: 100%;
  min-width: 0;
}

body.page-developer #tab-point-settings .pt-cards-row {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

body.page-developer #tab-point-settings .pt-cards-row.pt-cards-half {
  display: grid !important;
}

body.page-developer #tab-point-settings .pt-cards-row.pt-cards-half > .pt-card {
  flex: initial !important;
}

body.page-developer #tab-point-settings .pt-card {
  overflow: hidden;
  border-radius: var(--bbyd-radius-inner) !important;
  background: var(--bbyd-glass-bg-quiet) !important;
}

body.page-developer #tab-point-settings .pt-field {
  flex-wrap: wrap;
}

body.page-developer #tab-point-settings .pt-field-label {
  min-width: 0;
  white-space: normal;
  font-size: 14px;
}

body.page-developer #tab-point-settings .holiday-grid {
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

body.page-developer #tab-point-settings .holiday-card {
  min-width: 0;
  border-radius: var(--bbyd-radius-inner) !important;
  overflow: hidden;
}

body.page-developer #tab-point-settings :where(.holiday-info, .holiday-name) {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.page-user .attendance-calendar-grid .attendance-day-cell:not(.empty):hover,
body.page-user :where(.leaderboard-row:hover, .shop-item-card:hover, .market-card:hover, .vs-pro-card:hover) {
  transform: translateY(-1px) scale(1.012);
  border-color: rgba(125, 221, 255, 0.27) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 18px rgba(91, 214, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.page-user .hud-table-wrap table,
body.page-admin .hud-table-wrap table,
body.page-developer .hud-table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

body.page-user .hud-table-wrap :where(th, td),
body.page-admin .hud-table-wrap :where(th, td),
body.page-developer .hud-table-wrap :where(th, td) {
  border-color: rgba(236, 250, 255, 0.08) !important;
}

body.page-user .hud-table-wrap thead th,
body.page-admin .hud-table-wrap thead th,
body.page-developer .hud-table-wrap thead th {
  background: rgba(255, 255, 255, 0.07) !important;
}

body.page-user .hud-table-wrap thead th:first-child,
body.page-admin .hud-table-wrap thead th:first-child,
body.page-developer .hud-table-wrap thead th:first-child {
  border-top-left-radius: calc(var(--bbyd-radius-panel) - 4px);
}

body.page-user .hud-table-wrap thead th:last-child,
body.page-admin .hud-table-wrap thead th:last-child,
body.page-developer .hud-table-wrap thead th:last-child {
  border-top-right-radius: calc(var(--bbyd-radius-panel) - 4px);
}

body.page-user :where(.progress, .progress-bar, .profile-progress, .level-progress, .shop-progress),
body.page-admin :where(.progress, .progress-bar, .level-progress),
body.page-developer :where(.progress, .progress-bar, .level-progress) {
  min-height: 6px;
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 12px rgba(91, 214, 255, 0.065) !important;
}

body.page-user :where(.sidebar-menu a, .sidebar-nav a, .nav-link, .bbyd-tab),
body.page-admin :where(.sidebar-menu a, .sidebar-nav a, .nav-link, .bbyd-tab),
body.page-developer :where(.sidebar-menu a, .sidebar-nav a, .nav-link, .bbyd-tab) {
  border-radius: var(--bbyd-radius-control) !important;
}

body.page-user :where(.sidebar-menu a:hover, .sidebar-menu a.active, .sidebar-nav a:hover, .sidebar-nav a.active, .nav-link:hover, .nav-link.active, .bbyd-tab:hover, .bbyd-tab.is-active),
body.page-admin :where(.sidebar-menu a:hover, .sidebar-menu a.active, .sidebar-nav a:hover, .sidebar-nav a.active, .nav-link:hover, .nav-link.active, .bbyd-tab:hover, .bbyd-tab.is-active),
body.page-developer :where(.sidebar-menu a:hover, .sidebar-menu a.active, .sidebar-nav a:hover, .sidebar-nav a.active, .nav-link:hover, .nav-link.active, .bbyd-tab:hover, .bbyd-tab.is-active) {
  background: linear-gradient(135deg, rgba(91, 214, 255, 0.16), rgba(255, 119, 168, 0.08)) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.17), 0 0 18px rgba(91, 214, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.page-user .ops-drive,
body.page-user .ops-drive * {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 640px) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    --bbyd-radius-panel: 20px;
    --bbyd-radius-card: 18px;
    --bbyd-radius-inner: 14px;
    --bbyd-radius-control: 13px;
  }

  body.page-user :where(.card, .bbyd-card, .pe-card, .vs-section, .member-role-section, .shop-type-section, .hud-table-wrap, .leaderboard-list, .reaction-stage),
  body.page-admin :where(.card, .bbyd-card, .member-role-section, .hud-table-wrap),
  body.page-developer :where(.card, .bbyd-card, .hud-table-wrap, .dev-panel) {
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  body.page-developer #tab-message-publish .bbyd-grid--2,
  body.page-developer #tab-message-publish .bbyd-card.span-2 {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
  }
}

/* SIDEBAR + MOBILE COMPOSITION POLISH */
body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  isolation: isolate;
  overscroll-behavior: contain;
}

body.page-user .sidebar-top,
body.page-admin .sidebar-top,
body.page-developer .sidebar-top {
  position: sticky;
  top: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(7, 17, 31, 0.90), rgba(7, 17, 31, 0.58) 78%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

body.page-user .sidebar-brand,
body.page-admin .sidebar-brand,
body.page-developer .sidebar-brand {
  padding: 18px 18px 14px;
  gap: 10px;
  border-bottom-color: rgba(236, 250, 255, 0.08);
}

body.page-user .sidebar-brand__logo,
body.page-admin .sidebar-brand__logo,
body.page-developer .sidebar-brand__logo {
  width: 36px;
  height: 36px;
  border-radius: 14px !important;
  clip-path: none;
}

body.page-user :where(.sidebar-id, .bbyd-sb-role, .bbyd-sb-bal),
body.page-admin :where(.sidebar-id, .bbyd-sb-role, .bbyd-sb-bal),
body.page-developer :where(.sidebar-id, .bbyd-sb-role, .bbyd-sb-bal) {
  border-radius: 18px !important;
  border: 1px solid rgba(236, 250, 255, 0.13) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(13, 28, 48, 0.48)),
    radial-gradient(circle at 18% 0%, rgba(105, 192, 255, 0.08), transparent 90%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

body.page-user .sidebar-id,
body.page-admin .sidebar-id,
body.page-developer .sidebar-id {
  margin: 0 12px 10px;
  padding: 12px;
}

body.page-user .bbyd-sb-role,
body.page-admin .bbyd-sb-role,
body.page-developer .bbyd-sb-role {
  margin: 14px 12px 10px;
  padding: 4px;
  gap: 4px;
  border-radius: 999px !important;
}

body.page-user .bbyd-sb-role a,
body.page-admin .bbyd-sb-role a,
body.page-developer .bbyd-sb-role a {
  border-radius: 999px !important;
  min-height: 34px;
  display: grid;
  place-items: center;
}

body.page-user .bbyd-sb-balances,
body.page-admin .bbyd-sb-balances,
body.page-developer .bbyd-sb-balances {
  padding: 0 12px;
  gap: 8px;
  margin-bottom: 12px;
}

body.page-user .sidebar .nav-menu,
body.page-admin .sidebar .nav-menu,
body.page-developer .sidebar .nav-menu {
  padding: 0 12px 16px;
}

body.page-user .sidebar .nav-menu .menu-group,
body.page-admin .sidebar .nav-menu .menu-group,
body.page-developer .sidebar .nav-menu .menu-group {
  padding: 14px 10px 7px;
  letter-spacing: 0.12em;
  font-size: 11px;
}

body.page-user .sidebar .nav-menu li.feature-item a,
body.page-admin .sidebar .nav-menu li.feature-item a,
body.page-developer .sidebar .nav-menu li.feature-item a,
body.page-user .sidebar-bottom-menu a,
body.page-admin .sidebar-bottom-menu a,
body.page-developer .sidebar-bottom-menu a {
  min-height: 42px;
  border-radius: 16px !important;
  border: 1px solid rgba(236, 250, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  transform-origin: center;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease !important;
}

body.page-user .sidebar .nav-menu li.feature-item a:hover,
body.page-admin .sidebar .nav-menu li.feature-item a:hover,
body.page-developer .sidebar .nav-menu li.feature-item a:hover,
body.page-user .sidebar-bottom-menu a:hover,
body.page-admin .sidebar-bottom-menu a:hover,
body.page-developer .sidebar-bottom-menu a:hover {
  transform: translateX(2px) scale(1.01);
}

body.page-user .sidebar .nav-menu li.feature-item.active a,
body.page-admin .sidebar .nav-menu li.feature-item.active a,
body.page-developer .sidebar .nav-menu li.feature-item.active a {
  border-color: rgba(125, 221, 255, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(91, 214, 255, 0.18), rgba(255, 119, 168, 0.10)),
    rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 20px rgba(91, 214, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.page-user .sidebar-bottom-menu,
body.page-admin .sidebar-bottom-menu,
body.page-developer .sidebar-bottom-menu {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 10px 12px 12px;
  border-radius: 22px 22px 0 0 !important;
  background:
    linear-gradient(0deg, rgba(5, 12, 24, 0.92), rgba(7, 17, 31, 0.66) 74%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

@media (max-width: 1024px) {
  body.page-user,
  body.page-admin,
  body.page-developer {
    --bbyd-mobile-gutter: 12px;
  }

  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: 0 !important;
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    overflow-x: clip;
  }

  body.page-user .mobile-sidebar-toggle,
  body.page-admin .mobile-sidebar-toggle,
  body.page-developer .mobile-sidebar-toggle {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    z-index: 520 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 92px;
    min-height: 44px;
    padding: 10px 15px;
    border-radius: 999px !important;
    color: rgba(247, 251, 255, 0.96);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(8, 20, 38, 0.72)),
      radial-gradient(circle at 12% 0%, rgba(105, 192, 255, 0.18), transparent 110%);
    border: 1px solid rgba(236, 250, 255, 0.18) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30), 0 0 22px rgba(91, 214, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.17) !important;
    backdrop-filter: blur(22px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
    pointer-events: auto !important;
  }

  body.page-user .mobile-sidebar-toggle i,
  body.page-admin .mobile-sidebar-toggle i,
  body.page-developer .mobile-sidebar-toggle i {
    color: var(--bbyd-cyan);
  }

  body.sidebar-mobile-open .mobile-sidebar-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-4px) scale(0.96);
  }

  body.page-user .mobile-sidebar-backdrop,
  body.page-admin .mobile-sidebar-backdrop,
  body.page-developer .mobile-sidebar-backdrop {
    z-index: 500 !important;
    background:
      radial-gradient(circle at 15% 8%, rgba(91, 214, 255, 0.12), transparent 22rem),
      rgba(1, 6, 14, 0.66) !important;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }

  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    z-index: 510 !important;
    width: min(88vw, 350px) !important;
    max-width: calc(100vw - 24px);
    height: 100dvh !important;
    border-radius: 0 28px 28px 0 !important;
    transform: translateX(calc(-100% - 18px));
    transition: transform 230ms cubic-bezier(.2,.8,.2,1), box-shadow 230ms ease;
    box-shadow: 24px 0 58px rgba(0, 0, 0, 0.42), 0 0 28px rgba(91, 214, 255, 0.08), inset -1px 0 0 rgba(255, 255, 255, 0.10) !important;
  }

  body.page-user .sidebar .nav-menu-wrapper,
  body.page-admin .sidebar .nav-menu-wrapper,
  body.page-developer .sidebar .nav-menu-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 88px;
  }

  body.page-user .sidebar .nav-menu,
  body.page-admin .sidebar .nav-menu,
  body.page-developer .sidebar .nav-menu {
    padding-bottom: 16px;
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0) !important;
  }

  body.sidebar-mobile-open {
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    margin: 8px var(--bbyd-mobile-gutter) 0 !important;
    padding: 18px 16px !important;
  }

  body.page-user .bbyd-ph__title,
  body.page-admin .bbyd-ph__title,
  body.page-developer .bbyd-ph__title {
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1.02;
  }

  body.page-user .bbyd-content,
  body.page-admin .bbyd-content,
  body.page-developer .bbyd-content,
  body.page-user .tab-content,
  body.page-admin .tab-content,
  body.page-developer .tab-content {
    padding-left: var(--bbyd-mobile-gutter) !important;
    padding-right: var(--bbyd-mobile-gutter) !important;
  }

  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    width: min(90vw, 342px) !important;
    border-radius: 0 24px 24px 0 !important;
  }

  body.page-user .sidebar .nav-menu li.feature-item a,
  body.page-admin .sidebar .nav-menu li.feature-item a,
  body.page-developer .sidebar .nav-menu li.feature-item a,
  body.page-user .sidebar-bottom-menu a,
  body.page-admin .sidebar-bottom-menu a,
  body.page-developer .sidebar-bottom-menu a {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* OPS DRIVE REDESIGN */
body.page-admin #tab-ops-drive {
  --ops-bg: #07111f;
  --ops-panel: #0d1726;
  --ops-panel-2: #101c2d;
  --ops-line: rgba(148, 163, 184, 0.20);
  --ops-line-strong: rgba(148, 163, 184, 0.32);
  --ops-ink: #f8fafc;
  --ops-muted: #94a3b8;
  --ops-blue: #38bdf8;
  --ops-green: #22c55e;
  min-height: 100vh;
  padding: 0 !important;
  background: var(--ops-bg);
}

body.page-admin #tab-ops-drive .ops-drive-shell {
  width: 100%;
  min-height: calc(100vh - 16px);
  height: calc(100vh - 16px);
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(7, 17, 31, 0.98)),
    var(--ops-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-admin #tab-ops-drive .ops-drive-sidebar,
body.page-admin #tab-ops-drive .ops-drive-main {
  min-height: 0;
  height: 100%;
  border-radius: 0 !important;
}

body.page-admin #tab-ops-drive .ops-drive-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  overflow: auto;
  border-width: 0 1px 0 0 !important;
  border-color: var(--ops-line) !important;
  background: #091321 !important;
}

body.page-admin #tab-ops-drive .ops-drive-brand {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid var(--ops-line);
}

body.page-admin #tab-ops-drive .ops-drive-brand > i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.14);
  color: var(--ops-blue);
}

body.page-admin #tab-ops-drive .ops-drive-brand strong,
body.page-admin #tab-ops-drive .ops-drive-location h1 {
  color: var(--ops-ink);
  letter-spacing: 0;
}

body.page-admin #tab-ops-drive .ops-drive-brand strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

body.page-admin #tab-ops-drive .ops-drive-brand span,
body.page-admin #tab-ops-drive .ops-drive-sidebar-label,
body.page-admin #tab-ops-drive .ops-drive-location p,
body.page-admin #tab-ops-drive .ops-drive-stats em,
body.page-admin #tab-ops-drive .ops-drive-row__open em {
  color: var(--ops-muted);
  font-size: 12px;
}

body.page-admin #tab-ops-drive .ops-drive-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.76);
  color: var(--ops-muted);
}

body.page-admin #tab-ops-drive .ops-drive-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ops-ink);
}

body.page-admin #tab-ops-drive .ops-drive-search input::placeholder {
  color: rgba(148, 163, 184, 0.76);
}

body.page-admin #tab-ops-drive .ops-drive-navgroup,
body.page-admin #tab-ops-drive .ops-drive-sidebar-section {
  display: grid;
  gap: 6px;
}

body.page-admin #tab-ops-drive .ops-drive-nav {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  color: #cbd5e1;
  background: transparent;
  font-weight: 800;
}

body.page-admin #tab-ops-drive .ops-drive-nav.is-active,
body.page-admin #tab-ops-drive .ops-drive-nav:hover {
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(56, 189, 248, 0.12);
  color: var(--ops-ink);
}

body.page-admin #tab-ops-drive .ops-drive-import-tile {
  border: 1px dashed rgba(56, 189, 248, 0.42);
  border-radius: 8px;
  padding: 12px;
  background: rgba(56, 189, 248, 0.08);
}

body.page-admin #tab-ops-drive .ops-drive-import-tile:hover,
body.page-admin #tab-ops-drive .ops-drive-dropzone:hover {
  border-color: rgba(56, 189, 248, 0.70);
  background: rgba(56, 189, 248, 0.12);
}

body.page-admin #tab-ops-drive .ops-drive-sidebar-label {
  padding: 0 4px;
  font-weight: 900;
  text-transform: uppercase;
}

body.page-admin #tab-ops-drive .ops-drive-tree {
  max-height: none;
  min-height: 120px;
  padding-right: 2px;
}

body.page-admin #tab-ops-drive .ops-drive-tree-item {
  min-height: 34px;
  border-radius: 7px;
  color: #cbd5e1;
}

body.page-admin #tab-ops-drive .ops-drive-tree-item.is-active,
body.page-admin #tab-ops-drive .ops-drive-tree-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ops-ink);
}

body.page-admin #tab-ops-drive .ops-drive-main {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  border: 0 !important;
  background: #0b1422 !important;
}

body.page-admin #tab-ops-drive .ops-drive-main-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  min-height: 86px;
  padding: 4px 2px 12px;
  border-bottom: 1px solid var(--ops-line);
}

body.page-admin #tab-ops-drive .ops-drive-breadcrumbs {
  min-height: 22px;
  margin-bottom: 4px;
}

body.page-admin #tab-ops-drive .ops-drive-breadcrumbs button {
  border-radius: 5px;
  padding: 2px 4px;
  color: var(--ops-muted);
}

body.page-admin #tab-ops-drive .ops-drive-breadcrumbs button:hover {
  color: var(--ops-ink);
  background: rgba(255, 255, 255, 0.06);
}

body.page-admin #tab-ops-drive .ops-drive-location h1 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 28px;
  line-height: 1.08;
}

body.page-admin #tab-ops-drive .ops-drive-location p {
  margin: 7px 0 0;
}

body.page-admin #tab-ops-drive .ops-drive-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 8px;
  min-width: min(360px, 38vw);
}

body.page-admin #tab-ops-drive .ops-drive-stats span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
}

body.page-admin #tab-ops-drive .ops-drive-stats strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ops-ink);
  font-size: 16px;
}

body.page-admin #tab-ops-drive .ops-drive-toolbar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  margin: 0;
}

body.page-admin #tab-ops-drive .ops-drive-toolbar-status,
body.page-admin #tab-ops-drive .ops-drive-view-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.page-admin #tab-ops-drive .ops-drive-view-controls {
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.page-admin #tab-ops-drive .ops-drive-create-menu > summary,
body.page-admin #tab-ops-drive .ops-drive-view-controls .btn-sm,
body.page-admin #tab-ops-drive .ops-drive-row__actions .btn-sm {
  min-width: 34px;
  height: 34px;
  border-radius: 7px;
}

body.page-admin #tab-ops-drive .ops-drive-create-menu > summary {
  padding: 7px 12px;
  white-space: nowrap;
}

body.page-admin #tab-ops-drive .ops-drive-view-controls select {
  min-width: 136px;
  height: 34px;
  border-color: var(--ops-line-strong);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.86);
  color: var(--ops-ink);
}

body.page-admin #tab-ops-drive .ops-drive-notice {
  max-width: min(520px, 100%);
  border-radius: 7px;
  padding: 8px 10px;
}

body.page-admin #tab-ops-drive .ops-drive-dropzone {
  flex: 0 0 auto;
  min-height: 70px;
  margin: 0;
  border: 1px dashed rgba(148, 163, 184, 0.30) !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.38);
}

body.page-admin #tab-ops-drive .ops-drive-dropzone.is-compact {
  min-height: 52px;
  padding: 10px 12px;
}

body.page-admin #tab-ops-drive .ops-drive-list {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 2px;
}

body.page-admin #tab-ops-drive .ops-drive-row {
  grid-template-columns: 30px minmax(180px, 1fr) minmax(170px, auto) auto;
  min-height: 58px;
  border: 1px solid var(--ops-line);
  border-radius: 8px !important;
  padding: 8px 10px;
  background: var(--ops-panel) !important;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

body.page-admin #tab-ops-drive .ops-drive-row:hover {
  border-color: rgba(56, 189, 248, 0.34);
  background: var(--ops-panel-2) !important;
}

body.page-admin #tab-ops-drive .ops-drive-row.is-selected {
  border-color: rgba(56, 189, 248, 0.62);
  background: rgba(14, 116, 144, 0.20) !important;
}

body.page-admin #tab-ops-drive .ops-drive-row__open {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon kind";
  gap: 2px 10px;
}

body.page-admin #tab-ops-drive .ops-drive-row__open > i {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.10);
  color: var(--ops-blue);
}

body.page-admin #tab-ops-drive .ops-drive-row__open span {
  grid-area: title;
  min-width: 0;
  align-self: end;
  color: var(--ops-ink);
  font-weight: 850;
}

body.page-admin #tab-ops-drive .ops-drive-row__open em {
  grid-area: kind;
  align-self: start;
  font-style: normal;
}

body.page-admin #tab-ops-drive .ops-drive-row__meta {
  color: var(--ops-muted);
  line-height: 1.45;
}

body.page-admin #tab-ops-drive .ops-drive-row__actions {
  gap: 6px;
  position: relative;
}

body.page-admin #tab-ops-drive .ops-drive-row__actions .btn-sm {
  padding: 0;
}

body.page-admin #tab-ops-drive .ops-drive-row-menu > summary {
  width: 34px;
  height: 34px;
  padding: 0;
}

body.page-admin #tab-ops-drive .ops-drive-row-menu .ops-drive-menu__panel {
  top: calc(100% + 6px);
  min-width: 176px;
}

body.page-admin #tab-ops-drive .ops-drive-row-menu .ops-drive-menu__panel button[data-ops-drive-delete] {
  color: #fca5a5;
}

body.page-admin #tab-ops-drive .ops-drive-list.is-grid {
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 10px;
}

body.page-admin #tab-ops-drive .ops-drive-list.is-grid .ops-drive-row {
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 156px;
  align-content: start;
  gap: 10px;
}

body.page-admin #tab-ops-drive .ops-drive-list.is-grid .ops-drive-row__open {
  grid-template-columns: 1fr;
  grid-template-areas: "icon" "title" "kind";
}

body.page-admin #tab-ops-drive .ops-drive-list.is-grid .ops-drive-row__open > i {
  width: 42px;
  height: 42px;
}

body.page-admin #tab-ops-drive .ops-drive-list.is-grid .ops-drive-row__actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

body.page-admin #tab-ops-drive .ops-drive-menu__panel {
  border-color: var(--ops-line-strong);
  background: #0b1422;
}

body.page-admin #tab-ops-drive .ops-drive-empty {
  min-height: 320px;
  border-color: var(--ops-line);
  background: rgba(15, 23, 42, 0.42);
}

body.page-admin #tab-ops-drive .ops-drive-row[draggable="true"] {
  cursor: grab;
}

body.page-admin #tab-ops-drive .ops-drive-row[draggable="true"]:active {
  cursor: grabbing;
}

body.page-admin #tab-ops-drive .ops-drive-row.is-dragging-drive-item {
  opacity: 0.48;
  transform: scale(0.992);
}

body.page-admin #tab-ops-drive.is-drive-dragging :where(.ops-drive-row[data-type="folder"], .ops-drive-tree-item, .ops-drive-breadcrumbs button, .ops-drive-nav[data-ops-drive-view="files"]) {
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body.page-admin #tab-ops-drive :where(.ops-drive-row[data-type="folder"], .ops-drive-tree-item, .ops-drive-breadcrumbs button, .ops-drive-nav[data-ops-drive-view="files"]).is-drive-drop-target {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.55) !important;
  background: rgba(56, 189, 248, 0.16) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.20) inset !important;
}

@media (max-width: 1180px) {
  body.page-admin #tab-ops-drive .ops-drive-main-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.page-admin #tab-ops-drive .ops-drive-stats {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  body.page-admin #tab-ops-drive .ops-drive-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 16px);
    overflow: visible;
  }

  body.page-admin #tab-ops-drive .ops-drive-sidebar {
    height: auto;
    max-height: none;
    border-width: 0 0 1px 0 !important;
  }

  body.page-admin #tab-ops-drive .ops-drive-main {
    min-height: 70vh;
  }

  body.page-admin #tab-ops-drive .ops-drive-toolbar {
    grid-template-columns: 1fr;
  }

  body.page-admin #tab-ops-drive .ops-drive-view-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  body.page-admin #tab-ops-drive .ops-drive-main,
  body.page-admin #tab-ops-drive .ops-drive-sidebar {
    padding: 12px;
  }

  body.page-admin #tab-ops-drive .ops-drive-stats {
    grid-template-columns: 1fr;
  }

  body.page-admin #tab-ops-drive .ops-drive-row {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      "check title"
      "meta meta"
      "actions actions";
  }

  body.page-admin #tab-ops-drive .ops-drive-row__check { grid-area: check; }
  body.page-admin #tab-ops-drive .ops-drive-row__open { grid-area: title; }
  body.page-admin #tab-ops-drive .ops-drive-row__meta { grid-area: meta; }
  body.page-admin #tab-ops-drive .ops-drive-row__actions {
    grid-area: actions;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* ===== style-shell-refresh.css ===== */
/* 2026 shell refresh: final layout layer for user/admin/developer panels. */

:root {
  --bbyd-shell-nav-w: 292px;
  --bbyd-shell-gap: 22px;
  --bbyd-shell-radius: 8px;
  --bbyd-shell-line: rgba(226, 232, 240, 0.16);
  --bbyd-shell-panel: rgba(8, 13, 24, 0.76);
  --bbyd-shell-panel-strong: rgba(11, 18, 32, 0.92);
  --bbyd-shell-ink: #f8fafc;
  --bbyd-shell-muted: #a9b4c6;
  --bbyd-shell-blue: #38bdf8;
  --bbyd-shell-rose: #fb7185;
  --bbyd-shell-green: #34d399;
  --bbyd-shell-gold: #fbbf24;
}

body.page-user,
body.page-admin,
body.page-developer {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(56, 189, 248, 0.12), transparent 34%),
    linear-gradient(240deg, rgba(251, 113, 133, 0.12), transparent 34%),
    linear-gradient(180deg, #070b12 0%, #0d1220 48%, #090b10 100%);
}

body.page-user::before,
body.page-admin::before,
body.page-developer::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.88), transparent 86%);
}

@media (min-width: 901px) {
  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    left: 18px;
    top: 18px;
    bottom: 18px;
    width: var(--bbyd-shell-nav-w);
    height: auto;
    border: 1px solid var(--bbyd-shell-line);
    border-radius: var(--bbyd-shell-radius);
    background:
      linear-gradient(180deg, rgba(13, 20, 34, 0.94), rgba(6, 10, 18, 0.96)),
      radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.16), transparent 32%);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
  }

  body.page-user .sidebar::after,
  body.page-admin .sidebar::after,
  body.page-developer .sidebar::after {
    top: 14px;
    right: 0;
    bottom: 14px;
    height: auto;
    width: 2px;
    opacity: 0.9;
    background: linear-gradient(180deg, var(--bbyd-shell-blue), var(--bbyd-shell-rose), var(--bbyd-shell-gold));
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.18);
  }

  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: calc(var(--bbyd-shell-nav-w) + 40px);
    min-height: 100vh;
    padding: 16px 26px 56px 0;
    background: transparent;
  }
}

body.page-user .sidebar-brand,
body.page-admin .sidebar-brand,
body.page-developer .sidebar-brand {
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--bbyd-shell-radius);
  background: rgba(255,255,255,0.055);
}

body.page-user .sidebar-brand__name,
body.page-admin .sidebar-brand__name,
body.page-developer .sidebar-brand__name {
  font-size: 22px;
  letter-spacing: 0;
}

body.page-user .sidebar-id,
body.page-admin .sidebar-id,
body.page-developer .sidebar-id,
body.page-user .bbyd-sb-bal,
body.page-admin .bbyd-sb-bal,
body.page-developer .bbyd-sb-bal,
body.page-user .bbyd-sb-role,
body.page-admin .bbyd-sb-role,
body.page-developer .bbyd-sb-role {
  border-radius: var(--bbyd-shell-radius) !important;
}

body.page-user .feature-item a,
body.page-admin .feature-item a,
body.page-developer .feature-item a {
  border-radius: var(--bbyd-shell-radius);
}

body.page-user .feature-item.active a,
body.page-admin .feature-item.active a,
body.page-developer .feature-item.active a {
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(251, 113, 133, 0.12)),
    rgba(255,255,255,0.055);
  border-color: rgba(125, 211, 252, 0.28);
}

body.page-user .bbyd-ph,
body.page-admin .bbyd-ph,
body.page-developer .bbyd-ph {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  margin: 0 0 20px;
  padding: 28px 32px;
  border: 1px solid var(--bbyd-shell-line);
  border-radius: var(--bbyd-shell-radius);
  background:
    linear-gradient(120deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.66)),
    radial-gradient(circle at 8% 20%, rgba(56, 189, 248, 0.22), transparent 26rem),
    radial-gradient(circle at 88% 12%, rgba(251, 191, 36, 0.14), transparent 20rem);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

body.page-user .bbyd-ph::after,
body.page-admin .bbyd-ph::after,
body.page-developer .bbyd-ph::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bbyd-shell-blue), var(--bbyd-shell-rose), var(--bbyd-shell-gold));
  opacity: 0.9;
}

body.page-user .bbyd-ph__title,
body.page-admin .bbyd-ph__title,
body.page-developer .bbyd-ph__title {
  max-width: 980px;
  color: var(--bbyd-shell-ink);
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: 0;
}

body.page-user .bbyd-ph__sub,
body.page-admin .bbyd-ph__sub,
body.page-developer .bbyd-ph__sub {
  max-width: 860px;
  color: var(--bbyd-shell-muted);
}

body.page-user .bbyd-content,
body.page-admin .bbyd-content,
body.page-developer .bbyd-content {
  padding: 0;
}

body.page-user :where([class*="-workspace"]),
body.page-admin :where([class*="-workspace"]),
body.page-developer :where([class*="-workspace"]) {
  gap: var(--bbyd-shell-gap);
}

body.page-user .bbyd-content > :where([class*="-workspace"]),
body.page-admin .bbyd-content > :where([class*="-workspace"]),
body.page-developer .bbyd-content > :where([class*="-workspace"]) {
  display: grid;
  grid-template-columns: minmax(248px, 320px) minmax(0, 1fr);
  align-items: start;
}

body.page-admin #tab-donation-manage .admin-donation-workspace {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

body.page-admin #tab-donation-manage .admin-donation-main-panel {
  grid-template-columns: 1fr;
}

body.page-admin #tab-donation-manage .admin-donation-entry-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-admin #tab-donation-manage .admin-donation-form-grid {
  grid-template-columns: 1fr;
}

body.page-admin #tab-donation-manage .admin-donation-form-grid__wide {
  grid-column: 1 / -1;
}

body.page-admin #tab-donation-manage .admin-donation-entry-head {
  align-items: flex-start;
  flex-direction: column;
}

body.page-admin #tab-donation-manage .admin-donation-entry-head p {
  max-width: none;
  text-align: left;
}

body.page-user :where(.bbyd-card, .card, .dev-panel, .hud-table-wrap, [class*="-command-panel"], [class*="-main-panel"], [class*="-register-panel"], [class*="-ledger-panel"]),
body.page-admin :where(.bbyd-card, .card, .dev-panel, .hud-table-wrap, [class*="-command-panel"], [class*="-main-panel"], [class*="-register-panel"], [class*="-ledger-panel"]),
body.page-developer :where(.bbyd-card, .card, .dev-panel, .hud-table-wrap, [class*="-command-panel"], [class*="-main-panel"], [class*="-register-panel"], [class*="-ledger-panel"]) {
  border-radius: var(--bbyd-shell-radius) !important;
  border-color: var(--bbyd-shell-line) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(8, 13, 24, 0.76)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

body.page-user :where([class*="-command-panel"]),
body.page-admin :where([class*="-command-panel"]),
body.page-developer :where([class*="-command-panel"]) {
  position: sticky;
  top: 18px;
  min-width: 0;
}

body.page-user :where(.data-table, .table-responsive table),
body.page-admin :where(.data-table, .table-responsive table),
body.page-developer :where(.data-table, .table-responsive table) {
  border-collapse: separate;
  border-spacing: 0;
}

body.page-user .data-table.table-sticky-first,
body.page-admin .data-table.table-sticky-first,
body.page-developer .data-table.table-sticky-first {
  overflow: visible;
}

body.page-user :where(.data-table th, .table-responsive th),
body.page-admin :where(.data-table th, .table-responsive th),
body.page-developer :where(.data-table th, .table-responsive th) {
  background: rgba(15, 23, 42, 0.96) !important;
  color: #dbeafe;
  font-size: 12px;
  letter-spacing: 0;
}

body.page-user :where(.form-control, input, select, textarea),
body.page-admin :where(.form-control, input, select, textarea),
body.page-developer :where(.form-control, input, select, textarea) {
  border-radius: var(--bbyd-shell-radius) !important;
}

body.page-user :where(.bbyd-btn, .btn-primary, .btn-secondary, button),
body.page-admin :where(.bbyd-btn, .btn-primary, .btn-secondary, button),
body.page-developer :where(.bbyd-btn, .btn-primary, .btn-secondary, button) {
  border-radius: var(--bbyd-shell-radius);
}

body.page-admin #tab-donation-manage .admin-donation-form-card {
  min-height: 100%;
  padding: 18px;
}

body.page-admin #tab-donation-manage .admin-donation-form-actions {
  justify-content: stretch;
}

body.page-admin #tab-donation-manage .admin-donation-form-actions .bbyd-btn {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 900px) {
  body.page-admin #tab-donation-manage .admin-donation-entry-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  body.page-user .bbyd-content > :where([class*="-workspace"]),
  body.page-admin .bbyd-content > :where([class*="-workspace"]),
  body.page-developer .bbyd-content > :where([class*="-workspace"]),
  body.page-admin #tab-donation-manage .admin-donation-workspace {
    grid-template-columns: 1fr;
  }

  body.page-user :where([class*="-command-panel"]),
  body.page-admin :where([class*="-command-panel"]),
  body.page-developer :where([class*="-command-panel"]) {
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px) {
  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: 0;
    padding: 62px 12px 32px;
  }

  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    min-height: 132px;
    padding: 22px 18px;
    grid-template-columns: 1fr;
  }

  body.page-user .bbyd-ph__title,
  body.page-admin .bbyd-ph__title,
  body.page-developer .bbyd-ph__title {
    font-size: clamp(28px, 9vw, 38px);
  }
}

@media (max-width: 560px) {
  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    margin-bottom: 14px;
  }

  body.page-admin #tab-donation-manage .admin-donation-form-card {
    padding: 14px;
  }
}

/* ===== style-industrial-redesign.css ===== */
/* Dark one-screen redesign — final visual layer for the bbangyadan web shell. */

:root {
  --font-brand: 'Noto Sans KR', sans-serif;
  --font-display: 'Noto Sans KR', sans-serif;
  --font-tactical: 'Noto Sans KR', sans-serif;
  --font-ui: 'Noto Sans KR', sans-serif;
  --bg-dark: #050605;
  --bg-card: #0B0D0B;
  --bg-card-hover: #111410;
  --bg-elevated: #111410;
  --text: #F4F7EF;
  --text-muted: #9CA68F;
  --text-secondary: #B9C2AD;
  --border: rgba(198, 255, 74, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(198, 255, 74, 0.48);
  --accent: #C6FF4A;
  --accent-hover: #C6FF4A;
  --accent-light: #C6FF4A;
  --accent-glow: rgba(198, 255, 74, 0.18);
  --accent-surface: rgba(198, 255, 74, 0.08);
  --success: #00E676;
  --success-surface: rgba(0, 230, 118, 0.1);
  --danger: #FF3B30;
  --danger-surface: rgba(255, 59, 48, 0.1);
  --warning: #FFB800;
  --warning-surface: rgba(255, 184, 0, 0.1);
  --info: #C6FF4A;
  --info-surface: rgba(198, 255, 74, 0.08);
  --glass-bg: #0B0C0A;
  --glass-bg-strong: #000000;
  --glass-blur: none;
  --glass-border: rgba(198, 255, 74, 0.22);
  --glass-highlight: none;
  --neon-accent: none;
  --neon-success: none;
  --neon-danger: none;
  --neon-gold: none;
  --neon-cyan: none;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-glow: none;
  --shadow-card-hover: none;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;
}

html {
  background: #000000;
  overflow: hidden;
}

body {
  background: #050605 !important;
  background-image:
    linear-gradient(rgba(198, 255, 74, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 255, 74, 0.028) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  font-variant-numeric: tabular-nums;
  overflow: hidden !important;
}

body.page-user,
body.page-admin,
body.page-developer {
  height: 100dvh;
  min-height: 100dvh;
}

body.page-user::before,
body.page-admin::before,
body.page-developer::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(198, 255, 74, 0.18);
  z-index: 0;
}

:where(.user-bg-layer, .admin-bg-layer, .dev-bg-layer, .user-particles, .admin-particles, .dev-particles, .dev-strip, .sidebar-bracket) {
  display: none !important;
}

* {
  letter-spacing: 0 !important;
}

a {
  color: var(--accent);
}

::selection {
  background: var(--accent);
  color: #000000;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #0B0C0A;
  border: 1px solid var(--border);
  border-radius: 0;
}

:focus-visible {
  outline: 1px solid var(--accent) !important;
  outline-offset: 2px;
}

.sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: 292px !important;
  background: #000000 !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  z-index: 10 !important;
}

.sidebar::before,
.sidebar::after {
  display: none !important;
}

.sidebar-top {
  padding: 18px !important;
  border-bottom: 1px solid var(--border) !important;
  background: #0B0C0A !important;
}

.sidebar-brand {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  color: var(--text) !important;
  text-decoration: none !important;
  margin: 0 0 14px !important;
}

.sidebar-brand__logo {
  display: none !important;
}

.sidebar-brand__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.sidebar-brand__copy {
  min-width: 0;
}

.sidebar-brand__name,
.sidebar-brand__label {
  display: block !important;
  font-family: var(--font-ui) !important;
}

.sidebar-brand__name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.sidebar-brand__label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
}

.bbyd-sb-role {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 0 14px !important;
  border: 1px solid var(--border-subtle) !important;
  background: #000000 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.bbyd-sb-role a {
  padding: 8px 6px !important;
  color: var(--text-muted) !important;
  border-right: 1px solid var(--border-subtle) !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 11px !important;
}

.bbyd-sb-role a:last-child {
  border-right: 0 !important;
}

.bbyd-sb-role a.active {
  background: var(--accent) !important;
  color: #000000 !important;
}

.sidebar-id {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  border: 1px solid var(--border-subtle) !important;
  background: #000000 !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.sidebar-id:hover {
  border-color: var(--accent) !important;
  transform: none !important;
}

.sidebar-id__avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
}

.sidebar-id__name {
  color: var(--text) !important;
  font-weight: 700 !important;
}

.sidebar-id__meta,
.sidebar-id__currency,
.sidebar-id__sep {
  color: var(--text-muted) !important;
}

.bbyd-sb-balances {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border: 1px solid var(--border-subtle) !important;
  border-top: 0 !important;
}

.bbyd-sb-bal {
  padding: 10px !important;
  background: #000000 !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
}

.bbyd-sb-bal:last-child {
  border-right: 0 !important;
}

.bbyd-sb-bal__label {
  color: var(--text-muted) !important;
  font-size: 10px !important;
}

.bbyd-sb-bal__value {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.nav-menu-wrapper {
  min-height: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
}

.nav-menu-wrapper::after {
  display: none !important;
}

.sidebar .nav-menu {
  height: 100% !important;
  overflow: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar .nav-menu li {
  list-style: none !important;
}

.sidebar .nav-menu .menu-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
  background: #0B0C0A !important;
  margin: 10px 0 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.sidebar .nav-menu .menu-divider {
  height: 1px !important;
  background: var(--border-subtle) !important;
  margin: 10px 0 !important;
}

.sidebar .nav-menu a {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.sidebar .nav-menu a::before {
  display: none !important;
}

.sidebar .nav-menu a:hover,
.sidebar .nav-menu li.active a,
.sidebar .nav-menu li.feature-item.active a {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: #0B0C0A !important;
  transform: none !important;
}

.sidebar .nav-menu i {
  color: inherit !important;
  font-size: 13px !important;
}

.sidebar-bottom-menu {
  display: grid !important;
  gap: 0 !important;
  padding: 12px !important;
  border-top: 1px solid var(--border) !important;
  background: #0B0C0A !important;
}

.sidebar-bottom-menu::before {
  display: none !important;
}

.sidebar-bottom-menu a {
  border: 1px solid var(--border-subtle) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: #000000 !important;
  color: var(--text-muted) !important;
  padding: 10px !important;
  text-decoration: none !important;
}

.sidebar-bottom-menu a:last-child {
  border-bottom: 1px solid var(--border-subtle) !important;
}

.sidebar-bottom-menu a:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: none !important;
}

.main-content {
  position: relative !important;
  margin-left: 292px !important;
  padding: 12px !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 1 !important;
}

.bbyd-shell-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--border);
  background: #0B0C0A;
}

.bbyd-shell-header__scope {
  display: inline-block;
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.bbyd-shell-header h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 4vw, 46px);
  line-height: 0.98;
}

.bbyd-shell-header__meta {
  display: flex;
  gap: 0;
  justify-content: end;
  align-items: center;
}

.bbyd-shell-header__meta span {
  border: 1px solid var(--border-subtle);
  padding: 8px 10px;
  color: var(--text-muted);
  background: #000000;
}

.tab-content {
  background: transparent !important;
  border-radius: 0 !important;
  transform: scale(var(--fit-scale, 1));
  transform-origin: top left;
  overflow: hidden !important;
  max-height: none !important;
}

:where(.bbyd-card, .card, .home-dashboard-card, .stat-card, .setting-card, .dev-panel, .developer-card, .admin-card, .market-card, .profile-card, .support-card, .event-card, .map-card, .role-card, .feature-card, .modal-content, .swal2-popup, .hud-table-wrap, .table-responsive, [class*="-card"], [class*="-panel"], [class*="-surface"], [class*="-box"], [class*="-wrap"]) {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: #0B0C0A !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:where(.bbyd-card, .card, .home-dashboard-card, .stat-card, .setting-card, .dev-panel, .developer-card, .admin-card, .market-card, .profile-card, .support-card, .event-card, .map-card, .role-card, .feature-card):hover {
  border-color: var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
}

:where(.card-header, .section-header, .panel-header, .dev-panel__header, .admin-section-header, .home-section-header) {
  border-bottom: 1px solid var(--border-subtle) !important;
  background: #000000 !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}

:where(h1, h2, h3, h4, h5, h6, p, span, label, small, strong, button, input, select, textarea, th, td, a, li, summary, dd, dt) {
  font-family: var(--font-ui) !important;
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--text) !important;
  font-weight: 700 !important;
}

:where(p, small, label, .empty, .text-muted, .muted, .card-subtitle, .section-subtitle) {
  color: var(--text-muted) !important;
}

:where(.stat-value, .metric-value, .dashboard-stat-value, .bbyd-number, .points, .coins, [class*="__value"]) {
  font-variant-numeric: tabular-nums !important;
}

:where(button, .btn, .bbyd-btn, .btn-primary, .btn-secondary, .btn-add, .btn-cancel, .btn-confirm, .status-pill, .pill, .badge, .tag, .chip, .filter-chip) {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: #000000 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
}

:where(button, .btn, .bbyd-btn, .btn-primary, .btn-add, .btn-confirm):hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: #0B0C0A !important;
  transform: none !important;
}

:where(.btn-primary, .btn-confirm, .is-primary, .active > button, button.active, .status-pill.up) {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #000000 !important;
}

:where(input, select, textarea, .form-control, .search-input, .admin-nav-search-input) {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: #000000 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
}

:where(input, select, textarea, .form-control):focus {
  border-color: var(--accent) !important;
  outline: 1px solid var(--accent) !important;
  box-shadow: none !important;
}

:where(.data-table, table) {
  border-collapse: collapse !important;
  background: #000000 !important;
  color: var(--text) !important;
}

:where(.data-table th, .data-table td, table th, table td) {
  border: 1px solid var(--border-subtle) !important;
  background: #000000 !important;
  color: var(--text) !important;
}

:where(.data-table th, table th) {
  background: #0B0C0A !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

:where(.data-table tbody tr:hover td, table tbody tr:hover td) {
  background: #11120F !important;
}

:where(.modal, .swal2-container) {
  background: rgba(0, 0, 0, 0.84) !important;
  backdrop-filter: none !important;
}

:where(.mobile-sidebar-toggle) {
  border: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  background: #000000 !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.mobile-sidebar-backdrop {
  background: rgba(0, 0, 0, 0.76) !important;
  backdrop-filter: none !important;
}

.site-footer {
  border-top: 1px solid var(--border) !important;
  background: #000000 !important;
}

.site-footer__link:hover {
  color: var(--accent) !important;
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 180ms linear;
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
    padding: 70px 14px 18px !important;
  }

  .bbyd-shell-header {
    grid-template-columns: 1fr;
  }

  .bbyd-shell-header__meta {
    justify-content: start;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .sidebar {
    width: min(88vw, 320px) !important;
  }

  .main-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Hoomeee-inspired dark dashboard layer. Keep this last. */
:root {
  --bg-dark: #151615;
  --bg-card: #1f211f;
  --bg-card-hover: #252a27;
  --bg-elevated: #1a1b1a;
  --text: #f4f5f1;
  --text-muted: #8f968e;
  --text-secondary: #c8cec5;
  --border: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(0, 184, 148, 0.42);
  --accent: #009b82;
  --accent-hover: #00b894;
  --accent-light: #9bf2d7;
  --accent-glow: rgba(0, 155, 130, 0.18);
  --accent-surface: rgba(0, 155, 130, 0.12);
  --success: #0d9b55;
  --success-surface: rgba(13, 155, 85, 0.14);
  --danger: #e45858;
  --danger-surface: rgba(228, 88, 88, 0.14);
  --warning: #b86f20;
  --warning-surface: rgba(184, 111, 32, 0.15);
  --info: #2f6fed;
  --info-surface: rgba(47, 111, 237, 0.14);
  --glass-bg: #1f211f;
  --glass-bg-strong: #252a27;
  --glass-border: rgba(255, 255, 255, 0.07);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-full: 999px;
}

html {
  background: var(--bg-dark);
}

body {
  background: var(--bg-dark) !important;
  background-image:
    radial-gradient(circle at 86% 6%, rgba(0, 184, 148, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%) !important;
  background-size: auto !important;
}

body.page-user::before,
body.page-admin::before,
body.page-developer::before {
  display: none;
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

::-webkit-scrollbar-track {
  background: #151615;
}

::-webkit-scrollbar-thumb {
  background: #303531;
  border: 2px solid #151615;
  border-radius: 999px;
}

:focus-visible {
  outline: 2px solid var(--accent-hover) !important;
  outline-offset: 2px;
}

.sidebar {
  width: 276px !important;
  background: #1a1b1a !important;
  border-right: 1px solid var(--border) !important;
  padding: 12px !important;
}

.sidebar-top {
  padding: 0 0 14px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.sidebar-brand {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  margin: 0 0 14px !important;
}

.sidebar-brand__mark {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--accent) !important;
  color: #ffffff !important;
}

.sidebar-brand__name {
  font-size: 17px !important;
}

.bbyd-sb-role {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: #151615 !important;
}

.bbyd-sb-role a {
  border-right: 0 !important;
  border-radius: 10px !important;
}

.bbyd-sb-role a.active {
  background: var(--accent) !important;
  color: #ffffff !important;
}

.sidebar-id,
.bbyd-sb-bal,
.sidebar-bottom-menu a {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: var(--bg-card) !important;
}

.sidebar-id__avatar {
  border-radius: 14px !important;
  border: 0 !important;
}

.bbyd-sb-balances {
  gap: 8px !important;
  border: 0 !important;
  margin-top: 8px !important;
}

.bbyd-sb-bal {
  border-right: 1px solid var(--border) !important;
}

.bbyd-sb-bal__value {
  color: var(--accent-hover) !important;
}

.nav-menu-wrapper {
  padding: 4px 0 !important;
}

.sidebar .nav-menu {
  padding-right: 2px !important;
}

.sidebar .nav-menu .menu-group {
  min-height: 30px !important;
  margin: 12px 0 6px !important;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-muted) !important;
}

.sidebar .nav-menu a,
.sidebar-bottom-menu a {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}

.sidebar .nav-menu a:hover,
.sidebar .nav-menu li.active a,
.sidebar .nav-menu li.feature-item.active a,
.sidebar-bottom-menu a:hover {
  color: #ffffff !important;
  background: var(--accent) !important;
}

.sidebar-bottom-menu {
  gap: 8px !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
}

.sidebar-bottom-menu a:last-child {
  border-bottom: 0 !important;
}

.main-content {
  margin-left: 276px !important;
  padding: 16px !important;
}

.bbyd-shell-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #1a1b1a;
}

.bbyd-shell-header__scope {
  margin-bottom: 5px;
  color: var(--accent-light);
}

.bbyd-shell-header h1 {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
}

.bbyd-shell-header__meta {
  gap: 8px;
}

.bbyd-shell-header__meta span {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
}

.tab-content {
  border-radius: 0 !important;
}

:where(.bbyd-card, .card, .home-dashboard-card, .stat-card, .setting-card, .dev-panel, .developer-card, .admin-card, .market-card, .profile-card, .support-card, .event-card, .map-card, .role-card, .feature-card, .modal-content, .swal2-popup, .hud-table-wrap, .table-responsive, [class*="-card"], [class*="-panel"], [class*="-surface"], [class*="-box"], [class*="-wrap"]) {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: var(--bg-card) !important;
  box-shadow: none !important;
}

:where(.bbyd-card, .card, .home-dashboard-card, .stat-card, .setting-card, .dev-panel, .developer-card, .admin-card, .market-card, .profile-card, .support-card, .event-card, .map-card, .role-card, .feature-card):hover {
  border-color: rgba(0, 184, 148, 0.28) !important;
  background: var(--bg-card-hover) !important;
}

:where(.card-header, .section-header, .panel-header, .dev-panel__header, .admin-section-header, .home-section-header) {
  border-bottom: 1px solid var(--border) !important;
  border-radius: 16px 16px 0 0 !important;
  background: transparent !important;
}

:where(.bbyd-card--accent, .stat-card:nth-child(4n+1), .dashboard-stat-card:nth-child(4n+1), .home-metrics-grid > *:nth-child(4n+1)) {
  background: #2f6fed !important;
  color: #ffffff !important;
}

:where(.bbyd-card--cyan, .stat-card:nth-child(4n+2), .dashboard-stat-card:nth-child(4n+2), .home-metrics-grid > *:nth-child(4n+2)) {
  background: #0d9b55 !important;
  color: #ffffff !important;
}

:where(.bbyd-card--gold, .stat-card:nth-child(4n+3), .dashboard-stat-card:nth-child(4n+3), .home-metrics-grid > *:nth-child(4n+3)) {
  background: #b86f20 !important;
  color: #ffffff !important;
}

:where(.bbyd-card--green, .stat-card:nth-child(4n+4), .dashboard-stat-card:nth-child(4n+4), .home-metrics-grid > *:nth-child(4n+4)) {
  background: #505a5d !important;
  color: #ffffff !important;
}

:where(.bbyd-card--accent, .bbyd-card--cyan, .bbyd-card--gold, .bbyd-card--green, .stat-card, .dashboard-stat-card, .home-metrics-grid > *) :where(h1, h2, h3, h4, p, span, small, strong, div) {
  color: inherit !important;
}

:where(.bbyd-card__title, .metric-label, .stat-label, .dashboard-stat-label) {
  color: var(--text-muted) !important;
}

:where(button, .btn, .bbyd-btn, .btn-primary, .btn-secondary, .btn-add, .btn-cancel, .btn-confirm, .status-pill, .pill, .badge, .tag, .chip, .filter-chip) {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #252a27 !important;
  color: var(--text) !important;
}

:where(button, .btn, .bbyd-btn, .btn-primary, .btn-add, .btn-confirm):hover {
  border-color: var(--accent-hover) !important;
  color: #ffffff !important;
  background: #303832 !important;
}

:where(.btn-primary, .btn-confirm, .is-primary, .active > button, button.active, .status-pill.up, .bbyd-btn--primary) {
  border-color: transparent !important;
  background: var(--accent) !important;
  color: #ffffff !important;
}

:where(input, select, textarea, .form-control, .search-input, .admin-nav-search-input) {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #151615 !important;
}

:where(input, select, textarea, .form-control):focus {
  border-color: var(--accent-hover) !important;
  outline: 2px solid rgba(0, 184, 148, 0.24) !important;
}

:where(.data-table, table) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

:where(.data-table th, .data-table td, table th, table td) {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
}

:where(.data-table th, table th) {
  background: #252a27 !important;
  color: var(--text-secondary) !important;
}

:where(.data-table tbody tr:hover td, table tbody tr:hover td) {
  background: #252a27 !important;
}

:where(.modal, .swal2-container) {
  background: rgba(8, 9, 8, 0.82) !important;
}

:where(.mobile-sidebar-toggle) {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--accent) !important;
  color: #ffffff !important;
}

.site-footer {
  border-top: 1px solid var(--border) !important;
  background: #1a1b1a !important;
}

@media (max-width: 1024px) {
  .sidebar {
    padding: 12px !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 72px 12px 12px !important;
  }

  .bbyd-shell-header {
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .bbyd-shell-header {
    padding: 12px;
  }

  .bbyd-shell-header h1 {
    font-size: 22px;
  }

  .bbyd-shell-header__meta span {
    padding: 6px 9px;
    font-size: 12px;
  }
}

body.page-user .sidebar-top,
body.page-admin .sidebar-top,
body.page-developer .sidebar-top {
  padding: 0 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-user .sidebar-brand,
body.page-admin .sidebar-brand,
body.page-developer .sidebar-brand {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.page-user .bbyd-ph,
body.page-admin .bbyd-ph,
body.page-developer .bbyd-ph {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
  padding: 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--bg-card) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.page-user .bbyd-ph::before,
body.page-admin .bbyd-ph::before,
body.page-developer .bbyd-ph::before,
body.page-user .bbyd-ph::after,
body.page-admin .bbyd-ph::after,
body.page-developer .bbyd-ph::after {
  display: none !important;
}

body.page-user .bbyd-ph__eyebrow,
body.page-admin .bbyd-ph__eyebrow,
body.page-developer .bbyd-ph__eyebrow,
body.page-user .bbyd-ph__meta,
body.page-admin .bbyd-ph__meta,
body.page-developer .bbyd-ph__meta {
  color: var(--accent-light) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.page-user .bbyd-ph__meta .red,
body.page-admin .bbyd-ph__meta .red,
body.page-developer .bbyd-ph__meta .red {
  color: var(--text-muted) !important;
}

body.page-user .bbyd-ph__title,
body.page-admin .bbyd-ph__title,
body.page-developer .bbyd-ph__title {
  margin: 6px 0 0 !important;
  color: var(--text) !important;
  font-size: clamp(24px, 3.6vw, 38px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

body.page-user .bbyd-ph__title em,
body.page-admin .bbyd-ph__title em,
body.page-developer .bbyd-ph__title em {
  color: var(--accent-hover) !important;
  font-style: normal !important;
}

body.page-user .bbyd-ph__sub,
body.page-admin .bbyd-ph__sub,
body.page-developer .bbyd-ph__sub {
  margin: 6px 0 0 !important;
  color: var(--text-muted) !important;
}

body.page-user .bbyd-content,
body.page-admin .bbyd-content,
body.page-developer .bbyd-content {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.page-user .home-dashboard-workspace {
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.8fr) !important;
  gap: 14px !important;
}

body.page-user .home-briefing-panel,
body.page-user .home-main-panel {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  border-radius: 18px !important;
}

@media (max-width: 1024px) {
  body.page-user .bbyd-ph,
  body.page-admin .bbyd-ph,
  body.page-developer .bbyd-ph {
    grid-template-columns: 1fr !important;
  }
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  background: #1a1b1a !important;
  background-image: none !important;
}

body.page-user .sidebar .sidebar-top,
body.page-admin .sidebar .sidebar-top,
body.page-developer .sidebar .sidebar-top {
  background: transparent !important;
  background-image: none !important;
}

body.page-user .main-content .tab-content .bbyd-ph,
body.page-admin .main-content .tab-content .bbyd-ph,
body.page-developer .main-content .tab-content .bbyd-ph,
body.page-user .main-content > .bbyd-ph,
body.page-admin .main-content > .bbyd-ph,
body.page-developer .main-content > .bbyd-ph {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-color: var(--border) !important;
}

body.page-user .main-content .tab-content .bbyd-ph .bbyd-ph__title em,
body.page-admin .main-content .tab-content .bbyd-ph .bbyd-ph__title em,
body.page-developer .main-content .tab-content .bbyd-ph .bbyd-ph__title em,
body.page-user .main-content > .bbyd-ph .bbyd-ph__title em,
body.page-admin .main-content > .bbyd-ph .bbyd-ph__title em,
body.page-developer .main-content > .bbyd-ph .bbyd-ph__title em {
  color: var(--accent-hover) !important;
}

html body.page-user main.main-content section.tab-content div.bbyd-ph,
html body.page-admin main.main-content section.tab-content div.bbyd-ph,
html body.page-developer main.main-content section.tab-content div.bbyd-ph {
  background: #1f211f !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html body.page-user main.main-content section.tab-content div.bbyd-ph h1.bbyd-ph__title em,
html body.page-admin main.main-content section.tab-content div.bbyd-ph h1.bbyd-ph__title em,
html body.page-developer main.main-content section.tab-content div.bbyd-ph h1.bbyd-ph__title em {
  color: #00b894 !important;
}

html body.page-user main.main-content section.tab-content .home-main-panel .bbyd-card,
html body.page-user main.main-content section.tab-content .home-briefing-panel {
  background: #1f211f !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid > article:nth-child(1) {
  background: #2f6fed !important;
}

html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid > article:nth-child(2) {
  background: #0d9b55 !important;
}

html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid > article:nth-child(3) {
  background: #b86f20 !important;
}

html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid > article:nth-child(4) {
  background: #505a5d !important;
}

html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid > article :where(div, span, strong, sup),
html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid > article .bbyd-card__title,
html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid > article .bbyd-metric__value {
  color: #ffffff !important;
}

@media (max-width: 700px) {
  html body.page-user main.main-content section.tab-content .home-dashboard-workspace,
  html body.page-user main.main-content section.tab-content .members-workspace,
  html body.page-user main.main-content section.tab-content .leaderboard-workspace,
  html body.page-user main.main-content section.tab-content .attendance-workspace,
  html body.page-user main.main-content section.tab-content .events-workspace,
  html body.page-user main.main-content section.tab-content .donation-workspace {
    grid-template-columns: 1fr !important;
  }

  html body.page-user main.main-content section.tab-content .home-main-panel .home-metrics-grid,
  html body.page-user main.main-content section.tab-content .bbyd-grid--4,
  html body.page-user main.main-content section.tab-content .bbyd-grid--3,
  html body.page-user main.main-content section.tab-content .bbyd-grid--2 {
    grid-template-columns: 1fr !important;
  }
}

html body.page-user button.mobile-sidebar-toggle,
html body.page-admin button.mobile-sidebar-toggle,
html body.page-developer button.mobile-sidebar-toggle {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #009b82 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Final Hoomeee pass: real-size dashboard, no global shrink. */
html,
body.page-user,
body.page-admin,
body.page-developer {
  height: 100dvh !important;
  overflow: hidden !important;
}

body.page-user,
body.page-admin,
body.page-developer {
  margin: 0 !important;
  background: #151615 !important;
  background-image:
    radial-gradient(circle at 86% 10%, rgba(0, 184, 148, 0.09), transparent 26%),
    linear-gradient(180deg, #1b1d1b 0%, #111413 100%) !important;
}

body.page-user .main-content,
body.page-admin .main-content,
body.page-developer .main-content {
  margin-left: 276px !important;
  width: calc(100vw - 276px) !important;
  height: 100dvh !important;
  padding: 16px !important;
  overflow: hidden !important;
}

body.page-user .bbyd-shell-header,
body.page-admin .bbyd-shell-header,
body.page-developer .bbyd-shell-header {
  min-height: 92px !important;
  margin: 0 0 12px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  background: #1a1b1a !important;
}

body.page-user .tab-content,
body.page-admin .tab-content,
body.page-developer .tab-content {
  width: auto !important;
  height: calc(100dvh - 136px) !important;
  transform: none !important;
  overflow: hidden !important;
}

body.page-user .bbyd-page-hero,
body.page-admin .bbyd-page-hero,
body.page-developer .bbyd-page-hero {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  background: #1f211f !important;
  color: #f4f5f1 !important;
}

body.page-user .bbyd-page-hero h1,
body.page-admin .bbyd-page-hero h1,
body.page-developer .bbyd-page-hero h1 {
  margin: 4px 0 !important;
  color: #f4f5f1 !important;
  font-size: clamp(28px, 3vw, 42px) !important;
}

body.page-user .bbyd-page-hero p,
body.page-admin .bbyd-page-hero p,
body.page-developer .bbyd-page-hero p {
  margin: 0 !important;
  color: #8f968e !important;
}

body.page-user #homeDashboardContainer {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.page-user #homeDashboardContainer .bbyd-ph {
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

body.page-user #homeDashboardContainer .bbyd-ph__title {
  font-size: clamp(28px, 2.4vw, 42px) !important;
}

body.page-user #homeDashboardContainer .bbyd-ph__sub {
  font-size: 13px !important;
}

body.page-user #homeDashboardContainer .bbyd-content.home-dashboard-shell {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.page-user #homeDashboardContainer .home-dashboard-workspace {
  display: grid !important;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
  gap: 14px !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.page-user #homeDashboardContainer .home-briefing-panel,
body.page-user #homeDashboardContainer .home-main-panel {
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  background: #1f211f !important;
}

body.page-user #homeDashboardContainer .home-briefing-panel {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 18px !important;
}

body.page-user #homeDashboardContainer .home-briefing-panel h2 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

body.page-user #homeDashboardContainer .home-briefing-panel p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.page-user #homeDashboardContainer .home-briefing-stats {
  gap: 8px !important;
}

body.page-user #homeDashboardContainer .home-briefing-stats span {
  min-height: 34px !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
}

body.page-user #homeDashboardContainer .home-main-panel {
  display: grid !important;
  grid-template-rows: 0.9fr 0.62fr 1.06fr 1.06fr !important;
  gap: 10px !important;
  padding: 14px !important;
}

body.page-user #homeDashboardContainer .home-main-panel > * {
  min-height: 0 !important;
  margin: 0 !important;
}

body.page-user #homeDashboardContainer .home-main-panel .home-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.page-user #homeDashboardContainer .home-main-panel > .bbyd-card,
body.page-user #homeDashboardContainer .home-main-panel > .bbyd-grid,
body.page-user #homeDashboardContainer .home-main-panel .home-metrics-grid > .bbyd-card {
  min-height: 0 !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-card {
  padding: 14px !important;
  overflow: hidden !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-card__head {
  margin-bottom: 8px !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-card__title {
  font-size: 10px !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-card__title-kr {
  font-size: 13px !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-metric__value {
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 0.98 !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-grid--3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-list,
body.page-user #homeDashboardContainer .home-main-panel .bbyd-feed {
  max-height: 100% !important;
  overflow: hidden !important;
}

body.page-user #homeDashboardContainer .home-main-panel .bbyd-feed > *:nth-child(n+5),
body.page-user #homeDashboardContainer .home-main-panel .bbyd-list > *:nth-child(n+6) {
  display: none !important;
}

body.page-user #homeDashboardContainer .home-main-panel > .bbyd-card:has(.bbyd-patch-grid),
body.page-user #homeDashboardContainer .home-main-panel > .bbyd-grid--2:last-child {
  display: none !important;
}

@media (max-width: 1024px) {
  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    transform: translateX(-100%) !important;
  }

  body.page-user.sidebar-mobile-open .sidebar,
  body.page-admin.sidebar-mobile-open .sidebar,
  body.page-developer.sidebar-mobile-open .sidebar {
    transform: translateX(0) !important;
  }

  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    left: 0 !important;
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 72px 12px 12px !important;
  }

  body.page-user .tab-content,
  body.page-admin .tab-content,
  body.page-developer .tab-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: calc(100dvh - 84px) !important;
    overflow: hidden !important;
  }

  body.page-user .bbyd-shell-header,
  body.page-admin .bbyd-shell-header,
  body.page-developer .bbyd-shell-header {
    min-height: 64px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
  }

  body.page-user .bbyd-shell-header__title,
  body.page-admin .bbyd-shell-header__title,
  body.page-developer .bbyd-shell-header__title {
    font-size: 24px !important;
  }

  body.page-user #homeDashboardContainer .home-dashboard-workspace {
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-user #homeDashboardContainer .home-briefing-panel {
    display: grid !important;
    padding: 10px !important;
    gap: 6px !important;
  }

  body.page-user #homeDashboardContainer .home-briefing-panel h2 {
    font-size: 18px !important;
  }

  body.page-user #homeDashboardContainer .home-briefing-panel p,
  body.page-user #homeDashboardContainer .home-briefing-actions {
    display: none !important;
  }

  body.page-user #homeDashboardContainer .home-briefing-stats span {
    min-height: 28px !important;
    padding: 6px 0 !important;
    font-size: 11px !important;
  }
}

@media (max-width: 700px) {
  html body.page-user main.main-content,
  html body.page-admin main.main-content,
  html body.page-developer main.main-content {
    inset: auto auto auto 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 64px 8px 8px !important;
  }

  body.page-user .bbyd-shell-header,
  body.page-admin .bbyd-shell-header,
  body.page-developer .bbyd-shell-header {
    display: none !important;
  }

  body.page-user .tab-content,
  body.page-admin .tab-content,
  body.page-developer .tab-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 72px) !important;
  }

  body.page-user #homeDashboardContainer {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-user #homeDashboardContainer .bbyd-ph {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }

  body.page-user #homeDashboardContainer .bbyd-ph__title {
    font-size: 24px !important;
  }

  body.page-user #homeDashboardContainer .bbyd-ph__sub,
  body.page-user #homeDashboardContainer .bbyd-ph__actions {
    display: none !important;
  }

  body.page-user #homeDashboardContainer .home-dashboard-workspace {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  body.page-user #homeDashboardContainer .home-main-panel {
    grid-template-rows: 0.9fr 0.55fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.page-user #homeDashboardContainer .home-main-panel .home-metrics-grid,
  body.page-user #homeDashboardContainer .home-main-panel .bbyd-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-user #homeDashboardContainer .home-main-panel .home-metrics-grid > .bbyd-card:nth-child(n+3),
  body.page-user #homeDashboardContainer .home-main-panel > .bbyd-grid--3:nth-of-type(n+4) {
    display: none !important;
  }

  body.page-user #homeDashboardContainer .home-main-panel .bbyd-card {
    padding: 10px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.page-user #homeDashboardContainer .home-main-panel .bbyd-metric__value {
    font-size: 26px !important;
  }
}

/* ===== app-public.css ===== */
/* Public pages aligned to the Hoomeee dark dashboard direction. */
:root {
  --public-bg: #141615;
  --public-panel: #1e211f;
  --public-panel-2: #252a27;
  --public-line: rgba(255, 255, 255, 0.08);
  --public-text: #f6f7f2;
  --public-muted: #9aa29a;
  --public-green: #00a88b;
  --public-blue: #2f6fed;
  --public-orange: #bd7420;
  --public-font: 'Noto Sans KR', system-ui, sans-serif;
}

html,
body.landing-industrial {
  background: var(--public-bg) !important;
  color: var(--public-text) !important;
  font-family: var(--public-font) !important;
}

body.landing-industrial .onepage-nav {
  background: #191c1a !important;
  border-bottom: 1px solid var(--public-line) !important;
}

body.landing-industrial .onepage-nav__mark,
body.landing-industrial .onepage-btn--signal {
  background: var(--public-green) !important;
}

body.landing-industrial .onepage-hero,
body.landing-industrial .onepage-panel {
  border: 1px solid var(--public-line) !important;
  border-radius: 16px !important;
  background: var(--public-panel) !important;
  box-shadow: none !important;
}

body.landing-industrial .onepage-hero {
  background:
    linear-gradient(135deg, rgba(0, 168, 139, 0.24), transparent 42%),
    var(--public-panel) !important;
}

body.landing-industrial .onepage-panel--stats article:nth-child(1) { background: var(--public-blue) !important; }
body.landing-industrial .onepage-panel--stats article:nth-child(2) { background: var(--public-green) !important; }
body.landing-industrial .onepage-panel--stats article:nth-child(3) { background: var(--public-orange) !important; }

@media (max-width: 980px), (max-height: 700px) {
  html,
  body.landing-industrial {
    height: auto !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }

  body.landing-industrial .login-page {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 68px) !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.landing-industrial .onepage-console {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    grid-template-areas:
      "hero"
      "stats"
      "about"
      "systems"
      "rules"
      "join" !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.landing-industrial .onepage-hero,
  body.landing-industrial .onepage-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.landing-industrial .onepage-panel--stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(84px, auto) !important;
    gap: 10px !important;
  }

  body.landing-industrial .onepage-panel--stats article {
    align-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 84px !important;
    padding: 14px 16px !important;
  }

  body.landing-industrial .onepage-panel--stats strong {
    font-size: 36px !important;
    line-height: 1 !important;
  }

  body.landing-industrial .onepage-hero p,
  body.landing-industrial .onepage-panel p,
  body.landing-industrial .onepage-panel li {
    overflow-wrap: anywhere !important;
  }
}

/* ===== app-hoomeee.css ===== */
/* Hoomeee-inspired BangyaDan app shell. Loaded after legacy page styles. */
:root {
  --app-bg: #141615;
  --app-surface: #1e211f;
  --app-surface-2: #242824;
  --app-surface-3: #101312;
  --app-line: rgba(255, 255, 255, 0.08);
  --app-line-strong: rgba(255, 255, 255, 0.14);
  --app-text: #f6f7f2;
  --app-muted: #9aa29a;
  --app-soft: #c8cec5;
  --app-green: #00a88b;
  --app-green-2: #0fa764;
  --app-blue: #2f6fed;
  --app-orange: #bd7420;
  --app-red: #ff5b66;
  --app-yellow: #f0b84a;
  --app-radius: 16px;
  --app-font: 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html:has(body.page-user),
html:has(body.page-admin),
html:has(body.page-developer),
body.page-user,
body.page-admin,
body.page-developer {
  width: 100%;
  height: 100dvh;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
  font-family: var(--app-font) !important;
  font-variant-numeric: tabular-nums;
}

body.page-user,
body.page-admin,
body.page-developer {
  background-image:
    radial-gradient(circle at 84% 8%, rgba(0, 168, 139, 0.15), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(47, 111, 237, 0.08), transparent 24%),
    linear-gradient(180deg, #181b19 0%, #101312 100%) !important;
}

body.page-user *,
body.page-admin *,
body.page-developer * {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: 292px !important;
  height: 100dvh !important;
  padding: 16px 14px !important;
  border-right: 1px solid var(--app-line) !important;
  background: rgba(24, 27, 25, 0.96) !important;
  backdrop-filter: blur(18px);
  overflow: hidden !important;
}

body.page-user .sidebar-brand,
body.page-admin .sidebar-brand,
body.page-developer .sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 2px 2px 16px !important;
  color: var(--app-text) !important;
  text-decoration: none !important;
}

body.page-user .sidebar-brand__mark,
body.page-admin .sidebar-brand__mark,
body.page-developer .sidebar-brand__mark {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #ff5b66 !important;
  color: #fff !important;
  font-weight: 900 !important;
}

body.page-user .sidebar-brand__name,
body.page-admin .sidebar-brand__name,
body.page-developer .sidebar-brand__name {
  display: block !important;
  color: var(--app-text) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

body.page-user .sidebar-brand__label,
body.page-admin .sidebar-brand__label,
body.page-developer .sidebar-brand__label,
body.page-user .bbyd-sb-role a,
body.page-admin .bbyd-sb-role a,
body.page-developer .bbyd-sb-role a {
  color: var(--app-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.page-user .bbyd-sb-role,
body.page-admin .bbyd-sb-role,
body.page-developer .bbyd-sb-role {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  margin: 0 0 14px !important;
  padding: 4px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 14px !important;
  background: #111513 !important;
}

body.page-user .bbyd-sb-role a,
body.page-admin .bbyd-sb-role a,
body.page-developer .bbyd-sb-role a {
  display: grid !important;
  place-items: center !important;
  min-height: 36px !important;
  border-radius: 11px !important;
  text-decoration: none !important;
}

body.page-user .bbyd-sb-role a.active,
body.page-admin .bbyd-sb-role a.active,
body.page-developer .bbyd-sb-role a.active {
  background: var(--app-green) !important;
  color: #fff !important;
}

body.page-user .sidebar-id,
body.page-admin .sidebar-id,
body.page-developer .sidebar-id {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 72px !important;
  margin: 0 0 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(47, 111, 237, 0.34) !important;
  border-radius: 14px !important;
  background: #111927 !important;
  color: var(--app-text) !important;
  text-decoration: none !important;
}

body.page-user .sidebar-id__avatar,
body.page-admin .sidebar-id__avatar,
body.page-developer .sidebar-id__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

body.page-user .sidebar-id__name,
body.page-admin .sidebar-id__name,
body.page-developer .sidebar-id__name {
  display: block !important;
  overflow: hidden !important;
  color: var(--app-text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.page-user .sidebar-id__meta,
body.page-admin .sidebar-id__meta,
body.page-developer .sidebar-id__meta {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: var(--app-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body.page-user .bbyd-sb-balances,
body.page-admin .bbyd-sb-balances,
body.page-developer .bbyd-sb-balances {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

body.page-user .bbyd-sb-bal,
body.page-admin .bbyd-sb-bal,
body.page-developer .bbyd-sb-bal {
  min-height: 58px !important;
  padding: 10px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 12px !important;
  background: #111927 !important;
}

body.page-user .bbyd-sb-bal__label,
body.page-admin .bbyd-sb-bal__label,
body.page-developer .bbyd-sb-bal__label {
  color: var(--app-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body.page-user .bbyd-sb-bal__value,
body.page-admin .bbyd-sb-bal__value,
body.page-developer .bbyd-sb-bal__value {
  color: #ff5b66 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

body.page-user .nav-menu-wrapper,
body.page-admin .nav-menu-wrapper,
body.page-developer .nav-menu-wrapper {
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

body.page-user .nav-menu,
body.page-admin .nav-menu,
body.page-developer .nav-menu {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.page-user .menu-group,
body.page-admin .menu-group,
body.page-developer .menu-group {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 12px !important;
  padding: 10px 10px !important;
  color: var(--app-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.page-user .feature-item a,
body.page-admin .feature-item a,
body.page-developer .feature-item a,
body.page-user .sidebar-bottom-menu a,
body.page-admin .sidebar-bottom-menu a,
body.page-developer .sidebar-bottom-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--app-soft) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.page-user .feature-item.active a,
body.page-admin .feature-item.active a,
body.page-developer .feature-item.active a,
body.page-user .feature-item a:hover,
body.page-admin .feature-item a:hover,
body.page-developer .feature-item a:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.22), rgba(255, 91, 102, 0.12)) !important;
  color: #fff !important;
}

body.page-user .sidebar-bottom-menu,
body.page-admin .sidebar-bottom-menu,
body.page-developer .sidebar-bottom-menu {
  display: grid !important;
  gap: 8px !important;
  padding-top: 12px !important;
}

body.page-user .main-content,
body.page-admin .main-content,
body.page-developer .main-content {
  position: relative !important;
  z-index: 1 !important;
  height: 100dvh !important;
  margin: 0 0 0 292px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

body.page-user .main-content::before,
body.page-user .main-content::after,
body.page-admin .main-content::before,
body.page-admin .main-content::after,
body.page-developer .main-content::before,
body.page-developer .main-content::after {
  display: none !important;
}

body.page-user .bbyd-shell-header,
body.page-admin .bbyd-shell-header,
body.page-developer .bbyd-shell-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 68px !important;
  margin: 0 0 10px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: rgba(30, 33, 31, 0.92) !important;
  box-shadow: none !important;
}

body.page-user .bbyd-shell-header__scope,
body.page-admin .bbyd-shell-header__scope,
body.page-developer .bbyd-shell-header__scope {
  display: block !important;
  margin-bottom: 4px !important;
  color: #9bf2d7 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.page-user .bbyd-shell-header h1,
body.page-admin .bbyd-shell-header h1,
body.page-developer .bbyd-shell-header h1 {
  margin: 0 !important;
  color: var(--app-text) !important;
  font-size: clamp(24px, 1.8vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

body.page-user .bbyd-shell-header__meta,
body.page-admin .bbyd-shell-header__meta,
body.page-developer .bbyd-shell-header__meta {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

body.page-user .bbyd-shell-header__meta span,
body.page-admin .bbyd-shell-header__meta span,
body.page-developer .bbyd-shell-header__meta span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #111927 !important;
  color: var(--app-soft) !important;
  font-weight: 800 !important;
}

body.page-user .tab-content,
body.page-admin .tab-content,
body.page-developer .tab-content {
  height: calc(100dvh - 94px) !important;
  overflow: auto !important;
  transform: none !important;
  scrollbar-width: thin;
}

body.page-user :where(.bbyd-ph, .bbyd-page-hero),
body.page-admin :where(.bbyd-ph, .bbyd-page-hero),
body.page-developer :where(.bbyd-ph, .bbyd-page-hero) {
  margin: 0 0 12px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body.page-user :where(.bbyd-card, .card, .stat-card, .setting-card, .dev-panel, .admin-card, .market-card, .profile-card, .support-card, .event-card, .table-responsive, .hud-table-wrap),
body.page-admin :where(.bbyd-card, .card, .stat-card, .setting-card, .dev-panel, .admin-card, .market-card, .profile-card, .support-card, .event-card, .table-responsive, .hud-table-wrap),
body.page-developer :where(.bbyd-card, .card, .stat-card, .setting-card, .dev-panel, .admin-card, .market-card, .profile-card, .support-card, .event-card, .table-responsive, .hud-table-wrap) {
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  box-shadow: none !important;
}

body.page-user :where(button, .btn, .btn-primary, .btn-secondary, .bbyd-btn),
body.page-admin :where(button, .btn, .btn-primary, .btn-secondary, .bbyd-btn),
body.page-developer :where(button, .btn, .btn-primary, .btn-secondary, .bbyd-btn) {
  border-radius: 12px !important;
  font-family: var(--app-font) !important;
  font-weight: 900 !important;
}

body.page-user :where(input, select, textarea, .form-control),
body.page-admin :where(input, select, textarea, .form-control),
body.page-developer :where(input, select, textarea, .form-control) {
  border: 1px solid var(--app-line) !important;
  border-radius: 12px !important;
  background: #111513 !important;
  color: var(--app-text) !important;
  font-family: var(--app-font) !important;
}

body.page-user :where(.data-table, table),
body.page-admin :where(.data-table, table),
body.page-developer :where(.data-table, table) {
  color: var(--app-text) !important;
  font-family: var(--app-font) !important;
}

#homeDashboardContainer {
  height: 100%;
  min-height: 0;
}

.app-home {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.app-home__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 86px;
  padding: 16px 18px;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.2), rgba(0, 168, 139, 0.1) 42%, transparent),
    var(--app-surface);
}

.app-home__meta,
.app-home-card__label,
.app-home-row__label {
  color: #9bf2d7;
  font-size: 11px;
  font-weight: 900;
}

.app-home__title {
  margin: 2px 0 4px;
  color: var(--app-text);
  font-size: clamp(28px, 2.45vw, 40px);
  font-weight: 900;
  line-height: 1.05;
}

.app-home__title em {
  color: #ff5b66;
  font-style: normal;
}

.app-home__sub {
  margin: 0;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 700;
}

.app-home__actions,
.app-home-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid var(--app-line-strong);
  border-radius: 12px;
  background: var(--app-surface-2);
  color: var(--app-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.app-home-btn--primary {
  border-color: transparent;
  background: var(--app-green);
  color: #fff;
}

.app-home__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.31fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.app-home-brief,
.app-home-main,
.app-home-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  overflow: hidden;
}

.app-home-brief {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px 18px;
}

.app-home-brief__name {
  margin: 0;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.12;
}

.app-home-brief__copy {
  margin: 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-home-brief__stats {
  display: grid;
  gap: 8px;
  align-content: start;
}

.app-home-stat {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 38px;
  color: var(--app-soft);
  font-size: 13px;
  font-weight: 800;
}

.app-home-stat i {
  color: #83e7d4;
}

.app-home-stat strong {
  color: var(--app-text);
  font-size: 14px;
}

.app-home-main {
  display: grid;
  grid-template-rows: minmax(132px, 0.8fr) minmax(120px, 0.62fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}

.app-home-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.app-home-metric {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--app-line-strong);
  border-radius: 14px;
  background: #111927;
  overflow: hidden;
}

.app-home-metric:nth-child(1) { background: linear-gradient(135deg, rgba(47, 111, 237, 0.58), #111927 74%); }
.app-home-metric:nth-child(2) { background: linear-gradient(135deg, rgba(15, 167, 100, 0.58), #111927 74%); }
.app-home-metric:nth-child(3) { background: linear-gradient(135deg, rgba(189, 116, 32, 0.62), #111927 74%); }
.app-home-metric:nth-child(4) { background: linear-gradient(135deg, rgba(255, 91, 102, 0.48), #111927 74%); }

.app-home-metric__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.app-home-metric__label {
  color: var(--app-soft);
  font-size: 12px;
  font-weight: 900;
}

.app-home-metric__value {
  display: block;
  align-self: center;
  color: #fff;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 900;
  line-height: 1.02;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.app-home-metric__meta {
  color: var(--app-soft);
  font-size: 12px;
  font-weight: 800;
}

.app-home-card {
  padding: 12px;
}

.app-home-card--valorant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.app-home-card__title {
  margin: 3px 0 0;
  color: var(--app-text);
  font-size: 18px;
  font-weight: 900;
}

.app-home-valorant__stats,
.app-home-rowgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.app-home-rowgrid .app-home-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.app-home-row__value {
  color: var(--app-text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.app-home-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-home-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--app-soft);
  font-size: 12px;
  font-weight: 800;
}

.app-home-list a,
.app-home-list .nickname-link {
  color: var(--app-text);
  text-decoration: none;
}

.app-home-empty {
  margin: 0;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 700;
}

.app-home-extra {
  display: none;
}

.mobile-sidebar-toggle {
  z-index: 50 !important;
  border-radius: 14px !important;
  background: var(--app-green) !important;
  color: #fff !important;
}

@media (max-width: 1024px) {
  html:has(body.page-user),
  html:has(body.page-admin),
  html:has(body.page-developer),
  body.page-user,
  body.page-admin,
  body.page-developer {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.page-user .sidebar,
  body.page-admin .sidebar,
  body.page-developer .sidebar {
    width: min(88vw, 342px) !important;
    transform: translateX(-100%) !important;
    transition: transform 180ms ease;
  }

  body.page-user.sidebar-mobile-open .sidebar,
  body.page-admin.sidebar-mobile-open .sidebar,
  body.page-developer.sidebar-mobile-open .sidebar {
    transform: translateX(0) !important;
  }

  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 68px 12px 12px !important;
    overflow: visible !important;
  }

  body.page-user .bbyd-shell-header,
  body.page-admin .bbyd-shell-header,
  body.page-developer .bbyd-shell-header {
    display: none !important;
  }

  body.page-user .tab-content,
  body.page-admin .tab-content,
  body.page-developer .tab-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .app-home {
    height: auto !important;
    min-height: 0 !important;
  }

  .app-home__grid,
  .app-home-main,
  .app-home-metrics,
  .app-home-rowgrid,
  .app-home-valorant__stats {
    grid-template-columns: 1fr;
  }

  .app-home-main {
    grid-template-rows: none;
  }

  .app-home__hero,
  .app-home-card--valorant {
    grid-template-columns: 1fr;
  }

  .app-home__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1024px) {
  html:has(body.page-user) body,
  html:has(body.page-admin) body,
  html:has(body.page-developer) body {
    height: auto !important;
    overflow-y: auto !important;
  }

  body.page-user #homeDashboardContainer,
  body.page-admin #homeDashboardContainer,
  body.page-developer #homeDashboardContainer {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 640px) {
  .app-home__hero {
    padding: 14px;
  }

  .app-home__title {
    font-size: 30px;
  }

  .app-home-brief__name {
    font-size: 22px;
  }

  .app-home-metric__value {
    font-size: 34px;
  }
}

/* ===== Hoomeee tab refinement layer ===== */
body.page-user {
  --tab-panel: #1e211f;
  --tab-panel-2: #111927;
  --tab-panel-3: #151917;
  --tab-line: rgba(255,255,255,.09);
  --tab-line-strong: rgba(255,255,255,.16);
  --tab-muted: #9aa7a1;
  --tab-text: #f6f7f2;
  --tab-green: #00a88b;
  --tab-blue: #2f6fed;
  --tab-red: #ff5b66;
  --tab-orange: #bd7420;
}

body.page-user :where(
  .members-workspace,
  .attendance-workspace,
  .leaderboard-workspace,
  .pe-layout
) {
  display: grid !important;
  grid-template-columns: minmax(280px, .34fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  min-height: 0 !important;
}

body.page-user :where(
  .members-command-panel,
  .attendance-command-panel,
  .leaderboard-command-panel,
  .members-main-panel,
  .attendance-main-panel,
  .leaderboard-main-panel,
  .pe-card,
  .pe-preview-card,
  .pe-preview__frame
) {
  border: 1px solid var(--tab-line) !important;
  border-radius: 18px !important;
  background: var(--tab-panel) !important;
  box-shadow: none !important;
}

body.page-user :where(
  .members-command-panel,
  .attendance-command-panel,
  .leaderboard-command-panel
) {
  padding: 18px !important;
  align-self: start !important;
}

body.page-user :where(
  .members-command-panel__kicker,
  .attendance-command-panel__kicker,
  .leaderboard-command-panel__kicker,
  .pe-card__tag,
  .bbyd-card__title
) {
  color: #9bf2d7 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.page-user :where(
  .members-command-panel h2,
  .attendance-command-panel h2,
  .leaderboard-command-panel h2,
  .pe-card__title,
  .bbyd-card__title-kr
) {
  color: var(--tab-text) !important;
  font-weight: 900 !important;
}

body.page-user :where(
  .members-command-panel p,
  .attendance-command-panel p,
  .leaderboard-command-panel p,
  .pe-hint,
  .bbyd-ph__sub
) {
  color: var(--tab-muted) !important;
  line-height: 1.55 !important;
}

body.page-user :where(.members-main-panel, .attendance-main-panel, .leaderboard-main-panel) {
  padding: 16px !important;
  overflow: auto !important;
  min-height: 0 !important;
}

body.page-user .pe-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr) !important;
}

body.page-user .pe-forms {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.page-user .pe-card {
  overflow: hidden !important;
}

body.page-user .pe-card__header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--tab-line) !important;
  background: var(--tab-panel-2) !important;
}

body.page-user .pe-card__body {
  padding: 16px !important;
}

body.page-user .pe-card__icon {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(0,168,139,.16) !important;
  color: #9bf2d7 !important;
}

body.page-user :where(.pe-input, .pe-card input, .pe-card select, .pe-card textarea) {
  min-height: 42px !important;
  border: 1px solid var(--tab-line-strong) !important;
  border-radius: 12px !important;
  background: #111927 !important;
  color: var(--tab-text) !important;
}

body.page-user :where(.btn-primary, .btn-secondary, .bbyd-btn, .leaderboard-type-tab) {
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--tab-line-strong) !important;
  box-shadow: none !important;
}

body.page-user :where(.btn-primary, .bbyd-btn--primary, .leaderboard-type-tab.is-active) {
  background: var(--tab-green) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.page-user :where(.btn-secondary, .bbyd-btn--ghost, .leaderboard-type-tab) {
  background: var(--tab-panel-2) !important;
  color: var(--tab-text) !important;
}

body.page-user .leaderboard-type-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}

body.page-user .leaderboard-summary-grid,
body.page-user .attendance-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.page-user :where(.bbyd-card, .leaderboard-list, .attendance-calendar-card, .attendance-milestone-card) {
  border: 1px solid var(--tab-line) !important;
  border-radius: 18px !important;
  background: var(--tab-panel-2) !important;
  color: var(--tab-text) !important;
  box-shadow: none !important;
}

body.page-user .bbyd-card {
  padding: 16px !important;
}

body.page-user .bbyd-metric__value {
  color: #fff !important;
  font-weight: 900 !important;
  word-break: keep-all !important;
}

body.page-user .attendance-calendar-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body.page-user .attendance-calendar-card {
  background: #111927 !important;
  overflow: hidden !important;
}

body.page-user .attendance-calendar-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--tab-line) !important;
}

body.page-user .attendance-calendar-month {
  background: #172033 !important;
  border: 1px solid var(--tab-line-strong) !important;
  border-radius: 999px !important;
  color: #fff !important;
}

body.page-user .attendance-calendar-weekdays {
  padding: 12px 16px 8px !important;
  gap: 8px !important;
}

body.page-user .attendance-weekday {
  display: grid !important;
  place-items: center !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--tab-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.page-user .attendance-calendar-grid {
  padding: 0 16px 16px !important;
  gap: 8px !important;
}

body.page-user .attendance-day-cell {
  min-height: 72px !important;
  border-radius: 14px !important;
  border: 1px solid var(--tab-line) !important;
  background: #121b2a !important;
  color: var(--tab-text) !important;
  box-shadow: none !important;
}

body.page-user .attendance-day-cell.is-attended {
  border-color: rgba(0,168,139,.42) !important;
  background: linear-gradient(135deg, rgba(0,168,139,.16), #121b2a 70%) !important;
}

body.page-user .attendance-day-stamp {
  width: 46px !important;
  height: 46px !important;
}

body.page-user .leaderboard-header-row {
  border: 1px solid var(--tab-line) !important;
  border-radius: 14px 14px 0 0 !important;
  background: #172033 !important;
  color: var(--tab-muted) !important;
}

body.page-user .leaderboard-list {
  overflow: hidden !important;
}

body.page-user .leaderboard-row {
  min-height: 58px !important;
  border-bottom: 1px solid var(--tab-line) !important;
  background: transparent !important;
}

body.page-user .leaderboard-row.is-me {
  background: rgba(0,168,139,.12) !important;
}

body.page-user .leaderboard-rank {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 70px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
}

body.page-user .members-main-panel .member-role-total {
  margin: 0 0 14px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--tab-line) !important;
  background: var(--tab-panel-2) !important;
  color: var(--tab-text) !important;
}

body.page-user .member-role-section {
  border: 1px solid var(--tab-line) !important;
  border-radius: 18px !important;
  background: var(--tab-panel-2) !important;
  box-shadow: none !important;
}

body.page-user :where(.member-card, .member-profile-card, .member-roster-card) {
  border: 1px solid var(--tab-line) !important;
  border-radius: 16px !important;
  background: #182232 !important;
  box-shadow: none !important;
}

body.page-user .profile-error-card {
  border: 1px solid var(--tab-line) !important;
  border-radius: 18px !important;
  background: var(--tab-panel) !important;
}

@media (max-width: 1180px) {
  body.page-user :where(.members-workspace, .attendance-workspace, .leaderboard-workspace, .pe-layout),
  body.page-user .attendance-calendar-panel {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body.page-user .leaderboard-summary-grid,
  body.page-user .attendance-summary-grid,
  body.page-user .leaderboard-type-tabs {
    grid-template-columns: 1fr !important;
  }

  body.page-user :where(.members-command-panel, .attendance-command-panel, .leaderboard-command-panel, .members-main-panel, .attendance-main-panel, .leaderboard-main-panel) {
    padding: 14px !important;
  }

  body.page-user .attendance-day-cell {
    min-height: 54px !important;
  }
}

/* ===== Hoomeee hardening pass: app shell and remaining user tabs ===== */
body.page-user,
body.page-admin,
body.page-developer {
  --app-sidebar-w: 292px;
  --bbyd-f-kr: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bbyd-f-en: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bbyd-f-display: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-font: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.page-user .sidebar,
body.page-admin .sidebar,
body.page-developer .sidebar {
  width: var(--app-sidebar-w) !important;
}

@media (min-width: 1025px) {
  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: var(--app-sidebar-w) !important;
    width: calc(100vw - var(--app-sidebar-w)) !important;
    max-width: calc(100vw - var(--app-sidebar-w)) !important;
  }
}

body.page-user :where(
  .members-workspace,
  .attendance-workspace,
  .leaderboard-workspace,
  .events-workspace,
  .donation-workspace,
  .support-workspace,
  .reaction-workspace,
  .market-workspace,
  .pe-layout
) {
  display: grid !important;
  grid-template-columns: minmax(292px, .34fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

body.page-user :where(.bbyd-btn, .btn-primary, .btn-secondary, button),
body.page-admin :where(.bbyd-btn, .btn-primary, .btn-secondary, button),
body.page-developer :where(.bbyd-btn, .btn-primary, .btn-secondary, button) {
  text-transform: none !important;
}

body.page-user :where(
  .members-command-panel,
  .attendance-command-panel,
  .leaderboard-command-panel,
  .events-command-panel,
  .donation-command-panel,
  .support-command-panel,
  .reaction-command-panel,
  .market-command-panel
) {
  align-self: start !important;
  padding: 18px !important;
  border: 1px solid var(--tab-line) !important;
  border-radius: 18px !important;
  background: var(--tab-panel) !important;
  box-shadow: none !important;
}

body.page-user :where(
  .events-main-panel,
  .donation-main-panel,
  .support-main-panel,
  .reaction-main-panel,
  .market-main-panel,
  .support-chat-panel
) {
  min-height: 0 !important;
  padding: 16px !important;
  overflow: auto !important;
  border: 1px solid var(--tab-line) !important;
  border-radius: 18px !important;
  background: var(--tab-panel) !important;
  box-shadow: none !important;
}

body.page-user :where(
  .events-command-panel__kicker,
  .donation-command-panel__kicker,
  .support-command-panel__kicker,
  .reaction-command-panel__kicker,
  .market-command-panel__kicker
) {
  color: #9bf2d7 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.page-user :where(
  .events-command-panel h2,
  .donation-command-panel h2,
  .support-command-panel h2,
  .reaction-command-panel h2,
  .market-command-panel h2
) {
  color: var(--tab-text) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  margin: 8px 0 !important;
}

body.page-user :where(
  .events-command-panel p,
  .donation-command-panel p,
  .support-command-panel p,
  .reaction-command-panel p,
  .market-command-panel p
) {
  color: var(--tab-muted) !important;
  line-height: 1.55 !important;
}

body.page-user .attendance-summary-list,
body.page-user .reaction-metric-stack {
  display: grid !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

body.page-user .attendance-summary-item {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 76px !important;
  padding: 13px !important;
  border: 1px solid var(--tab-line) !important;
  border-radius: 16px !important;
  background: var(--tab-panel-2) !important;
}

body.page-user .attendance-summary-item__icon {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(0,168,139,.16) !important;
  color: #9bf2d7 !important;
}

body.page-user .attendance-summary-item__body {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.page-user .attendance-summary-item__label {
  color: var(--tab-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.page-user .attendance-summary-item__value {
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.page-user .events-calendar-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .35fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body.page-user :where(.events-calendar-card, .events-upcoming-card, .support-create-card, .support-list-panel, .reaction-stage-panel, .reaction-ranking-panel, .donation-history-panel, .hud-donation-info-panel, .hud-donation-qr-panel) {
  border: 1px solid var(--tab-line) !important;
  border-radius: 18px !important;
  background: var(--tab-panel-2) !important;
  color: var(--tab-text) !important;
  box-shadow: none !important;
}

body.page-user .events-cal-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

body.page-user .events-cal-weekday-row > div {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  color: var(--tab-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

body.page-user .events-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

body.page-user .events-cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 72px;
  padding: 8px;
  border: 1px solid var(--tab-line);
  border-radius: 14px;
  background: #121b2a;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

body.page-user .events-cal-cell.is-empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

body.page-user .events-cal-cell:not(.is-empty):hover {
  border-color: var(--tab-line-strong);
  background: #172033;
}

body.page-user .events-cal-cell.is-today {
  border-color: rgba(0,168,139,.52);
  background: linear-gradient(135deg, rgba(0,168,139,.16), #121b2a 70%);
}

body.page-user .events-cal-cell.has-events {
  border-color: rgba(47,111,237,.45);
}

body.page-user .events-cal-cell__day {
  color: var(--tab-text);
  font-size: 12px;
  font-weight: 900;
}

body.page-user .events-cal-cell__dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: auto;
}

body.page-user .events-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  flex-shrink: 0;
}

body.page-user .events-cal-cell__more {
  color: var(--tab-muted);
  font-size: 10px;
  margin-top: 2px;
}

body.page-user .events-legend {
  display: grid !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--tab-line) !important;
  color: var(--tab-muted) !important;
  font-size: 12px !important;
}

body.page-user .events-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.page-user .event-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3,7,12,.76);
  backdrop-filter: blur(8px);
}

body.page-user .event-detail-panel {
  width: min(640px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 22px 24px;
  border: 1px solid var(--tab-line-strong);
  border-radius: 18px;
  background: var(--tab-panel);
}

body.page-user .event-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tab-line);
}

body.page-user .event-detail-type,
body.page-user .event-detail-rsvp-header {
  color: #9bf2d7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

body.page-user .event-detail-title {
  margin: 4px 0 6px;
  color: var(--tab-text);
  font-size: 22px;
  font-weight: 900;
}

body.page-user .event-detail-meta,
body.page-user .event-detail-desc {
  color: var(--tab-muted);
  font-size: 13px;
  line-height: 1.6;
}

body.page-user .event-detail-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--tab-line-strong);
  border-radius: 12px;
  background: #111927;
  color: var(--tab-muted);
  cursor: pointer;
}

body.page-user .event-detail-rsvp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

body.page-user .event-detail-rsvp-actions .bbyd-btn.is-active {
  background: var(--tab-green) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.page-user .event-detail-rsvp-section {
  padding-top: 14px;
  border-top: 1px solid var(--tab-line);
}

body.page-user .event-detail-rsvp-list {
  display: grid;
  gap: 6px;
}

body.page-user .event-detail-rsvp-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--tab-line);
  border-radius: 12px;
  background: #111927;
}

body.page-user .event-detail-rsvp-row img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 10px;
}

body.page-user .event-detail-rsvp-row .rsvp-name {
  min-width: 0;
  overflow: hidden;
  color: var(--tab-text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-user .event-detail-rsvp-row .rsvp-badge {
  padding: 3px 8px;
  border: 1px solid var(--tab-line-strong);
  border-radius: 999px;
  color: var(--tab-muted);
  font-size: 11px;
}

body.page-user .reaction-stage {
  position: relative;
  width: 100%;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--tab-line);
  border-radius: 18px;
  background: #111927;
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

body.page-user .reaction-stage:focus-visible {
  border-color: rgba(0,168,139,.55);
}

body.page-user .reaction-stage__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

body.page-user .reaction-stage__icon {
  color: #9bf2d7;
  font-size: 44px;
  line-height: 1;
  transition: transform .18s ease;
}

body.page-user .reaction-stage__title {
  color: var(--tab-text);
  font-size: 24px;
  font-weight: 900;
}

body.page-user .reaction-stage__sub {
  max-width: 420px;
  color: var(--tab-muted);
  font-size: 13px;
}

body.page-user .reaction-stage[data-state="waiting"] {
  border-color: rgba(255,91,102,.45);
  background: rgba(255,91,102,.13);
}

body.page-user .reaction-stage[data-state="waiting"] .reaction-stage__icon {
  color: var(--tab-red);
  animation: reactionPulse 1.2s ease-in-out infinite;
}

body.page-user .reaction-stage[data-state="go"] {
  border-color: rgba(0,168,139,.58);
  background: rgba(0,168,139,.18);
  transform: scale(1.003);
}

body.page-user .reaction-stage[data-state="go"] .reaction-stage__icon,
body.page-user .reaction-stage[data-state="go"] .reaction-stage__title {
  color: #9bf2d7;
}

body.page-user .reaction-stage[data-state="go"] .reaction-stage__icon {
  transform: scale(1.18);
}

body.page-user .reaction-stage[data-state="result"] {
  border-color: rgba(47,111,237,.5);
  background: rgba(47,111,237,.16);
}

body.page-user .reaction-stage[data-state="false-start"] {
  border-color: rgba(189,116,32,.5);
  background: rgba(189,116,32,.15);
}

body.page-user .reaction-stage__title.is-best::after {
  content: " 베스트";
  color: #f5c15d;
  font-size: 15px;
  font-weight: 900;
}

@keyframes reactionPulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.08); opacity: 1; }
}

body.page-user .reaction-daily-ranking {
  display: grid;
}

body.page-user .reaction-daily-ranking__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--tab-line);
}

body.page-user .reaction-daily-ranking__row:last-child {
  border-bottom: 0;
}

body.page-user .reaction-daily-ranking__row.is-me {
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 12px;
  background: rgba(0,168,139,.12);
}

body.page-user .reaction-daily-ranking__rank {
  color: var(--tab-muted);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

body.page-user .reaction-daily-ranking__name {
  min-width: 0;
  overflow: hidden;
  color: var(--tab-text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-user .reaction-daily-ranking__value {
  color: #9bf2d7;
  font-size: 14px;
  font-weight: 900;
}

body.page-user .reaction-workspace {
  align-items: stretch !important;
}

body.page-user .reaction-command-panel {
  max-height: 100% !important;
  overflow: hidden !important;
}

body.page-user .reaction-command-panel p {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.page-user .reaction-metric-stack {
  gap: 8px !important;
  margin-top: 14px !important;
}

body.page-user .reaction-metric-card {
  min-height: 0 !important;
  padding: 12px 14px !important;
}

body.page-user .reaction-metric-card .bbyd-card__title-kr {
  margin-top: 2px !important;
  font-size: 14px !important;
}

body.page-user .reaction-metric-card .bbyd-metric__value {
  margin-top: 6px !important;
  font-size: 29px !important;
  line-height: 1 !important;
}

body.page-user .reaction-main-panel {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) minmax(126px, .38fr) !important;
  gap: 14px !important;
  overflow: hidden !important;
}

body.page-user .reaction-stage-panel,
body.page-user .reaction-ranking-panel {
  overflow: hidden !important;
}

body.page-user .reaction-panel-head {
  padding: 14px 18px 12px !important;
}

body.page-user .reaction-stage {
  min-height: 205px !important;
}

body.page-user .reaction-stage__icon {
  font-size: 36px !important;
}

body.page-user .reaction-stage__title {
  font-size: 22px !important;
}

body.page-user .reaction-actions {
  padding: 10px 16px 6px !important;
}

body.page-user .reaction-footnote {
  padding: 0 16px 12px !important;
}

body.page-user .reaction-ranking-panel .reaction-daily-ranking {
  max-height: 120px !important;
  overflow: auto !important;
  padding: 4px 20px 10px !important;
}

/* User profile view: Hoomeee-style structured profile surface */
body.page-user .profile-cover-kicker,
body.page-user .profile-joined,
body.page-user .profile-info-label,
body.page-user .profile-tier-label {
  font-family: var(--bbyd-f-kr);
  color: var(--bbyd-dim);
  text-transform: uppercase;
}

body.page-user .profile-cover-kicker {
  position: absolute;
  top: 18px;
  left: 32px;
  font-size: 10px;
  letter-spacing: .35em;
  color: rgba(255,255,255,.65);
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  font-weight: 800;
}

body.page-user .profile-cover-actions {
  position: absolute;
  top: 18px;
  right: 32px;
  display: flex;
  gap: 8px;
}

body.page-user .profile-cover-edit {
  backdrop-filter: blur(8px);
  background: rgba(7,8,12,.6) !important;
  border-color: rgba(255,255,255,.25) !important;
}

body.page-user .profile-avatar-fallback {
  color: #fff;
  font-size: 42px;
}

body.page-user .bbyd-profile-id__body {
  flex: 1;
  min-width: 0;
}

body.page-user .bbyd-profile-id__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

body.page-user .profile-chip-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

body.page-user .profile-chip-icon--sm {
  width: 12px;
  height: 12px;
}

body.page-user .profile-joined {
  font-size: 11px;
  letter-spacing: .1em;
}

body.page-user .profile-greeting {
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  color: var(--bbyd-ink-2);
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 720px;
}

body.page-user .profile-content {
  padding-top: 24px;
}

body.page-user .profile-section-grid {
  margin-bottom: 18px;
}

body.page-user .profile-head-icon {
  font-size: 14px;
}

body.page-user .profile-head-icon--red { color: var(--bbyd-red); }
body.page-user .profile-head-icon--cyan { color: var(--bbyd-cyan); }
body.page-user .profile-head-icon--gold { color: var(--bbyd-gold); }
body.page-user .profile-head-icon--green { color: var(--bbyd-green); }

body.page-user .profile-metric {
  font-size: 30px !important;
}

body.page-user .profile-metric--lg {
  font-size: 36px !important;
}

body.page-user .profile-info-list,
body.page-user .profile-achievement-list {
  display: flex;
  flex-direction: column;
}

body.page-user .profile-info-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--bbyd-line);
  align-items: center;
}

body.page-user .profile-info-row:last-child,
body.page-user .profile-achievement-row:last-child {
  border-bottom: 0;
}

body.page-user .profile-info-label {
  font-size: 11px;
  letter-spacing: .15em;
}

body.page-user .profile-info-value {
  font-family: var(--bbyd-f-kr);
  font-weight: 800;
  font-size: 14px;
  color: var(--bbyd-ink);
  min-width: 0;
}

body.page-user .profile-info-value--sm {
  font-size: 13px;
}

body.page-user .profile-info-value--inline,
body.page-user .profile-agent-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.page-user .profile-info-value--red {
  font-size: 18px;
  color: var(--bbyd-red);
}

body.page-user .profile-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-user .profile-mini-btn {
  padding: 7px 10px !important;
  font-size: 12px !important;
}

body.page-user .profile-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--bbyd-line);
}

body.page-user .profile-tier-cell {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

body.page-user .profile-tier-icon,
body.page-user .profile-tier-placeholder {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

body.page-user .profile-tier-icon {
  object-fit: contain;
}

body.page-user .profile-tier-placeholder {
  display: grid;
  place-items: center;
  background: var(--bbyd-bg-3);
  color: var(--bbyd-dim-2);
}

body.page-user .profile-tier-copy {
  min-width: 0;
}

body.page-user .profile-tier-label {
  font-size: 9px;
  letter-spacing: .25em;
}

body.page-user .profile-tier-value {
  font-family: var(--bbyd-f-kr);
  font-weight: 900;
  font-size: 14px;
  color: var(--bbyd-ink);
  margin-top: 2px;
}

body.page-user .profile-tier-value--gold {
  color: var(--bbyd-gold);
}

body.page-user .profile-tier-divider {
  width: 1px;
  height: 36px;
  background: var(--bbyd-line);
}

body.page-user .profile-inline-link {
  color: var(--bbyd-cyan);
  text-decoration: none;
}

body.page-user .profile-inline-link i {
  font-size: 10px;
  margin-left: 3px;
}

body.page-user .profile-info-empty {
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  color: var(--bbyd-dim);
}

body.page-user .profile-agent-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  background: var(--bbyd-bg-3);
  border: 1px solid var(--bbyd-line);
  padding: 1px;
}

body.page-user .profile-agent-name {
  font-family: var(--bbyd-f-kr);
  font-size: 12px;
  color: var(--bbyd-ink-2);
}

body.page-user .profile-position-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

body.page-user .profile-setup-card {
  padding: 0 !important;
}

body.page-user .profile-setup-head {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid var(--bbyd-line);
}

body.page-user .profile-setup-body {
  padding: 14px 20px 20px;
}

body.page-user .profile-achievement-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--bbyd-line);
  align-items: center;
}

body.page-user .profile-achievement-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

body.page-user .profile-achievement-icon--gold {
  background: rgba(255,209,102,.12);
  border: 1px solid rgba(255,209,102,.3);
  color: var(--bbyd-gold);
}

body.page-user .profile-achievement-icon--cyan {
  background: var(--bbyd-cyan-soft);
  border: 1px solid rgba(0,229,255,.3);
  color: var(--bbyd-cyan);
}

body.page-user .profile-achievement-icon--red {
  background: var(--bbyd-red-soft);
  border: 1px solid rgba(255,70,85,.3);
  color: var(--bbyd-red);
}

body.page-user .profile-achievement-title {
  font-family: var(--bbyd-f-kr);
  font-weight: 900;
  font-size: 13px;
  color: var(--bbyd-ink);
}

body.page-user .profile-achievement-sub {
  font-family: var(--bbyd-f-kr);
  font-size: 11px;
  color: var(--bbyd-dim);
  margin-top: 2px;
}

body.page-user .profile-achievement-value {
  font-family: var(--bbyd-f-kr);
  font-weight: 900;
  font-size: 22px;
}

body.page-user .profile-achievement-value--gold { color: var(--bbyd-gold); }
body.page-user .profile-achievement-value--cyan { color: var(--bbyd-cyan); }
body.page-user .profile-achievement-value--red { color: var(--bbyd-red); }

body.page-user .profile-achievement-value span {
  font-size: 13px;
  color: var(--bbyd-dim);
  font-weight: 800;
  margin-left: 2px;
}

body.page-user .profile-error-card {
  padding: 48px 24px !important;
  text-align: center;
}

body.page-user .profile-error-icon {
  color: var(--bbyd-dim);
  font-size: 32px;
}

body.page-user .profile-error-title {
  font-size: 18px !important;
  margin-top: 12px;
}

body.page-user .profile-error-copy {
  font-family: var(--bbyd-f-kr);
  font-size: 13px;
  color: var(--bbyd-ink-2);
}

body.page-user #tab-profile-view .bbyd-profile-cover {
  height: 162px;
}

body.page-user #tab-profile-view .bbyd-profile-id {
  margin-top: -46px;
  gap: 18px;
}

body.page-user #tab-profile-view .bbyd-profile-id__avatar {
  width: 96px;
  height: 96px;
}

body.page-user #tab-profile-view .bbyd-profile-id__body {
  padding-bottom: 8px;
}

body.page-user #tab-profile-view .bbyd-profile-id__name {
  font-size: 26px;
}

body.page-user #tab-profile-view .profile-content {
  padding-top: 16px;
}

body.page-user #tab-profile-view .profile-section-grid {
  margin-bottom: 12px;
}

body.page-user #tab-profile-view #valorantSetupViewCard {
  display: none !important;
}

body.page-user #tab-profile-view .bbyd-grid--2.profile-section-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, .82fr) !important;
}

body.page-user #tab-profile-view .bbyd-card {
  padding: 14px !important;
}

body.page-user #tab-profile-view .bbyd-card__head {
  min-height: 62px;
}

body.page-user #tab-profile-view .profile-info-row {
  padding: 8px 0;
}

body.page-user #tab-profile-view .profile-tier-grid {
  padding: 10px 0;
}

body.page-user #tab-profile-view .profile-achievement-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 0;
}

body.page-user #tab-profile-view .profile-achievement-icon {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

body.page-user #tab-profile-view .profile-achievement-value {
  font-size: 18px;
}

body.page-user #tab-profile-view .profile-metric {
  font-size: 28px !important;
}

body.page-user #tab-profile-view .profile-metric--lg {
  font-size: 32px !important;
}

@media (max-width: 1180px) {
  body.page-user #tab-profile-view .bbyd-grid--2.profile-section-grid {
    grid-template-columns: 1fr !important;
  }
}

/* First-priority polish: sidebar and member dashboard */
body.page-user .sidebar {
  padding: 14px 14px 12px !important;
}

body.page-user .sidebar-brand {
  padding: 0 2px 12px !important;
}

body.page-user .sidebar-brand__mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
}

body.page-user .bbyd-sb-role {
  margin-bottom: 12px !important;
  border-radius: 13px !important;
}

body.page-user .bbyd-sb-role a {
  min-height: 34px !important;
}

body.page-user .sidebar-id {
  min-height: 66px !important;
  margin-bottom: 10px !important;
  padding: 10px !important;
  border-radius: 13px !important;
}

body.page-user .sidebar-id__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}

body.page-user .bbyd-sb-balances {
  gap: 8px !important;
  margin-bottom: 10px !important;
}

body.page-user .bbyd-sb-bal {
  min-height: 50px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
}

body.page-user .bbyd-sb-bal__value {
  font-size: 20px !important;
}

body.page-user .sidebar .nav-menu-wrapper {
  padding: 0 !important;
}

body.page-user .sidebar .nav-menu {
  gap: 4px !important;
  padding: 0 2px !important;
}

body.page-user .sidebar .nav-menu .menu-group {
  min-height: 34px !important;
  margin: 6px 0 2px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

body.page-user .feature-item a,
body.page-user .sidebar-bottom-menu a {
  min-height: 40px !important;
  padding: 9px 10px !important;
  border-radius: 13px !important;
}

body.page-user .feature-item a i,
body.page-user .sidebar-bottom-menu a i {
  width: 18px;
  text-align: center;
  color: #a9b8c9;
}

body.page-user .feature-item.active a i,
body.page-user .feature-item a:hover i {
  color: #fff;
}

body.page-user .sidebar-bottom-menu {
  gap: 7px !important;
  padding-top: 9px !important;
}

body.page-user #homeDashboardContainer {
  height: 100% !important;
}

body.page-user #homeDashboardContainer .app-home {
  gap: 10px !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.page-user #homeDashboardContainer .app-home__hero {
  min-height: 74px !important;
  padding: 12px 16px !important;
}

body.page-user #homeDashboardContainer .app-home__title {
  margin: 1px 0 3px !important;
  font-size: clamp(27px, 2vw, 34px) !important;
}

body.page-user #homeDashboardContainer .app-home__sub {
  font-size: 12px !important;
}

body.page-user #homeDashboardContainer .app-home__grid {
  display: block !important;
  min-height: 0 !important;
}

body.page-user #homeDashboardContainer .app-home-main {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 158px 120px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px !important;
}

body.page-user #homeDashboardContainer .app-home-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.page-user #homeDashboardContainer .app-home-metric {
  padding: 12px 14px !important;
}

body.page-user #homeDashboardContainer .app-home-metric__value {
  font-size: clamp(26px, 2.25vw, 34px) !important;
}

body.page-user #homeDashboardContainer .app-home-card--valorant {
  min-height: 0 !important;
  padding: 12px 14px !important;
}

body.page-user #homeDashboardContainer .app-home-card__title {
  font-size: 17px !important;
}

body.page-user #homeDashboardContainer .app-home-rowgrid {
  min-height: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.page-user #homeDashboardContainer .app-home-rowgrid .app-home-card {
  padding: 12px 14px !important;
  overflow: hidden !important;
}

body.page-user #homeDashboardContainer .app-home-list {
  gap: 5px !important;
}

body.page-user #homeDashboardContainer .app-home-list li:nth-child(n+5) {
  display: none !important;
}

/* Rebuilt member dashboard */
body.page-user #homeDashboardContainer .member-dash {
  display: grid;
  grid-template-rows: 88px minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.page-user #homeDashboardContainer .member-dash__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background:
    linear-gradient(120deg, rgba(0,168,139,.22), rgba(47,111,237,.12) 48%, rgba(255,91,102,.08)),
    #171d1b;
}

body.page-user #homeDashboardContainer .member-dash__brand span,
body.page-user #homeDashboardContainer .member-dash__panel-head span,
body.page-user #homeDashboardContainer .member-dash__mission-list span,
body.page-user #homeDashboardContainer .member-dash__statline span {
  color: #8ff4d4;
  font-size: 11px;
  font-weight: 900;
}

body.page-user #homeDashboardContainer .member-dash__brand h1 {
  margin: 1px 0 2px;
  color: #fff;
  font-size: 31px;
  font-weight: 950;
  line-height: 1;
}

body.page-user #homeDashboardContainer .member-dash__brand p,
body.page-user #homeDashboardContainer .member-dash__identity span,
body.page-user #homeDashboardContainer .member-dash__panel--news p {
  margin: 0;
  color: #aab5ad;
  font-size: 12px;
  font-weight: 800;
}

body.page-user #homeDashboardContainer .member-dash__identity {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(17,25,39,.72);
}

body.page-user #homeDashboardContainer .member-dash__identity strong {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-user #homeDashboardContainer .member-dash__identity span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-user #homeDashboardContainer .member-dash__actions {
  display: flex;
  gap: 8px;
}

body.page-user #homeDashboardContainer .member-dash__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: #111927;
  color: #f5f7f3;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

body.page-user #homeDashboardContainer .member-dash__actions a:nth-child(2) {
  border-color: transparent;
  background: #00a88b;
}

body.page-user #homeDashboardContainer .member-dash__board {
  display: grid;
  grid-template-columns: minmax(238px, .72fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: 136px 154px minmax(0, 1fr);
  grid-template-areas:
    "mission kpis kpis kpis"
    "mission valorant valorant valorant"
    "match rank rank news";
  gap: 10px;
  min-height: 0;
}

body.page-user #homeDashboardContainer .member-dash__panel,
body.page-user #homeDashboardContainer .member-dash__kpis .app-home-metric {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: #111927;
  overflow: hidden;
}

body.page-user #homeDashboardContainer .member-dash__panel {
  padding: 14px;
}

body.page-user #homeDashboardContainer .member-dash__panel--mission { grid-area: mission; background: linear-gradient(180deg, rgba(0,168,139,.12), rgba(17,25,39,.94)); }
body.page-user #homeDashboardContainer .member-dash__panel--valorant { grid-area: valorant; }
body.page-user #homeDashboardContainer .member-dash__panel--match { grid-area: match; }
body.page-user #homeDashboardContainer .member-dash__panel--rank { grid-area: rank; }
body.page-user #homeDashboardContainer .member-dash__panel--news { grid-area: news; }

body.page-user #homeDashboardContainer .member-dash__kpis {
  grid-area: kpis;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

body.page-user #homeDashboardContainer .member-dash__kpis .app-home-metric {
  padding: 13px 14px !important;
  border-radius: 18px !important;
}

body.page-user #homeDashboardContainer .member-dash__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

body.page-user #homeDashboardContainer .member-dash__panel-head i {
  color: #f7c45d;
}

body.page-user #homeDashboardContainer .member-dash__panel h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.18;
}

body.page-user #homeDashboardContainer .member-dash__mission-list {
  display: grid;
  gap: 8px;
}

body.page-user #homeDashboardContainer .member-dash__mission-list div,
body.page-user #homeDashboardContainer .member-dash__statline div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}

body.page-user #homeDashboardContainer .member-dash__mission-list div:last-child,
body.page-user #homeDashboardContainer .member-dash__statline div:last-child {
  border-bottom: 0;
}

body.page-user #homeDashboardContainer .member-dash__mission-list strong,
body.page-user #homeDashboardContainer .member-dash__statline strong {
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  text-align: right;
}

body.page-user #homeDashboardContainer .member-dash__statline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.page-user #homeDashboardContainer .member-dash__statline div {
  display: grid;
  gap: 4px;
  justify-content: stretch;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

body.page-user #homeDashboardContainer .member-dash__statline strong {
  text-align: left;
  color: #f7c45d;
}

body.page-user #homeDashboardContainer .member-dash__panel .app-home-list {
  gap: 6px !important;
}

body.page-user #homeDashboardContainer .member-dash__panel .app-home-list li {
  min-height: 24px;
}

body.page-user #homeDashboardContainer .member-dash__panel .app-home-empty {
  margin: 0;
}

body.page-user #homeDashboardContainer .member-dash__panel--news h2 {
  font-size: 18px;
}

@media (max-width: 1180px) {
  body.page-user :where(.events-workspace, .donation-workspace, .support-workspace, .reaction-workspace, .market-workspace),
  body.page-user .events-calendar-panel {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  body.page-user .main-content,
  body.page-admin .main-content,
  body.page-developer .main-content {
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 720px) {
  body.page-user .events-cal-weekday-row,
  body.page-user .events-cal-grid {
    gap: 5px;
  }

  body.page-user .events-cal-cell {
    min-height: 48px;
    padding: 5px;
  }

  body.page-user .attendance-summary-item__value {
    font-size: 26px !important;
  }
}

/* ===== Hoomeee market form and management views ===== */
body.page-user .market-form-shell {
  display: grid;
  gap: 18px;
}

body.page-user .market-form-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tab-line);
}

body.page-user .market-form-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  color: var(--tab-text);
  font-size: 24px;
  font-weight: 900;
}

body.page-user .market-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.page-user .market-form-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.page-user .market-form-field--full {
  grid-column: 1 / -1;
}

body.page-user .market-form-label {
  color: var(--tab-muted);
  font-size: 12px;
  font-weight: 900;
}

body.page-user .market-form-input {
  width: 100% !important;
}

body.page-user .market-form-warning {
  margin: 2px 0 0;
  color: #ff8a93;
  font-size: 12px;
  font-weight: 800;
}

body.page-user .market-form-error {
  color: #ff8a93;
  font-size: 13px;
  font-weight: 800;
}

body.page-user .market-form-error:empty {
  display: none;
}

body.page-user .market-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

body.page-user #marketCreateView textarea,
body.page-user #marketEditView textarea {
  min-height: 220px !important;
}

body.page-user #marketCreateView [id$="Toolbar"],
body.page-user #marketEditView [id$="Toolbar"] {
  padding: 5px 8px !important;
}

body.page-user .market-form-back {
  margin-top: 12px;
}

body.page-user .market-image-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
}

body.page-user .market-image-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-height: 42px;
  padding: 0 15px;
  border: 1px dashed var(--tab-line-strong);
  border-radius: 12px;
  background: #111927;
  color: var(--tab-muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

body.page-user .market-image-picker:hover {
  border-color: rgba(0,168,139,.45);
  color: #9bf2d7;
}

body.page-user .market-image-picker input {
  display: none !important;
}

body.page-user .market-image-thumb {
  position: relative;
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  overflow: hidden;
  border: 2px solid var(--tab-line);
  border-radius: 16px;
  background: #111927;
  cursor: pointer;
}

body.page-user .market-image-thumb.is-cover {
  border-color: var(--tab-green);
}

body.page-user .market-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-user .market-image-thumb__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--tab-green);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

body.page-user .market-image-thumb__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.58) !important;
  color: #fff !important;
}

body.page-user .market-manage-list {
  display: grid;
  gap: 10px;
}

body.page-user .market-manage-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--tab-line);
  border-radius: 16px;
  background: var(--tab-panel-2);
}

body.page-user .market-manage-card__main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.page-user .market-manage-card__title {
  min-width: 0;
  overflow: hidden;
  color: var(--tab-text);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-user .market-manage-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--tab-muted);
  font-size: 12px;
}

body.page-user .market-manage-card__side {
  display: grid;
  justify-items: end;
  gap: 9px;
}

body.page-user .market-manage-card__price {
  color: #f5c15d;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.page-user .market-manage-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

body.page-user .market-status-pill {
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid var(--tab-line-strong);
  border-radius: 999px;
  color: var(--tab-muted);
  font-size: 11px;
  font-weight: 900;
}

body.page-user .market-status-pill.is-active {
  border-color: rgba(0,168,139,.45);
  color: #9bf2d7;
  background: rgba(0,168,139,.12);
}

body.page-user .market-status-pill.is-reserved {
  border-color: rgba(189,116,32,.5);
  color: #f5c15d;
  background: rgba(189,116,32,.13);
}

body.page-user .market-status-pill.is-sold {
  border-color: rgba(47,111,237,.48);
  color: #9db8ff;
  background: rgba(47,111,237,.14);
}

body.page-user .market-notif-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--tab-line);
  border-radius: 14px;
  background: var(--tab-panel-2);
  cursor: pointer;
}

body.page-user .market-notif-row__text {
  flex: 1;
  min-width: 0;
}

body.page-user .market-notif-row__title {
  color: var(--tab-text);
  font-size: 13px;
  font-weight: 900;
}

body.page-user .market-notif-row__desc {
  margin-top: 2px;
  color: var(--tab-muted);
  font-size: 11px;
}

body.page-user .market-notif-toggle {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 22px;
  border: 1px solid var(--tab-line);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  transition: background .15s, border-color .15s;
}

body.page-user .market-notif-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  transition: left .15s, background .15s;
}

body.page-user .market-notif-toggle.is-on {
  border-color: rgba(0,168,139,.55);
  background: rgba(0,168,139,.22);
}

body.page-user .market-notif-toggle.is-on span {
  left: 22px;
  background: #9bf2d7;
}

body.page-user .market-notif-row input[type="checkbox"] {
  display: none !important;
}

body.page-user .market-notif-empty {
  padding: 12px 0;
  color: var(--tab-muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 720px) {
  body.page-user .market-form-head,
  body.page-user .market-manage-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.page-user .market-form-grid {
    grid-template-columns: 1fr;
  }

  body.page-user .market-manage-card__side {
    justify-items: start;
  }

  body.page-user .market-manage-card__actions {
    justify-content: flex-start;
  }
}

/* ===== Profile edit workspace rebuild ===== */
body.page-user #tab-profile-edit {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.page-user .profile-edit-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.page-user .profile-edit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(0,168,139,.18), transparent 36%),
    linear-gradient(90deg, #1f241f 0%, #121a27 100%);
}

body.page-user .profile-edit-top__copy {
  min-width: 0;
}

body.page-user .profile-edit-top__eyebrow,
body.page-user .profile-edit-card__kicker,
body.page-user .profile-edit-preview__head span {
  display: block;
  margin-bottom: 4px;
  color: #9bf2d7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.page-user .profile-edit-top h1 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0;
}

body.page-user .profile-edit-top p {
  margin: 3px 0 0;
  color: #a7b2aa;
  font-size: 12px;
  line-height: 1.45;
}

body.page-user .profile-edit-top__actions {
  flex-shrink: 0;
}

body.page-user .profile-edit-board {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .72fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

body.page-user .profile-edit-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 12px;
  min-height: 0;
  padding-right: 2px;
  overflow: auto;
  scrollbar-width: thin;
}

body.page-user .profile-edit-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: #1e211f;
  color: #f6f7f2;
  box-shadow: none;
}

body.page-user .profile-edit-card--setup,
body.page-user .profile-edit-card--banner {
  grid-column: 1 / -1;
}

body.page-user .profile-edit-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #111927;
}

body.page-user .profile-edit-card__head h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
}

body.page-user .profile-edit-card__head > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(155,242,215,.22);
  border-radius: 13px;
  background: rgba(0,168,139,.15);
  color: #9bf2d7;
}

body.page-user .profile-edit-card--valorant .profile-edit-card__head > i {
  border-color: rgba(157,184,255,.26);
  background: rgba(47,111,237,.16);
  color: #9db8ff;
}

body.page-user .profile-edit-card--setup .profile-edit-card__head > i {
  border-color: rgba(245,193,93,.28);
  background: rgba(189,116,32,.17);
  color: #f5c15d;
}

body.page-user .profile-edit-card--banner .profile-edit-card__head > i {
  border-color: rgba(56,189,248,.28);
  background: rgba(56,189,248,.14);
  color: #9bdcff;
}

body.page-user .profile-edit-card__body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

body.page-user .profile-edit-card__body--row,
body.page-user .profile-edit-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
}

body.page-user .profile-edit-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

body.page-user .profile-edit-field > span,
body.page-user .profile-edit-toggle-box > span {
  color: #a7b2aa;
  font-size: 12px;
  font-weight: 850;
}

body.page-user .profile-edit-field em {
  color: #7f8b84;
  font-style: normal;
  font-weight: 700;
}

body.page-user .profile-edit-input,
body.page-user #valorantSetupCard :where(input:not([type="checkbox"]), select, textarea) {
  width: 100%;
  min-height: 42px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  background: #111927 !important;
  color: #f6f7f2 !important;
  font-size: 13px !important;
  font-weight: 750;
}

body.page-user .profile-edit-input--readonly {
  cursor: not-allowed;
  opacity: .68;
}

body.page-user .profile-edit-input--hex {
  text-transform: uppercase;
}

body.page-user .profile-edit-toggle-box {
  display: grid;
  gap: 8px;
  min-width: 130px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: #151917;
}

body.page-user .profile-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.page-user .profile-edit-actions .bbyd-btn,
body.page-user .profile-edit-save-inline,
body.page-user .profile-edit-crosshair .bbyd-btn,
body.page-user .profile-edit-setup-footer .bbyd-btn,
body.page-user .profile-edit-top__actions .bbyd-btn {
  min-height: 40px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}

body.page-user .profile-edit-note {
  margin: 0;
  color: #a7b2aa;
  font-size: 12px;
  line-height: 1.55;
}

body.page-user .profile-edit-note a {
  color: #9bf2d7;
  font-weight: 850;
}

body.page-user .profile-edit-note--compact {
  font-size: 11px;
}

body.page-user .profile-edit-setup-body {
  max-height: min(57vh, 620px);
  overflow: auto;
  scrollbar-width: thin;
}

body.page-user .profile-edit-section,
body.page-user .profile-edit-crosshair-detail {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: #111927;
}

body.page-user .profile-edit-section summary,
body.page-user .profile-edit-crosshair-detail summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 14px;
  color: #f6f7f2;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

body.page-user .profile-edit-section summary::-webkit-details-marker,
body.page-user .profile-edit-crosshair-detail summary::-webkit-details-marker {
  display: none;
}

body.page-user .profile-edit-section .vs-section__body,
body.page-user .profile-edit-crosshair-detail .vs-crosshair-detail-body {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

body.page-user .profile-edit-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

body.page-user .profile-edit-field-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-user .profile-edit-crosshair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

body.page-user .profile-edit-crosshair-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: #151917;
}

body.page-user .profile-edit-check-field {
  align-self: stretch;
  place-content: end start;
}

body.page-user .profile-edit-check-field span,
body.page-user .vs-cross-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c8d1cb;
}

body.page-user .profile-edit-setup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

body.page-user .profile-edit-progress {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: #151917;
  color: #a7b2aa;
  font-size: 12px;
  font-weight: 850;
}

body.page-user .profile-edit-banner {
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
  align-items: center;
}

body.page-user .profile-edit-banner__image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #111927;
}

body.page-user .profile-edit-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-user .profile-edit-banner__image span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(0,0,0,.56);
  color: #fff;
}

body.page-user .profile-edit-banner__copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.page-user .profile-edit-banner__copy p {
  margin: 0;
  color: #a7b2aa;
  font-size: 13px;
  line-height: 1.55;
}

body.page-user .profile-edit-banner__copy strong {
  color: #f5c15d;
  font-size: 12px;
}

body.page-user .profile-edit-hidden-input {
  display: none !important;
}

body.page-user .profile-edit-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: #1e211f;
}

body.page-user .profile-edit-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #111927;
}

body.page-user .profile-edit-preview__head strong {
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

body.page-user .profile-edit-preview__frame {
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

body.page-user .profile-edit-preview__frame .embed-preview-card {
  min-height: 100%;
}

@media (max-width: 1280px) {
  body.page-user .profile-edit-board {
    grid-template-columns: 1fr;
  }

  body.page-user .profile-edit-preview {
    min-height: 420px;
  }
}

@media (max-width: 920px) {
  body.page-user #tab-profile-edit {
    overflow: auto;
  }

  body.page-user .profile-edit-shell {
    height: auto;
    overflow: visible;
  }

  body.page-user .profile-edit-top,
  body.page-user .profile-edit-card__body--row,
  body.page-user .profile-edit-split,
  body.page-user .profile-edit-banner {
    grid-template-columns: 1fr;
  }

  body.page-user .profile-edit-top {
    display: grid;
    align-items: start;
  }

  body.page-user .profile-edit-main {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  body.page-user .profile-edit-setup-body {
    max-height: none;
  }

  body.page-user .profile-edit-field-grid,
  body.page-user .profile-edit-field-grid--four,
  body.page-user .profile-edit-crosshair {
    grid-template-columns: 1fr;
  }

  body.page-user .profile-edit-actions {
    justify-content: flex-start;
  }
}