@charset "UTF-8";
.highlight .err {
  color: #e3d2d2;
  background-color: #8c2121; }
.highlight .c {
  color: #8a8a8a; }
.highlight .c1 {
  color: #8a8a8a; }
.highlight .cm {
  color: #8a8a8a; }
.highlight .cp {
  color: #8a8a8a; }
.highlight .cs {
  color: #8a8a8a;
  font-style: italic; }
.highlight .gd {
  color: #d85a5a; }
.highlight .gd .x {
  color: #d85a5a; }
.highlight .ge {
  font-style: italic; }
.highlight .gh {
  color: #999999; }
.highlight .gi {
  color: #4ec64e; }
.highlight .gi .x {
  color: #4ec64e; }
.highlight .go {
  color: #888888; }
.highlight .gp {
  color: #555555; }
.highlight .gr {
  color: #f07178; }
.highlight .gs {
  font-weight: bold; }
.highlight .gt {
  color: #f07178; }
.highlight .gu {
  color: #aaaaaa; }
.highlight .k {
  color: #d85a7b; }
.highlight .kc {
  color: #d85a7b; }
.highlight .kd {
  color: #d85a7b; }
.highlight .kp {
  color: #d85a7b; }
.highlight .kr {
  color: #d85a7b; }
.highlight .kt {
  color: #ffcb6b; }
.highlight .n {
  color: #c7d1d8; }
.highlight .na {
  color: #11a69f; }
.highlight .nb {
  color: #d85a7b; }
.highlight .bp {
  color: #999999; }
.highlight .nc {
  color: #11a69f; }
.highlight .ne {
  color: #990000; }
.highlight .nf {
  color: #5ab780; }
.highlight .ni {
  color: #11a69f; }
.highlight .nn {
  color: #11a69f; }
.highlight .no {
  color: #9d99e6; }
.highlight .nt {
  color: #de3581; }
.highlight .nv {
  color: #9680b1; }
.highlight .vc {
  color: #9680b1; }
.highlight .vg {
  color: #9680b1; }
.highlight .vi {
  color: #9680b1; }
.highlight .o {
  color: #bcd890; }
.highlight .ow {
  color: #bcd890; }
.highlight .m {
  color: #9d99e6; }
.highlight .mf {
  color: #9d99e6; }
.highlight .mh {
  color: #9d99e6; }
.highlight .mi {
  color: #9d99e6; }
.highlight .il {
  color: #9d99e6; }
.highlight .mo {
  color: #9d99e6; }
.highlight .s {
  color: #baa94a; }
.highlight .s1 {
  color: #baa94a; }
.highlight .s2 {
  color: #baa94a; }
.highlight .sb {
  color: #baa94a; }
.highlight .sc {
  color: #baa94a; }
.highlight .sd {
  color: #baa94a; }
.highlight .se {
  color: #baa94a; }
.highlight .sh {
  color: #baa94a; }
.highlight .si {
  color: #baa94a; }
.highlight .sr {
  color: #009926; }
.highlight .ss {
  color: #3c90f5; }
.highlight .sx {
  color: #baa94a; }
.highlight .w {
  color: #eeffff; }
.highlight .lineno, .highlight .gl {
  color: #8a8a8a; }
.highlight .hll {
  background-color: #373730; }

html {
  font-size: 16px; }

/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0; }

/**
 * Basic styling
 */
body {
  font: 400 16px/1.5 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
  color: #959595;
  background-color: #181818;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow-wrap: break-word; }

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
div.highlight,
figure.highlight {
  margin-bottom: 15px; }

hr {
  margin-top: 30px;
  margin-bottom: 30px; }

/**
 * `main` element
 */
main {
  display: block;
  /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle; }

/**
 * Figures
 */
figure > img {
  display: block; }

figcaption {
  font-size: 14px; }

/**
 * Lists
 */
ul, ol {
  margin-left: 30px; }

li > ul,
li > ol {
  margin-bottom: 0; }

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
  color: #bbbbbb;
  font-weight: 500; }

/**
 * Links
 */
a {
  color: #5691cd;
  text-decoration: none; }
  a:visited {
    color: #80bbff; }
  a:hover {
    color: #959595;
    text-decoration: underline #999999;
    text-underline-offset: 3px; }
  .social-media-list a:hover {
    text-decoration: none; }
    .social-media-list a:hover .username {
      text-decoration: underline; }

/**
 * Blockquotes
 */
blockquote {
  color: #999999;
  border-left: 4px solid #2b2b2b;
  padding-left: 15px;
  font-size: 1.05rem;
  font-style: italic; }
  blockquote > :last-child {
    margin-bottom: 0; }
  blockquote i, blockquote em {
    font-style: normal; }

/**
 * Code formatting
 */
pre,
code {
  font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
  background-color: #222222; }
  @media screen and (max-width: 600px) {
    pre,
    code {
      font-family: monospace; } }

pre {
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.4;
  color: #bbbbbb;
  overflow-x: auto; }
  pre > code {
    display: inline-block;
    width: 100%; }

div.highlight, figure.highlight {
  border: 1px solid #2b2b2b;
  border-radius: 3px; }
  div.highlight pre, figure.highlight pre {
    margin: 0; }
  div.highlight table, div.highlight tbody, div.highlight th, div.highlight tr, div.highlight td, figure.highlight table, figure.highlight tbody, figure.highlight th, figure.highlight tr, figure.highlight td {
    margin: 0;
    padding: 0;
    border: 0; }
  div.highlight .lineno, div.highlight .gl, figure.highlight .lineno, figure.highlight .gl {
    text-align: right; }

figure.highlight table {
  margin: -8px -12px -14px; }
figure.highlight td.gutter {
  border-right: 1px solid #2b2b2b; }
figure.highlight td.code {
  width: 100%; }

code.highlighter-rouge {
  padding: 1px 5px;
  font-size: 14px;
  border: 1px solid #2b2b2b;
  border-radius: 3px; }

/**
 * Wrapper
 */
.wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px; }
  @media screen and (max-width: 600px) {
    .wrapper {
      padding-right: 18px;
      padding-left: 18px; } }

/**
 * Clearfix
 */
.wrapper:after {
  content: "";
  display: table;
  clear: both; }

/**
 * Icons
 */
.orange {
  color: #f66a0a; }

.grey {
  color: #828282; }

.svg-icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
  overflow: visible; }

/**
 * Tables
 */
table {
  margin-bottom: 30px;
  width: 100%;
  text-align: left;
  color: #959595;
  border-collapse: collapse;
  border: 1px solid #2b2b2b; }
  table tr:nth-child(even) {
    background-color: #222222; }
  table th, table td {
    padding: 10px 15px; }
  table th {
    background-color: #323232;
    border: 1px solid #3e3e3e; }
  table td {
    border: 1px solid #2b2b2b; }
  @media screen and (max-width: 800px) {
    table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar; } }

/**
 * Site header
 */
.site-header {
  position: relative;
  width: 100%;
  min-height: 55.95px;
  line-height: 54px;
  background-color: #181818;
  border-top: 5px solid #999999;
  border-bottom: 1px solid #2b2b2b; }

.site-title {
  font-size: 1.625rem;
  font-weight: 300;
  letter-spacing: -1px;
  margin-bottom: 0;
  float: left; }
  @media screen and (max-width: 600px) {
    .site-title {
      padding-right: 45px; } }
  .site-title, .site-title:visited {
    color: #a6a6a6; }

.site-nav {
  float: right;
  border: none;
  background-color: inherit; }
  .site-nav label[for="nav-trigger"], .site-nav #nav-trigger {
    display: none; }
  .site-nav .nav-item {
    color: #959595; }
    .site-nav .nav-item:not(:last-child) {
      margin-right: 15px; }
  @media screen and (max-width: 600px) {
    .site-nav {
      position: absolute;
      top: 9px;
      right: 18px;
      background-color: #181818;
      border: 1px solid #2b2b2b;
      border-radius: 5px;
      text-align: right; }
      .site-nav label[for="nav-trigger"] {
        display: block;
        float: right;
        width: 36px;
        height: 36px;
        cursor: pointer; }
      .site-nav .menu-icon {
        float: right;
        width: 36px;
        height: 26px;
        line-height: 0;
        padding-top: 18px;
        text-align: center; }
        .site-nav .menu-icon::before {
          font-family: "Font Awesome 7 Free";
          font-weight: 900; }
        .site-nav .menu-icon > svg path {
          fill: #999999; }
      .site-nav #nav-trigger ~ label[for=nav-trigger] .menu-icon::before {
        content: "\f0c9";
        font-size: 1.25em; }
      .site-nav #nav-trigger ~ .nav-items {
        clear: both;
        display: none; }
      .site-nav #nav-trigger:checked ~ label[for=nav-trigger] .menu-icon::before {
        content: "\f00d";
        font-size: 1.5em; }
      .site-nav #nav-trigger:checked ~ .nav-items {
        display: block;
        padding-bottom: 5px; }
        .site-nav #nav-trigger:checked ~ .nav-items .nav-item {
          margin-left: 20px;
          padding: 5px 10px; }
      .site-nav .nav-item {
        display: block;
        margin-right: 15px;
        padding: 5px 0;
        color: #959595;
        line-height: 1.5; } }

/**
 * Site footer
 */
.site-footer {
  border-top: 1px solid #2b2b2b;
  padding: 30px 0; }

.footer-heading {
  font-size: 1.125rem;
  margin-bottom: 15px; }

.feed-subscribe .svg-icon {
  padding: 5px 5px 2px 0; }

.contact-list,
.social-media-list {
  list-style: none;
  margin-left: 0; }

.footer-col-wrapper,
.social-links {
  font-size: 0.9375rem;
  color: #858585; }

.footer-col {
  margin-bottom: 15px; }

.footer-col-1,
.footer-col-2 {
  width: calc(50% - (30px / 2)); }

.footer-col-3 {
  width: calc(100% - (30px / 2)); }

@media screen and (min-width: 800px) {
  .footer-col-1 {
    width: calc(35% - (30px / 2)); }

  .footer-col-2 {
    width: calc(20% - (30px / 2)); }

  .footer-col-3 {
    width: calc(45% - (30px / 2)); } }
@media screen and (min-width: 600px) {
  .footer-col-wrapper {
    display: flex; }

  .footer-col {
    width: calc(100% - (30px / 2));
    padding: 0 15px; }
    .footer-col:first-child {
      padding-right: 15px;
      padding-left: 0; }
    .footer-col:last-child {
      padding-right: 0;
      padding-left: 15px; } }
/**
 * Page content
 */
.page-content {
  padding: 30px 0;
  flex: 1 0 auto; }

.page-heading {
  font-size: 2rem; }

.post-list-heading {
  font-size: 1.75rem; }

.post-list {
  margin-left: 0;
  list-style: none; }
  .post-list > li {
    margin-bottom: 30px; }

.post-meta {
  font-size: 14px;
  color: #858585; }

.post-link {
  display: block;
  font-size: 1.5rem; }

/**
 * Posts
 */
.post-header {
  margin-bottom: 30px;
  padding-bottom: 18px;
  text-align: center;
  border-bottom: 1px solid #2b2b2b; }

.post-meta .bullet-divider {
  padding-inline: 15px; }
.post-meta .meta-label {
  font-weight: 600; }
.post-meta .force-inline {
  display: inline; }
  .post-meta .force-inline::before {
    content: "•";
    padding-inline: 5px; }
.post-meta .post-authors {
  margin-top: 3px; }

.post-title,
.post-content h1 {
  margin-bottom: 10px;
  font-size: 2.625rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.15; }
  @media screen and (min-width: 800px) {
    .post-title,
    .post-content h1 {
      font-size: 2.625rem; } }

.post-content {
  margin-bottom: 30px; }
  .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
    margin-top: 30px; }
  .post-content h2 {
    font-size: 1.75rem; }
    @media screen and (min-width: 800px) {
      .post-content h2 {
        font-size: 2rem; } }
  .post-content h3 {
    font-size: 1.375rem; }
    @media screen and (min-width: 800px) {
      .post-content h3 {
        font-size: 1.625rem; } }
  .post-content h4 {
    font-size: 1.25rem; }
  .post-content h5 {
    font-size: 1.125rem; }
  .post-content h6 {
    font-size: 1.0625rem; }

.comments-disabled-message {
  text-align: center;
  font-weight: 300; }

.social-media-list {
  display: table;
  margin: 0 auto; }
  .social-media-list li {
    float: left;
    min-width: 45px;
    min-height: 45px;
    text-align: center;
    margin: 5px 10px 5px 0; }
    .social-media-list li:last-of-type {
      margin-right: 0; }
    .social-media-list li a {
      display: block;
      padding: 10px 12px;
      border: 1px solid #2b2b2b; }
      .social-media-list li a:hover {
        border-color: #a6a6a6; }

/**
 * Pagination navbar
 */
.pagination {
  display: table;
  margin: 0 auto;
  list-style-type: none; }
  .pagination li {
    float: left;
    margin: 0 3px;
    min-width: 45px;
    min-height: 45px;
    text-align: center; }
    .pagination li a {
      display: block;
      text-decoration: none;
      border: 1px solid #2b2b2b; }
      .pagination li a:hover {
        border-color: #a6a6a6; }
    .pagination li a, .pagination li div {
      min-width: 41px;
      padding: 10px 12px;
      text-align: center;
      box-sizing: border-box; }
    .pagination li div {
      border: 1px solid transparent; }
      .pagination li div.pager-edge {
        color: #2b2b2b;
        border: 1px dashed; }
      .pagination li div.current-page {
        font-weight: bold; }

/**
 * Task-lists
 */
.task-list {
  margin-left: 0;
  padding-left: 18px; }

.task-list-item {
  list-style-type: none; }
  .task-list-item-checkbox {
    position: relative;
    margin-right: 9px;
    margin-left: -15px;
    appearance: none;
    border: 8px solid #2b2b2b;
    vertical-align: text-top;
    z-index: -1; }
    .task-list-item-checkbox::after {
      position: absolute;
      top: -8px;
      left: -3px;
      width: 4px;
      height: 10px;
      content: "";
      border: solid transparent;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg); }
    .task-list-item-checkbox:checked::after {
      border-color: #999999; }

/**
 * Grid helpers
 */
@media screen and (min-width: 800px) {
  .one-half {
    width: calc(50% - (30px / 2)); } }
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

.site-nav .trigger {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 60px;
  /* adjust as needed */
  width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000; }

.site-nav .nav-trigger:checked ~ label + .trigger,
.site-nav .nav-trigger:checked + label + .trigger {
  display: flex; }

@media (min-width: 600px) {
  .site-nav .trigger {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    box-shadow: none;
    width: auto; } }
#loginArea.page-link {
  /* Add any custom login link styles here */
  opacity: 1; }

#site-logo {
  height: 40px;
  vertical-align: middle;
  margin-right: 10px; }

:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Base Typography Styles
 * Override default code and text formatting with user preferences
 */
/** Code formatting - override hardcoded dark background */
pre, code {
  font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
  background-color: var(--panel) !important;
  color: var(--pref-text-color) !important;
  padding: 2px 6px;
  border-radius: 3px; }

pre {
  padding: 1rem;
  border: 1px solid var(--ui-border);
  overflow-x: auto; }
  pre code {
    background-color: transparent !important;
    padding: 0; }

/** Inline code in markdown */
p code,
li code,
td code {
  background-color: var(--panel) !important;
  color: var(--pref-text-color) !important; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

button, .primary, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  color: white;
  background-color: rgba(80, 80, 80, 0.7);
  transition: all 0.5s;
  transition: all 0.5s; }
  button:hover, .primary:hover, .danger-button:hover, .ui-runner-container .stopBtn:hover, .game-runner-container .stopBtn:hover, .warning-button:hover, .game-runner-container .pauseBtn:hover, .success-button:hover, .info-button:hover, .hallpass-buttons button:hover {
    background-color: rgba(55, 55, 55, 0.7); }
  button:active, .primary:active, .danger-button:active, .ui-runner-container .stopBtn:active, .game-runner-container .stopBtn:active, .warning-button:active, .game-runner-container .pauseBtn:active, .success-button:active, .info-button:active, .hallpass-buttons button:active {
    background-color: rgba(29, 29, 29, 0.7); }

.secondary {
  color: #999999;
  background-color: rgba(120, 120, 128, 0.12);
  transition: all 0.5s;
  transition: all 0.5s; }
  .secondary:hover {
    background-color: rgba(95, 95, 102, 0.12); }
  .secondary:active {
    background-color: rgba(71, 71, 75, 0.12); }

.filledHighlight {
  background-color: #007aff;
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledHighlight:hover {
    background-color: #0062cc; }
  .filledHighlight:active {
    background-color: #004999; }

.filledTinted {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.15);
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledTinted:hover {
    background-color: rgba(0, 98, 204, 0.15); }
  .filledTinted:active {
    background-color: rgba(0, 73, 153, 0.15); }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/* define class for redifined button */
.button {
  width: auto;
  height: auto;
  border-radius: 10px;
  background-color: #21807c;
  border: 3px solid black;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 1;
  grid-row: span 1;
  transition: all 0.5s; }

/* darkens the background color on hover to create a selecting effect */
.button:hover {
  background-color: #373737; }

/* "row style" is flexible size and aligns pictures in center */
.row {
  align-items: center;
  display: flex; }

/* "column style" is one-third of the width with padding */
.column {
  flex: 16.66%;
  padding: 3px; }

/* Animation container */
#animation {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; }

/* Calculator container - modern grid layout */
.calculator-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 12px; }

/* Output display */
.calculator-output {
  grid-column: span 4;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: #fff;
  text-align: right;
  border: none;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  overflow: hidden; }

/* Base button mixin for calculator */
/* Number buttons */
.calculator-number {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Zero button spans 2 columns */ }
  .calculator-number:hover {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  .calculator-number:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-number.zero {
    grid-column: span 2;
    aspect-ratio: auto;
    padding: 0 2rem; }

/* Operation buttons (+, -, *, /) */
.calculator-operation {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #ff9500, #e68a00);
  color: #fff;
  box-shadow: 0 4px 6px rgba(255, 149, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-operation:hover {
    background: linear-gradient(145deg, #ffaa33, #ff9500);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 149, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-operation:active {
    transform: translateY(0); }

/* Clear button */
.calculator-clear {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(1rem, 3vw, 1.2rem); }
  .calculator-clear:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-clear:active {
    transform: translateY(0); }

/* Special operation buttons (sqrt, %) */
.calculator-special {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-special:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-special:active {
    transform: translateY(0); }

/* Equals button */
.calculator-equals {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #34c759, #28a745);
  color: #fff;
  box-shadow: 0 4px 6px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-equals:hover {
    background: linear-gradient(145deg, #4cd964, #34c759);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(52, 199, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-equals:active {
    transform: translateY(0); }

/* Responsive breakpoints */
@media (max-width: 480px) {
  .calculator-container {
    max-width: 100%;
    padding: 1rem;
    gap: 8px;
    border-radius: 16px; }

  .calculator-output {
    min-height: 60px;
    padding: 0.75rem 1rem; } }
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-container {
    max-width: 350px; } }
@media (min-width: 769px) {
  .calculator-container {
    max-width: 400px; }

  .calculator-number,
  .calculator-operation,
  .calculator-clear,
  .calculator-special,
  .calculator-equals {
    min-height: 70px; } }
/* Disable canvas filter if present */
canvas {
  filter: none; }

.iridescent {
  position: relative;
  overflow: hidden;
  background: blue;
  /* base blue */
  color: white; }
  .iridescent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(200, 200, 200, 0.6) 50%, rgba(255, 255, 255, 0.2) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s infinite linear;
    z-index: 0; }
  .iridescent span,
  .iridescent a {
    position: relative;
    z-index: 1; }

@keyframes shimmer {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 100% 50%; } }
/**
 * Runner Control Buttons
 * Standardized button styles for code/UI/game runner interfaces
 * These classes provide semantic, theme-aware buttons for common runner actions
 * 
 * Uses colors from root-color-map.scss - single source of truth
 */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

.danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important; }
  .danger-button:hover, .ui-runner-container .stopBtn:hover, .game-runner-container .stopBtn:hover {
    background-color: #c62232 !important;
    border-color: #c62232 !important;
    opacity: 0.95; }
  .danger-button:active, .ui-runner-container .stopBtn:active, .game-runner-container .stopBtn:active {
    background-color: #a71d2a !important; }
  .danger-button:disabled, .ui-runner-container .stopBtn:disabled, .game-runner-container .stopBtn:disabled {
    background-color: rgba(220, 53, 69, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.warning-button, .game-runner-container .pauseBtn {
  background-color: #FBBF24 !important;
  border-color: #FBBF24 !important;
  color: #000 !important; }
  .warning-button:hover, .game-runner-container .pauseBtn:hover {
    background-color: #f2b004 !important;
    border-color: #f2b004 !important;
    opacity: 0.95; }
  .warning-button:active, .game-runner-container .pauseBtn:active {
    background-color: #cf9604 !important; }
  .warning-button:disabled, .game-runner-container .pauseBtn:disabled {
    background-color: #5A3D2D !important;
    color: rgba(0, 0, 0, 0.5) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.success-button {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: white !important; }
  .success-button:hover {
    background-color: #0d9367 !important;
    border-color: #0d9367 !important;
    opacity: 0.95; }
  .success-button:active {
    background-color: #0a7350 !important; }
  .success-button:disabled {
    background-color: rgba(40, 167, 69, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.info-button {
  background-color: #3182CE !important;
  border-color: #3182CE !important;
  color: white !important; }
  .info-button:hover {
    background-color: #296dad !important;
    border-color: #296dad !important;
    opacity: 0.95; }
  .info-button:active {
    background-color: #225b90 !important; }
  .info-button:disabled {
    background-color: rgba(49, 130, 206, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.danger-button.icon-only, .ui-runner-container .icon-only.stopBtn, .game-runner-container .icon-only.stopBtn,
.warning-button.icon-only,
.game-runner-container .icon-only.pauseBtn,
.success-button.icon-only,
.info-button.icon-only {
  width: 38px;
  min-width: 38px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  @media (max-width: 768px) {
    .danger-button.icon-only, .ui-runner-container .icon-only.stopBtn, .game-runner-container .icon-only.stopBtn,
    .warning-button.icon-only,
    .game-runner-container .icon-only.pauseBtn,
    .success-button.icon-only,
    .info-button.icon-only {
      width: 44px;
      min-width: 44px; } }

.container {
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
  background: #1c1c1e;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); }

.queue-info {
  text-align: center;
  font-size: 18px;
  color: #48484a;
  margin-bottom: 15px; }

.queue-list {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 12px; }

.queue-list p {
  font-size: 16px;
  color: #636366;
  margin-bottom: 10px; }

#studentList {
  list-style: none;
  padding: 0; }

#studentList li {
  font-size: 16px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

.queue-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px; }

.post-list {
  font-size: 0.95em;
  list-style: none;
  margin: 0;
  padding: 0; }

.post-list-heading {
  /* Leave header size as default or adjust here if needed */
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.75em; }

.post-list li {
  background-color: var(--bg-1);
  border: 1px solid var(--accent);
  border-radius: 0.5em;
  margin-bottom: 1.5em;
  padding: 1em; }

.post-list li:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px); }

@media only screen and (max-width: 767px) {
  .post-list {
    padding: 10px;
    font-size: 0.7125em; }

  .post-list-heading {
    font-size: 2em; }

  .post-list li {
    padding: 0.75em;
    margin-bottom: 1em; } }
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem;
  z-index: 9999;
  padding-top: 50px; }
  @media (max-width: 768px) {
    .modal {
      padding: 60px 0 0 0; } }

.modal-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #1F2020;
  border: 1px solid #2A2D2D;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  background: linear-gradient(145deg, var(--panel), var(--panel-mid));
  color: var(--text);
  font-family: var(--pref-font-family); }
  @media (max-width: 768px) {
    .modal-content {
      padding: 20px 0;
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      min-height: calc(100vh - 60px); } }
  .modal-content input, .modal-content textarea.smallInput, .modal-content textarea.mediumInput, .modal-content textarea.largeInput,
  .modal-content textarea,
  .modal-content p {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    font-size: var(--pref-font-size, 16px);
    background-color: var(--bg-1);
    color: var(--text);
    font-family: var(--pref-font-family); }
  .modal-content button {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: var(--pref-font-size, 16px);
    font-weight: bold; }
    .modal-content button:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .modal-content button:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .modal-content button:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .modal-content button {
        height: 44px; } }

.close {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  position: absolute;
  z-index: 10;
  line-height: 1;
  font-size: 28px;
  top: 28px;
  right: 28px; }
  .close:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .close:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .close:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .close {
      height: 44px; } }
  @media (max-width: 768px) {
    .close {
      margin-left: 0.25rem;
      width: 44px; } }
  @media (max-width: 768px) {
    .close {
      font-size: 20px;
      top: 12px;
      right: 12px; } }

h1 {
  display: none; }

h2 {
  color: var(--text); }

#calendar {
  margin-left: 20px;
  box-sizing: border-box;
  z-index: 0;
  overflow: hidden; }

.fc-scroller {
  height: auto !important;
  overflow: visible !important; }

.fc-head .fc-widget-header {
  margin-right: 0 !important; }

.calendar {
  z-index: -100; }

header {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; }

.fc-toolbar-title {
  color: var(--text) !important; }

.fc-view.fc-dayGridDay-view {
  max-width: 100%;
  margin: 0;
  padding: 0; }

.fc-button.fc-today-button::first-letter {
  text-transform: capitalize; }

#editDescription {
  max-height: 250px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word; }

.styled-dropdown {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  padding: 12px;
  margin: 15px 0;
  border-radius: 12px; }
  .styled-dropdown:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .styled-dropdown:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  @media (max-width: 768px) {
    .styled-dropdown {
      min-width: auto;
      max-width: 90px;
      font-size: 0.85rem; } }

.fc-scrollgrid,
.fc-scrollgrid > tbody > tr > td,
.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard .fc-scrollgrid > tbody > tr > td,
.fc-daygrid,
.fc-daygrid-day,
.fc-daygrid-body,
.fc-daygrid-body table,
.fc-daygrid-body td {
  border-radius: 0 !important; }

td > img[src*="logo.png"] {
  display: none !important; }

td:has(> img[src*="logo.png"]) {
  display: none !important; }

.fc {
  background-color: var(--bg-0); }

.fc .fc-view-harness {
  background-color: var(--bg-0); }

.fc-theme-standard td,
.fc-theme-standard th {
  background-color: var(--bg-0);
  border-color: var(--ui-border); }

.fc-theme-standard .fc-scrollgrid {
  border-color: var(--ui-border); }

.fc-daygrid-day {
  background-color: var(--bg-0); }
  .fc-daygrid-day:nth-child(even) {
    background-color: var(--bg-1); }

.fc .fc-col-header-cell {
  background-color: var(--bg-2);
  color: var(--text);
  border-bottom: none; }

.fc .fc-daygrid-day-number {
  color: var(--text); }

.fc .fc-daygrid-body {
  border-top: none; }

.fc .fc-day-today {
  background-color: color-mix(in srgb, var(--pref-accent-color) 15%, var(--bg-0) 85%) !important; }

.fc .fc-button {
  background-color: var(--bg-2) !important;
  border-color: var(--ui-border) !important;
  color: var(--text) !important;
  font-family: var(--pref-font-family);
  transition: background-color 0.2s, border-color 0.2s; }
  .fc .fc-button:hover {
    background-color: var(--bg-3) !important;
    border-color: var(--pref-accent-color) !important;
    color: var(--text-strong, var(--text)) !important; }
  .fc .fc-button:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pref-accent-color) 40%, transparent 60%) !important; }
  .fc .fc-button:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--pref-accent-color) !important;
  border-color: var(--pref-accent-color) !important;
  color: var(--pref-bg-color) !important; }

.fc-event-break {
  background-color: var(--bg-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important; }

.fc-daygrid-day.break-day {
  background-color: var(--bg-2) !important; }

.fc-school-holiday {
  background-color: color-mix(in srgb, var(--pref-accent-color) 25%, var(--bg-2) 75%) !important;
  border-color: color-mix(in srgb, var(--pref-accent-color) 40%, var(--ui-border) 60%) !important;
  color: var(--text-strong, var(--text)) !important; }

.fc-event.priority-p0 {
  background-color: color-mix(in srgb, var(--priority-p0, #dc2626) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p0, #dc2626) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.fc-event.priority-p1 {
  background-color: color-mix(in srgb, var(--priority-p1, #ea580c) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p1, #ea580c) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.fc-event.priority-p2 {
  background-color: color-mix(in srgb, var(--priority-p2, #ca8a04) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p2, #ca8a04) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.fc-event.priority-p3 {
  background-color: color-mix(in srgb, var(--priority-p3, #16a34a) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p3, #16a34a) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.event-priority-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
  color: var(--pref-bg-color);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }
  .event-priority-badge.p0 {
    background: color-mix(in srgb, var(--priority-p0, #dc2626) 85%, var(--bg-0) 15%); }
  .event-priority-badge.p1 {
    background: color-mix(in srgb, var(--priority-p1, #ea580c) 85%, var(--bg-0) 15%); }
  .event-priority-badge.p2 {
    background: color-mix(in srgb, var(--priority-p2, #ca8a04) 85%, var(--bg-0) 15%); }
  .event-priority-badge.p3 {
    background: color-mix(in srgb, var(--priority-p3, #16a34a) 85%, var(--bg-0) 15%); }

.calendar-dashboard-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--bg-1); }

.dashboard-tab-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  height: auto;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .dashboard-tab-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .dashboard-tab-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .dashboard-tab-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .dashboard-tab-btn {
      height: 44px; } }
  .dashboard-tab-btn:hover {
    transform: none;
    opacity: 1;
    color: var(--text);
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .dashboard-tab-btn:focus-visible {
    outline: none;
    border-color: var(--pref-accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pref-accent-color) 28%, transparent 72%); }
  .dashboard-tab-btn.active {
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    background: color-mix(in srgb, var(--pref-accent-color) 84%, var(--bg-1) 16%);
    box-shadow: none; }

.calendar-issues-panel {
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent 25%);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 82%, var(--pref-accent-color) 18%), color-mix(in srgb, var(--bg-1) 95%, var(--pref-accent-color) 5%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent 90%), 0 12px 28px color-mix(in srgb, #000 28%, transparent 72%);
  color: var(--text); }

.calendar-issues-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px; }

.calendar-issues-title {
  margin: 0;
  color: var(--text-strong, var(--text));
  letter-spacing: 0.01em; }

.calendar-issues-subtitle {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem; }

.issues-controls-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px; }

.issues-controls-row input, .issues-controls-row textarea.smallInput, .issues-controls-row textarea.mediumInput, .issues-controls-row textarea.largeInput,
.issues-controls-row select,
.issue-form input,
.issue-form textarea.smallInput,
.issue-form textarea.mediumInput,
.issue-form textarea.largeInput,
.issue-form textarea,
.issue-form select,
.issue-card-footer select,
.kanban-item select {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent 15%);
  background: color-mix(in srgb, var(--bg-1) 90%, #000 10%);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease; }
  .issues-controls-row input:focus, .issues-controls-row textarea.smallInput:focus, .issues-controls-row textarea.mediumInput:focus, .issues-controls-row textarea.largeInput:focus,
  .issues-controls-row select:focus,
  .issue-form input:focus,
  .issue-form textarea.smallInput:focus,
  .issue-form textarea.mediumInput:focus,
  .issue-form textarea.largeInput:focus,
  .issue-form textarea:focus,
  .issue-form select:focus,
  .issue-card-footer select:focus,
  .kanban-item select:focus {
    border-color: color-mix(in srgb, var(--pref-accent-color) 60%, var(--ui-border) 40%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pref-accent-color) 20%, transparent 80%); }

.issue-form textarea {
  min-height: 130px;
  resize: vertical; }

.issues-subtabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 12px; }

.issues-subtab-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 34px;
  border-radius: 8px;
  padding: 6px 14px;
  background: var(--bg-2);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .issues-subtab-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .issues-subtab-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .issues-subtab-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .issues-subtab-btn {
      height: 44px; } }
  .issues-subtab-btn:hover {
    transform: none;
    opacity: 1;
    background: var(--panel-mid);
    border-color: var(--pref-accent-color);
    color: var(--text); }
  .issues-subtab-btn.active {
    background: color-mix(in srgb, var(--pref-accent-color) 84%, var(--bg-1) 16%);
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    box-shadow: none; }

.issues-subpanel {
  border: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent 30%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-0) 78%, var(--pref-accent-color) 22%);
  padding: 12px; }

.issue-form {
  display: flex;
  flex-direction: column;
  gap: 10px; }

.issue-form > div > label,
.issue-form-grid label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--text-strong, var(--text)); }

.issue-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px; }

.issue-markdown-preview {
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent 24%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-1) 86%, #000 14%);
  min-height: 52px;
  padding: 12px;
  color: var(--text-muted); }

.issue-markdown-empty {
  margin: 0;
  font-style: italic; }

.issue-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px; }

.calendar-issue-action-btn {
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent 25%);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  color: var(--text);
  background: var(--bg-2); }
  .calendar-issue-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px color-mix(in srgb, #000 28%, transparent 72%); }
  .calendar-issue-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }
  .calendar-issue-action-btn.primary, .calendar-issue-action-btn.danger-button, .ui-runner-container .calendar-issue-action-btn.stopBtn, .game-runner-container .calendar-issue-action-btn.stopBtn, .calendar-issue-action-btn.warning-button, .game-runner-container .calendar-issue-action-btn.pauseBtn, .calendar-issue-action-btn.success-button, .calendar-issue-action-btn.info-button, .hallpass-buttons button.calendar-issue-action-btn {
    border-color: color-mix(in srgb, var(--pref-accent-color) 75%, transparent 25%);
    background: color-mix(in srgb, var(--pref-accent-color) 75%, var(--bg-2) 25%);
    color: var(--pref-bg-color); }
  .calendar-issue-action-btn.secondary {
    background: color-mix(in srgb, var(--bg-3) 92%, #000 8%);
    color: var(--text-strong, var(--text)); }
  .calendar-issue-action-btn.danger {
    border-color: color-mix(in srgb, #ef4444 80%, transparent 20%);
    background: color-mix(in srgb, #dc2626 85%, #0f172a 15%);
    color: #fff; }

.issues-list {
  display: grid;
  gap: 10px; }

.issue-card {
  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
  border-left: 3px solid color-mix(in srgb, var(--pref-accent-color) 78%, transparent 22%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-1) 86%, var(--pref-accent-color) 14%);
  padding: 12px; }

.issue-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px; }

.issue-link-btn {
  border: 0;
  background: transparent;
  color: var(--text-strong, var(--text));
  cursor: pointer;
  padding: 0;
  text-align: left; }

.issue-card-title {
  font-size: 1.12rem;
  font-weight: 800; }

.issue-card-note,
.issue-author,
.issue-meta {
  color: var(--text-muted);
  margin-top: 8px; }

.issue-card-badge-row,
.issue-tags,
.issue-card-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; }

.issue-card-badge-row {
  justify-content: flex-end; }

.issue-tags {
  margin-top: 10px; }

.issue-tag {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent 20%);
  background: color-mix(in srgb, var(--bg-2) 85%, #000 15%);
  color: var(--text-muted);
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 700; }

.issue-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px; }

.issue-card-footer select {
  max-width: 180px; }

.issue-pill {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent 25%);
  background: color-mix(in srgb, var(--bg-2) 84%, #000 16%);
  color: var(--text-strong, var(--text)); }

.issue-pill.open {
  background: color-mix(in srgb, var(--pref-accent-color) 46%, var(--bg-1) 54%);
  border-color: color-mix(in srgb, var(--pref-accent-color) 66%, var(--ui-border) 34%);
  color: var(--pref-bg-color); }

.issue-pill.in-progress {
  background: color-mix(in srgb, #3b82f6 70%, var(--bg-1) 30%);
  border-color: color-mix(in srgb, #3b82f6 85%, var(--ui-border) 15%);
  color: #fff; }

.issue-pill.blocked {
  background: color-mix(in srgb, #ef4444 74%, var(--bg-1) 26%);
  border-color: color-mix(in srgb, #ef4444 85%, var(--ui-border) 15%);
  color: #fff; }

.issue-pill.done {
  background: color-mix(in srgb, #22c55e 72%, var(--bg-1) 28%);
  border-color: color-mix(in srgb, #22c55e 85%, var(--ui-border) 15%);
  color: #fff; }

.issue-pill.critical,
.issue-pill.p0 {
  background: color-mix(in srgb, var(--priority-p0, #dc2626) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p0, #dc2626) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.issue-pill.high,
.issue-pill.p1 {
  background: color-mix(in srgb, var(--priority-p1, #ea580c) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p1, #ea580c) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.issue-pill.medium, .issue-pill.danger-button, .ui-runner-container .issue-pill.stopBtn, .game-runner-container .issue-pill.stopBtn, .issue-pill.warning-button, .game-runner-container .issue-pill.pauseBtn, .issue-pill.success-button, .issue-pill.info-button, .hallpass-buttons button.issue-pill,
.issue-pill.p2 {
  background: color-mix(in srgb, var(--priority-p2, #ca8a04) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p2, #ca8a04) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.issue-pill.low,
.issue-pill.p3 {
  background: color-mix(in srgb, var(--priority-p3, #16a34a) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p3, #16a34a) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px; }

.kanban-column {
  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-1) 88%, var(--pref-accent-color) 12%);
  padding: 10px;
  min-height: 220px; }

.kanban-column-title {
  margin: 0 0 10px;
  color: var(--text-strong, var(--text));
  font-size: 1.06rem; }

.kanban-item {
  border: 1px solid color-mix(in srgb, var(--ui-border) 74%, transparent 26%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-0) 90%, var(--pref-accent-color) 10%);
  padding: 10px;
  margin-bottom: 10px; }

.issues-empty {
  border: 1px dashed color-mix(in srgb, var(--ui-border) 70%, transparent 30%);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 16px;
  text-align: center; }

.issue-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000 55%, transparent 45%);
  padding: 20px; }
  .issue-modal.open {
    display: flex; }

.issue-modal-content {
  width: min(760px, 95vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent 24%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 78%, var(--pref-accent-color) 22%), color-mix(in srgb, var(--bg-0) 92%, var(--pref-accent-color) 8%));
  padding: 14px; }

.issue-modal-header,
.issue-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; }

.issue-modal-title {
  margin: 0; }

.issue-modal-close {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.7rem;
  cursor: pointer;
  line-height: 1; }

.issue-modal-meta {
  margin: 8px 0 10px;
  color: var(--text-muted); }

@media (max-width: 1100px) {
  .kanban-board {
    grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 900px) {
  .issues-controls-row {
    grid-template-columns: 1fr 1fr; }

  .issue-form-grid {
    grid-template-columns: 1fr; }

  .issue-card-footer {
    flex-direction: column;
    align-items: stretch; }

  .issue-card-footer select {
    max-width: none; } }
@media (max-width: 680px) {
  .calendar-issues-header {
    flex-direction: column;
    align-items: stretch; }

  .issues-controls-row,
  .kanban-board {
    grid-template-columns: 1fr; }

  .issues-subtabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#periodFilterDropdown {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-left: 8px; }
  #periodFilterDropdown:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  #periodFilterDropdown:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  @media (max-width: 768px) {
    #periodFilterDropdown {
      min-width: auto;
      max-width: 90px;
      font-size: 0.85rem; } }

.fc-event-appointment {
  display: flex;
  flex-direction: column;
  padding: 2px 4px;
  line-height: 1.2;
  overflow: hidden; }

.fc-event-individual {
  font-weight: bold;
  font-size: 0.85em;
  opacity: 0.9; }

.fc-event-title-custom {
  font-size: 0.9em; }

.fc-event-group {
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.85; }

.fc-event {
  color: var(--text); }

.fc-event-title,
.fc-event-time {
  color: inherit; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

#toggle-response-btn {
  margin-top: auto;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: green !important; }
  #toggle-response-btn:hover {
    background-color: darkgreen !important; }

#msger-send-btn {
  margin-top: auto;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: blue !important; }
  #msger-send-btn:hover {
    background-color: darkblue !important; }

.msg-info,
.msg-text {
  color: black; }

:root {
  --body-bg: linear-gradient(135deg, white 0%, gray 100%);
  --msger-bg: white;
  --border: 2px solid #ddd;
  --left-msg-bg: #ececec;
  --right-msg-bg: #579ffb; }

.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: fill;
  margin: auto auto;
  height: calc(867px);
  border: var(--border);
  border-radius: 12px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2); }

.msger-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: var(--border);
  background: #eee;
  color: gray; }

.msger-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px; }

.msger-chat::-webkit-scrollbar {
  width: 6px; }

.msger-chat::-webkit-scrollbar-track {
  background: #ddd; }

.msger-chat::-webkit-scrollbar-thumb {
  background: #bdbdbd; }

.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: auto; }

.msg:last-of-type {
  margin: auto; }

.msg-img {
  width: 64px;
  height: 64px;
  margin-right: 0.2rem;
  background: #ddd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%; }

.msg-bubble {
  max-width: 450px;
  padding: 15px;
  border-radius: 12px;
  background: var(--left-msg-bg); }

.msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: gap; }

.msg-info-name {
  margin-right: 2rem;
  font-weight: bold; }

.msg-info-time {
  font-size: 0.85em; }

.left-msg .msg-bubble {
  border-bottom-left-radius: 0; }

.right-msg {
  flex-direction: row-reverse; }

.right-msg .msg-bubble {
  background: var(--right-msg-bg);
  color: #fff;
  border-bottom-right-radius: 0; }

.right-msg .msg-img {
  margin: 0 0 0 1rem; }

.msger-inputarea {
  display: flex;
  padding: 10px;
  border-top: var(--border);
  background: #eee; }

.msger-inputarea * {
  padding: 10px;
  border: none;
  border-radius: 12px;
  font-size: 1em; }

.msger-input {
  flex: 1;
  background: #ddd; }

.msger-send-btn {
  margin-left: 0.2rem;
  background: #00c441;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s; }

.msger-send-btn:hover {
  background: #066320; }

.msger-chat {
  background-color: #fcfcfe;
  background-image: url("https://w.wallhaven.cc/full/vm/wallhaven-vmydxl.jpg"); }

/**
 * Code Runner Styles
 * Interactive code editor with execution capabilities
 */
/**
 * Runner Base Styles
 * Shared styles for code-runner and ui-runner
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
.code-runner-container {
  margin-bottom: 2rem; }
  .code-runner-container .challenge-box {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--panel);
    border: 2px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
    .code-runner-container .challenge-box h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .code-runner-container .challenge-box p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
  .code-runner-container .editor-container {
    margin-bottom: 20px; }
  .code-runner-container .CodeMirror {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
  .code-runner-container .CodeMirror-gutters {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
  .code-runner-container .output-container {
    margin-bottom: 20px; }
  .code-runner-container .control-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px 10px 0 0;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
    .code-runner-container .control-panel span {
      font-size: 0.9rem;
      color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .code-runner-container .control-panel {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem; } }
  .code-runner-container .runBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color); }
    .code-runner-container .runBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .runBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .code-runner-container .runBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .code-runner-container .runBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .code-runner-container .runBtn {
        margin-left: 0.25rem;
        width: 44px; } }
    .code-runner-container .runBtn:hover {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      opacity: 0.85;
      transform: scale(1.05); }
  .code-runner-container .copyBtn,
  .code-runner-container .clearBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .code-runner-container .copyBtn:hover,
    .code-runner-container .clearBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .copyBtn:focus,
    .code-runner-container .clearBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .code-runner-container .copyBtn:hover,
    .code-runner-container .clearBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .code-runner-container .copyBtn,
      .code-runner-container .clearBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .code-runner-container .copyBtn,
      .code-runner-container .clearBtn {
        margin-left: 0.25rem;
        width: 44px; } }
  .code-runner-container .languageSelect,
  .code-runner-container .fontSizeSelect {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px; }
    .code-runner-container .languageSelect:hover,
    .code-runner-container .fontSizeSelect:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .languageSelect:focus,
    .code-runner-container .fontSizeSelect:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    @media (max-width: 768px) {
      .code-runner-container .languageSelect,
      .code-runner-container .fontSizeSelect {
        min-width: auto;
        max-width: 90px;
        font-size: 0.85rem; } }
  .code-runner-container .output-content {
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    padding: 16px;
    background: var(--panel);
    color: var(--pref-text-color);
    white-space: pre-wrap;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.9rem;
    line-height: 1.5; }
    .code-runner-container .output-content::-webkit-scrollbar {
      width: 8px; }
    .code-runner-container .output-content::-webkit-scrollbar-track {
      background: var(--pref-bg-color); }
    .code-runner-container .output-content::-webkit-scrollbar-thumb {
      background: var(--ui-border);
      border-radius: 4px; }
      .code-runner-container .output-content::-webkit-scrollbar-thumb:hover {
        background: var(--panel-mid); }
  .code-runner-container .copyOutputBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .code-runner-container .copyOutputBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .copyOutputBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .code-runner-container .copyOutputBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .code-runner-container .copyOutputBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .code-runner-container .copyOutputBtn {
        margin-left: 0.25rem;
        width: 44px; } }

/**
 * UI Runner Styles
 * Interactive UI code executor with visual output
 */
/**
 * Runner Base Styles
 * Shared styles for code-runner and ui-runner
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
.ui-runner-container {
  margin-bottom: 2rem; }
  .ui-runner-container .challenge-box {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--panel);
    border: 2px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
    .ui-runner-container .challenge-box h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .ui-runner-container .challenge-box p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
  .ui-runner-container .editor-container {
    margin-bottom: 20px; }
  .ui-runner-container .CodeMirror {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
  .ui-runner-container .CodeMirror-gutters {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
  .ui-runner-container .output-container {
    margin-bottom: 20px; }
  .ui-runner-container .control-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px 10px 0 0;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
    .ui-runner-container .control-panel span {
      font-size: 0.9rem;
      color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .ui-runner-container .control-panel {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem; } }
  .ui-runner-container .runBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color); }
    .ui-runner-container .runBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .ui-runner-container .runBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .ui-runner-container .runBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .ui-runner-container .runBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .ui-runner-container .runBtn {
        margin-left: 0.25rem;
        width: 44px; } }
    .ui-runner-container .runBtn:hover {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      opacity: 0.85;
      transform: scale(1.05); }
  .ui-runner-container .copyBtn,
  .ui-runner-container .clearBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .ui-runner-container .copyBtn:hover,
    .ui-runner-container .clearBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .ui-runner-container .copyBtn:focus,
    .ui-runner-container .clearBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .ui-runner-container .copyBtn:hover,
    .ui-runner-container .clearBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .ui-runner-container .copyBtn,
      .ui-runner-container .clearBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .ui-runner-container .copyBtn,
      .ui-runner-container .clearBtn {
        margin-left: 0.25rem;
        width: 44px; } }
  .ui-runner-container .ui-output {
    min-height: 400px;
    max-height: 600px;
    overflow: auto;
    position: relative;
    padding: 0;
    background: var(--panel);
    color: var(--pref-text-color); }
    .ui-runner-container .ui-output canvas {
      display: block;
      max-width: 100%;
      height: auto; }
  .ui-runner-container .stopBtn,
  .ui-runner-container .resetBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .ui-runner-container .stopBtn:hover,
    .ui-runner-container .resetBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .ui-runner-container .stopBtn:focus,
    .ui-runner-container .resetBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .ui-runner-container .stopBtn:hover,
    .ui-runner-container .resetBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .ui-runner-container .stopBtn,
      .ui-runner-container .resetBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .ui-runner-container .stopBtn,
      .ui-runner-container .resetBtn {
        margin-left: 0.25rem;
        width: 44px; } }

/**
 * Game Runner Styles
 * Interactive game development environment with GameEngine integration
 */
/**
 * Runner Base Styles
 * Shared styles for code-runner and ui-runner
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
.game-runner-container {
  margin-bottom: 2rem;
  width: var(--gr-panel-width, 100%);
  max-width: 100%; }
  .game-runner-container .challenge-box {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--panel);
    border: 2px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
    .game-runner-container .challenge-box h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .game-runner-container .challenge-box p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
  .game-runner-container .editor-container {
    margin-bottom: 20px; }
  .game-runner-container .CodeMirror {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
  .game-runner-container .CodeMirror-gutters {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
  .game-runner-container .output-container {
    margin-bottom: 20px; }
  .game-runner-container .control-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px 10px 0 0;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
    .game-runner-container .control-panel span {
      font-size: 0.9rem;
      color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .game-runner-container .control-panel {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem; } }
  .game-runner-container .runBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color); }
    .game-runner-container .runBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .runBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .game-runner-container .runBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .game-runner-container .runBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .game-runner-container .runBtn {
        margin-left: 0.25rem;
        width: 44px; } }
    .game-runner-container .runBtn:hover {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      opacity: 0.85;
      transform: scale(1.05); }
  .game-runner-container .copyBtn,
  .game-runner-container .clearBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .game-runner-container .copyBtn:hover,
    .game-runner-container .clearBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .copyBtn:focus,
    .game-runner-container .clearBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .game-runner-container .copyBtn:hover,
    .game-runner-container .clearBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .game-runner-container .copyBtn,
      .game-runner-container .clearBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .game-runner-container .copyBtn,
      .game-runner-container .clearBtn {
        margin-left: 0.25rem;
        width: 44px; } }
  .game-runner-container .game-output {
    overflow: hidden;
    position: relative;
    padding: 0;
    background: #000;
    color: var(--pref-text-color); }
    .game-runner-container .game-output .gameContainer {
      width: 100%;
      height: var(--gr-canvas-height, 580px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center; }
      .game-runner-container .game-output .gameContainer > canvas#gameCanvas {
        display: block;
        border: none;
        background: transparent; }
      .game-runner-container .game-output .gameContainer canvas {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important; }
  .game-runner-container .levelSelect {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 120px; }
    .game-runner-container .levelSelect:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .levelSelect:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    @media (max-width: 768px) {
      .game-runner-container .levelSelect {
        min-width: auto;
        max-width: 90px;
        font-size: 0.85rem; } }
  .game-runner-container .pauseBtn,
  .game-runner-container .stopBtn,
  .game-runner-container .resetBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .game-runner-container .pauseBtn:hover,
    .game-runner-container .stopBtn:hover,
    .game-runner-container .resetBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .pauseBtn:focus,
    .game-runner-container .stopBtn:focus,
    .game-runner-container .resetBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .game-runner-container .pauseBtn:hover,
    .game-runner-container .stopBtn:hover,
    .game-runner-container .resetBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .game-runner-container .pauseBtn,
      .game-runner-container .stopBtn,
      .game-runner-container .resetBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .game-runner-container .pauseBtn,
      .game-runner-container .stopBtn,
      .game-runner-container .resetBtn {
        margin-left: 0.25rem;
        width: 44px; } }
  .game-runner-container .pauseBtn:disabled {
    background: var(--pref-bg-color) !important;
    border-color: var(--ui-border) !important;
    color: var(--pref-text-color) !important;
    opacity: 0.5;
    cursor: not-allowed; }
  .game-runner-container .stopBtn:disabled {
    background: var(--pref-bg-color) !important;
    border-color: var(--ui-border) !important;
    color: var(--pref-text-color) !important;
    opacity: 0.5;
    cursor: not-allowed; }
  .game-runner-container .game-status {
    font-weight: 500; }
    .game-runner-container .game-status .status-text {
      color: var(--pref-accent-color);
      font-weight: 600; }
  .game-runner-container .compact-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    margin-bottom: 10px; }
    .game-runner-container .compact-controls .runBtn,
    .game-runner-container .compact-controls .stopBtn,
    .game-runner-container .compact-controls .resetBtn {
      background: var(--pref-bg-color);
      border: 1px solid var(--ui-border);
      color: var(--pref-text-color);
      font-family: var(--pref-font-family);
      font-size: var(--pref-font-size);
      cursor: pointer;
      transition: all 0.2s;
      height: 38px;
      padding: 8px 12px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      padding: 8px;
      margin-left: 0; }
      .game-runner-container .compact-controls .runBtn:hover,
      .game-runner-container .compact-controls .stopBtn:hover,
      .game-runner-container .compact-controls .resetBtn:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color); }
      .game-runner-container .compact-controls .runBtn:focus,
      .game-runner-container .compact-controls .stopBtn:focus,
      .game-runner-container .compact-controls .resetBtn:focus {
        outline: none;
        border-color: var(--pref-accent-color); }
      .game-runner-container .compact-controls .runBtn:hover,
      .game-runner-container .compact-controls .stopBtn:hover,
      .game-runner-container .compact-controls .resetBtn:hover {
        opacity: 0.9;
        transform: scale(1.05); }
      @media (max-width: 768px) {
        .game-runner-container .compact-controls .runBtn,
        .game-runner-container .compact-controls .stopBtn,
        .game-runner-container .compact-controls .resetBtn {
          height: 44px; } }
      @media (max-width: 768px) {
        .game-runner-container .compact-controls .runBtn,
        .game-runner-container .compact-controls .stopBtn,
        .game-runner-container .compact-controls .resetBtn {
          margin-left: 0.25rem;
          width: 44px; } }
    .game-runner-container .compact-controls .levelSelect {
      background: var(--pref-bg-color);
      border: 1px solid var(--ui-border);
      color: var(--pref-text-color);
      font-family: var(--pref-font-family);
      font-size: var(--pref-font-size);
      cursor: pointer;
      transition: all 0.2s;
      min-width: 150px;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      min-width: 120px;
      flex: 1;
      max-width: 200px; }
      .game-runner-container .compact-controls .levelSelect:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color); }
      .game-runner-container .compact-controls .levelSelect:focus {
        outline: none;
        border-color: var(--pref-accent-color); }
      @media (max-width: 768px) {
        .game-runner-container .compact-controls .levelSelect {
          min-width: auto;
          max-width: 90px;
          font-size: 0.85rem; } }
  .game-runner-container.hide-editor .challenge-box {
    display: none; }
  .game-runner-container.hide-editor .game-output {
    border-radius: 8px;
    border: 2px solid var(--pref-accent-color); }

/* ========================================
   Fullscreen Game Mode Styles
   ======================================== */
.game-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99;
  display: flex;
  flex-direction: column;
  overflow: auto; }

.fullscreen-control-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease; }
  .fullscreen-control-header.collapsed {
    padding: 0.5rem 1.5rem; }

.fullscreen-collapse-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: var(--pref-text-color);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: absolute;
  left: 1.5rem; }
  .fullscreen-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05); }

.fullscreen-title {
  color: var(--pref-text-color);
  font-weight: 600;
  font-size: 1rem;
  position: absolute;
  left: 4rem; }

.fullscreen-controls-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease; }
  .fullscreen-controls-container.collapsed {
    display: none; }
  .fullscreen-controls-container button {
    background: var(--pref-accent-color);
    border: none;
    color: var(--pref-text-color);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease; }
    .fullscreen-controls-container button:hover:not(:disabled) {
      filter: brightness(1.2);
      transform: scale(1.05); }
    .fullscreen-controls-container button:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
  .fullscreen-controls-container select {
    background: var(--pref-accent-color);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--pref-text-color);
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease; }
    .fullscreen-controls-container select:hover:not(:disabled) {
      filter: brightness(1.2); }
    .fullscreen-controls-container select:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
    .fullscreen-controls-container select option {
      background: var(--pref-bg-color);
      color: var(--pref-text-color); }

/**
 * Container Panel Styles
 * Composes UI Runner and Game Runner panels in row/column layouts.
 */
.container-panel {
  display: grid;
  gap: var(--cp-gap, 1rem);
  margin: 1rem 0;
  align-items: start; }
  .container-panel.container-panel--row {
    grid-template-columns: var(--cp-left, 1fr) var(--cp-right, 1fr); }
  .container-panel.container-panel--column {
    grid-template-columns: 1fr;
    grid-template-rows: var(--cp-left, auto) var(--cp-right, auto); }
  .container-panel .container-panel__item {
    min-width: 0; }
  .container-panel .container-panel__item > .game-runner-container,
  .container-panel .container-panel__item > .ui-runner,
  .container-panel .container-panel__item > .ui-runner-container {
    width: 100%;
    max-width: 100%; }
  .container-panel .runner-side-panel,
  .container-panel .cookie-play-panel,
  .container-panel .cookie-hack-panel,
  .container-panel .lesson-content {
    background: var(--panel, #ffffff);
    color: var(--pref-text-color, inherit);
    border: 1px solid var(--ui-border, #d7deea);
    border-radius: 12px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-border, #d7deea) 45%, transparent);
    padding: 1rem 1.1rem; }
    .container-panel .runner-side-panel h3,
    .container-panel .cookie-play-panel h3,
    .container-panel .cookie-hack-panel h3,
    .container-panel .lesson-content h3 {
      margin-top: 0;
      margin-bottom: 0.65rem;
      font-size: 1.05rem;
      line-height: 1.3; }
    .container-panel .runner-side-panel p,
    .container-panel .runner-side-panel li,
    .container-panel .cookie-play-panel p,
    .container-panel .cookie-play-panel li,
    .container-panel .cookie-hack-panel p,
    .container-panel .cookie-hack-panel li,
    .container-panel .lesson-content p,
    .container-panel .lesson-content li {
      line-height: 1.45; }
    .container-panel .runner-side-panel code,
    .container-panel .cookie-play-panel code,
    .container-panel .cookie-hack-panel code,
    .container-panel .lesson-content code {
      background: color-mix(in srgb, var(--panel, #ffffff) 78%, var(--pref-accent-color, #7aa8ff) 22%);
      color: var(--pref-text-color, inherit);
      border-radius: 6px;
      padding: 0.05rem 0.35rem; }

@media (max-width: 900px) {
  .container-panel.container-panel--row {
    grid-template-columns: 1fr; } }
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Form Mixins
 * Reusable form patterns for modals, widgets, and interactive components
 * All media queries are embedded in mixins for consistency
 */
/**
 * Modal Container
 * Centered container for modal content with responsive padding
 *
 * @param {Number} $min-width - Minimum width (default: 300px)
 * @param {Number} $max-width - Maximum width (default: 400px)
 * @param {Number} $padding - Inner padding (default: 24px)
 *
 * @example
 *   .my-modal-content {
 *     @include modal-container;
 *   }
 */
/**
 * Widget Container
 * Fixed/floating container for widgets like leaderboards
 *
 * @param {Number} $width - Container width (default: 350px)
 * @param {Number} $border-width - Border width (default: 2px)
 *
 * @example
 *   .my-widget {
 *     @include widget-container;
 *   }
 */
/**
 * Header Bar
 * Common header for modals and widgets
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 * @param {Number} $font-size - Font size (default: 20px)
 *
 * @example
 *   .my-header {
 *     @include header-bar;
 *   }
 */
/**
 * Form Group
 * Label and input pair with consistent styling
 *
 * @param {Number} $margin-bottom - Space between groups (default: 16px)
 *
 * @example
 *   .form-group {
 *     @include form-group;
 *   }
 */
/**
 * Submit Button
 * Primary action button with responsive sizing
 *
 * @param {Number} $padding - Inner padding (default: 12px)
 *
 * @example
 *   .submit-btn {
 *     @include submit-button;
 *   }
 */
/**
 * Content Area
 * Scrollable content area with max height
 *
 * @param {Number} $max-height - Maximum height (default: 400px)
 *
 * @example
 *   .content-area {
 *     @include content-area;
 *   }
 */
/**
 * Button Container
 * Flex container for button groups
 *
 * @param {String} $direction - Flex direction (default: column)
 * @param {Number} $gap - Gap between items (default: 10px)
 *
 * @example
 *   .button-group {
 *     @include button-container;
 *   }
 */
/**
 * Action Button
 * Full-width button for modals/forms
 *
 * @param {Number} $padding - Inner padding (default: 12px 16px)
 *
 * @example
 *   .action-btn {
 *     @include action-button;
 *   }
 */
/**
 * Table Styles
 * Themed table with alternating rows
 *
 * @example
 *   .my-table {
 *     @include themed-table;
 *   }
 */
/**
 * Game Modal Content
 * Modal styling optimized for game interfaces with backdrop blur and gradients
 *
 * @param {Color} $border-color - Border accent color (default: var(--pref-accent-color))
 * @param {Number} $max-width - Maximum width (default: 600px)
 * @param {Number} $padding - Inner padding (default: 30px)
 *
 * @example
 *   #cheatsModal .modal-content {
 *     @include game-modal-content;
 *   }
 */
/**
 * Game Modal Header
 * Header section for game modals with gradient accents
 *
 * @param {Color} $accent-color - Accent color for gradient (default: var(--pref-accent-color))
 * @param {Number} $padding-bottom - Bottom spacing (default: 20px)
 *
 * @example
 *   .modal-header {
 *     @include game-modal-header;
 *   }
 */
/**
 * Game Modal Body
 * Content area for game modals with auto-scrolling
 *
 * @param {Number} $max-height - Maximum height before scrolling (default: 400px)
 * @param {Number} $padding - Inner padding (default: 20px)
 *
 * @example
 *   .modal-body {
 *     @include game-modal-body;
 *   }
 */
/**
 * Game Modal Animation Keyframes
 * Slide-in animation for game modals
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**
 * Pause Modal Overlay
 * Centered modal for game pause menu
 */
#pauseModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10000; }
  @media (max-width: 768px) {
    #pauseModal {
      padding: 60px 0 0 0; } }

/**
 * Pause Modal Content
 * Container for pause menu buttons and options
 */
.pause-modal-content {
  background: var(--panel, #000);
  border: 1px solid var(--pref-accent-color, #FFF);
  border-radius: 12px;
  padding: 24px;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--pref-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); }
  @media (max-width: 768px) {
    .pause-modal-content {
      min-width: 280px;
      padding: 20px; } }

/**
 * Modal Header
 */
.pause-modal-header {
  margin: 0 0 16px 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--pref-text-color, #FFF); }
  @media (max-width: 768px) {
    .pause-modal-header {
      font-size: 20px; } }

/**
 * Button Container
 */
.pause-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px; }

/**
 * Pause Menu Button
 * Uses action-button mixin with text-button base
 */
.pause-menu-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s; }
  .pause-menu-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .pause-menu-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .pause-menu-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .pause-menu-btn {
      height: 44px; } }
  .pause-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
  .pause-menu-btn:active {
    transform: translateY(0); }
  @media (max-width: 768px) {
    .pause-menu-btn {
      padding: 14px 16px;
      font-size: 14px; } }
  .pause-menu-btn.primary, .pause-menu-btn.danger-button, .ui-runner-container .pause-menu-btn.stopBtn, .game-runner-container .pause-menu-btn.stopBtn, .pause-menu-btn.warning-button, .game-runner-container .pause-menu-btn.pauseBtn, .pause-menu-btn.success-button, .pause-menu-btn.info-button, .hallpass-buttons button.pause-menu-btn {
    margin-top: 8px;
    font-weight: 700;
    background: var(--pref-accent-color, #3b82f6);
    color: var(--pref-text-color, #FFF);
    border-color: var(--pref-accent-color, #3b82f6); }
    .pause-menu-btn.primary:hover, .pause-menu-btn.danger-button:hover, .ui-runner-container .pause-menu-btn.stopBtn:hover, .game-runner-container .pause-menu-btn.stopBtn:hover, .pause-menu-btn.warning-button:hover, .game-runner-container .pause-menu-btn.pauseBtn:hover, .pause-menu-btn.success-button:hover, .pause-menu-btn.info-button:hover, .hallpass-buttons button.pause-menu-btn:hover {
      opacity: 0.9;
      background: var(--pref-accent-color, #3b82f6); }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Form Mixins
 * Reusable form patterns for modals, widgets, and interactive components
 * All media queries are embedded in mixins for consistency
 */
/**
 * Modal Container
 * Centered container for modal content with responsive padding
 *
 * @param {Number} $min-width - Minimum width (default: 300px)
 * @param {Number} $max-width - Maximum width (default: 400px)
 * @param {Number} $padding - Inner padding (default: 24px)
 *
 * @example
 *   .my-modal-content {
 *     @include modal-container;
 *   }
 */
/**
 * Widget Container
 * Fixed/floating container for widgets like leaderboards
 *
 * @param {Number} $width - Container width (default: 350px)
 * @param {Number} $border-width - Border width (default: 2px)
 *
 * @example
 *   .my-widget {
 *     @include widget-container;
 *   }
 */
/**
 * Header Bar
 * Common header for modals and widgets
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 * @param {Number} $font-size - Font size (default: 20px)
 *
 * @example
 *   .my-header {
 *     @include header-bar;
 *   }
 */
/**
 * Form Group
 * Label and input pair with consistent styling
 *
 * @param {Number} $margin-bottom - Space between groups (default: 16px)
 *
 * @example
 *   .form-group {
 *     @include form-group;
 *   }
 */
/**
 * Submit Button
 * Primary action button with responsive sizing
 *
 * @param {Number} $padding - Inner padding (default: 12px)
 *
 * @example
 *   .submit-btn {
 *     @include submit-button;
 *   }
 */
/**
 * Content Area
 * Scrollable content area with max height
 *
 * @param {Number} $max-height - Maximum height (default: 400px)
 *
 * @example
 *   .content-area {
 *     @include content-area;
 *   }
 */
/**
 * Button Container
 * Flex container for button groups
 *
 * @param {String} $direction - Flex direction (default: column)
 * @param {Number} $gap - Gap between items (default: 10px)
 *
 * @example
 *   .button-group {
 *     @include button-container;
 *   }
 */
/**
 * Action Button
 * Full-width button for modals/forms
 *
 * @param {Number} $padding - Inner padding (default: 12px 16px)
 *
 * @example
 *   .action-btn {
 *     @include action-button;
 *   }
 */
/**
 * Table Styles
 * Themed table with alternating rows
 *
 * @example
 *   .my-table {
 *     @include themed-table;
 *   }
 */
/**
 * Game Modal Content
 * Modal styling optimized for game interfaces with backdrop blur and gradients
 *
 * @param {Color} $border-color - Border accent color (default: var(--pref-accent-color))
 * @param {Number} $max-width - Maximum width (default: 600px)
 * @param {Number} $padding - Inner padding (default: 30px)
 *
 * @example
 *   #cheatsModal .modal-content {
 *     @include game-modal-content;
 *   }
 */
/**
 * Game Modal Header
 * Header section for game modals with gradient accents
 *
 * @param {Color} $accent-color - Accent color for gradient (default: var(--pref-accent-color))
 * @param {Number} $padding-bottom - Bottom spacing (default: 20px)
 *
 * @example
 *   .modal-header {
 *     @include game-modal-header;
 *   }
 */
/**
 * Game Modal Body
 * Content area for game modals with auto-scrolling
 *
 * @param {Number} $max-height - Maximum height before scrolling (default: 400px)
 * @param {Number} $padding - Inner padding (default: 20px)
 *
 * @example
 *   .modal-body {
 *     @include game-modal-body;
 *   }
 */
/**
 * Game Modal Animation Keyframes
 * Slide-in animation for game modals
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**
 * Leaderboard Widget Container
 * Fixed-position widget for displaying game leaderboards
 */
.leaderboard-widget {
  width: 350px;
  background: var(--panel, #1a1a1a);
  border: 2px solid var(--ui-border, #333);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--pref-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  z-index: 1000;
  overflow: hidden; }
  @media (max-width: 768px) {
    .leaderboard-widget {
      width: 100%;
      max-width: 350px; } }
  .leaderboard-widget.initially-hidden {
    display: none; }

/**
 * Positioning Classes
 */
.leaderboard-embedded {
  position: absolute;
  top: 80px;
  right: 20px; }

.leaderboard-fixed {
  position: fixed;
  top: 80px;
  right: 20px; }

/**
 * Leaderboard Header
 */
.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  color: var(--pref-text-color, white);
  font-size: 20px;
  font-weight: 700;
  background: var(--panel-mid, #2d2d2d);
  border-bottom: 2px solid var(--ui-border, #444);
  display: flex;
  align-items: center; }
  @media (max-width: 768px) {
    .leaderboard-header {
      font-size: 18px;
      padding: 12px; } }

/**
 * Toggle Button
 */
.toggle-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  border-radius: 50%;
  font-size: 22px; }
  .toggle-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .toggle-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .toggle-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .toggle-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .toggle-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .toggle-btn:hover {
    background: var(--panel-mid, #4a4a4a);
    border-color: var(--ui-border, #666); }
  @media (max-width: 768px) {
    .toggle-btn {
      width: 36px;
      height: 36px;
      font-size: 20px; } }

/**
 * Leaderboard Content Area
 */
.leaderboard-content {
  background: var(--panel, #1a1a1a);
  max-height: 400px;
  overflow-y: auto; }
  @media (max-width: 768px) {
    .leaderboard-content {
      max-height: 300px; } }
  .leaderboard-content.hidden {
    display: none !important; }

/**
 * Leaderboard Table
 */
.leaderboard-table {
  width: 100%;
  border-collapse: collapse; }
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 12px 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--ui-border, #333); }
    @media (max-width: 768px) {
      .leaderboard-table th,
      .leaderboard-table td {
        padding: 10px 6px;
        font-size: 13px; } }
  .leaderboard-table th {
    color: var(--text-muted, #aaa);
    font-weight: 600;
    background: var(--panel-mid, #252525);
    text-align: left; }
  .leaderboard-table td {
    color: var(--pref-text-color, #ddd); }
  .leaderboard-table tbody tr {
    background: var(--panel, #1a1a1a);
    transition: background 0.2s; }
    .leaderboard-table tbody tr:hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }
    .leaderboard-table tbody tr:nth-child(even) {
      background: var(--ui-bg, rgba(0, 0, 0, 0.06)); }
    .leaderboard-table tbody tr:nth-child(even):hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }

/**
 * Table Cell Types
 */
.rank {
  font-weight: 800;
  color: #ffd700; }

.username {
  font-weight: 600;
  color: var(--pref-text-color, #fff); }

.score {
  font-weight: 800;
  color: var(--pref-accent-color, #4a9eff); }

/**
 * Type Selection Screen
 */
.type-selection {
  padding: 24px;
  text-align: center; }
  .type-selection h3 {
    margin: 0 0 20px 0;
    color: var(--pref-text-color, #fff);
    font-size: 18px; }
  @media (max-width: 768px) {
    .type-selection {
      padding: 20px; } }

.type-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px; }

.type-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border: 2px solid var(--pref-accent-color, #4a9eff);
  background: var(--panel-mid, #2d2d2d);
  color: var(--pref-accent-color, #4a9eff);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600; }
  .type-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .type-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .type-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .type-btn {
      height: 44px; } }
  .type-btn:hover {
    background: var(--pref-accent-color, #4a9eff);
    color: var(--panel, #1a1a1a);
    border-color: var(--pref-accent-color, #5aafff);
    transform: scale(1.02); }
  @media (max-width: 768px) {
    .type-btn {
      padding: 12px 16px;
      font-size: 15px; } }

/**
 * Elementary Form
 */
.elementary-form {
  padding: 20px;
  background: var(--panel, #1a1a1a); }
  @media (max-width: 768px) {
    .elementary-form {
      padding: 16px; } }

.form-group {
  margin-bottom: 16px; }
  .form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted, #ccc);
    font-weight: 600;
    font-size: 14px; }
  .form-group input, .form-group textarea.smallInput, .form-group textarea.mediumInput, .form-group textarea.largeInput {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--ui-border, #333);
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background: var(--panel-mid, #2d2d2d);
    color: var(--pref-text-color, #fff);
    transition: border-color 0.2s;
    font-family: var(--pref-font-family, inherit); }
    .form-group input:focus, .form-group textarea.smallInput:focus, .form-group textarea.mediumInput:focus, .form-group textarea.largeInput:focus {
      outline: none;
      border-color: var(--pref-accent-color, #4a9eff); }
    .form-group input::placeholder, .form-group textarea.smallInput::placeholder, .form-group textarea.mediumInput::placeholder, .form-group textarea.largeInput::placeholder {
      color: var(--text-muted, #888); }

/**
 * Submit Button
 */
.submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--pref-accent-color, #4a9eff);
  color: var(--panel, #1a1a1a);
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  transition: all 0.2s; }
  .submit-btn:hover {
    background: var(--pref-accent-color, #5aafff);
    transform: translateY(-1px);
    opacity: 0.95; }
  .submit-btn:active {
    transform: translateY(0); }
  @media (max-width: 768px) {
    .submit-btn {
      padding: 14px;
      font-size: 15px; } }

/**
 * Save Score Button (Icon-only)
 */
.save-score-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  font-size: 18px; }
  .save-score-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .save-score-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .save-score-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .save-score-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .save-score-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .save-score-btn:hover {
    background: var(--panel-mid, #4a4a4a);
    border-color: var(--ui-border, #666); }
  @media (max-width: 768px) {
    .save-score-btn {
      width: 36px;
      height: 36px;
      font-size: 16px; } }

/**
 * Loading and Error States
 */
.loading,
.error {
  padding: 20px;
  text-align: center;
  color: var(--text-muted, #aaa);
  font-size: 14px; }

.error {
  color: #ff6b6b; }

/**
 * Back Button (Icon-only)
 */
.back-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  margin-right: 8px;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center; }
  .back-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .back-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .back-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .back-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .back-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .back-btn:hover {
    background: var(--panel-mid, #4a4a4a);
    border-color: var(--ui-border, #666); }
  @media (max-width: 768px) {
    .back-btn {
      width: 36px;
      height: 36px;
      font-size: 16px; } }

/**
 * Delete Button
 */
.delete-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff6b6b;
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600; }
  .delete-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .delete-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .delete-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .delete-btn {
      height: 44px; } }
  .delete-btn:hover {
    background: #ff5252;
    transform: translateY(-1px); }
  .delete-btn:active {
    transform: translateY(0); }
  @media (max-width: 768px) {
    .delete-btn {
      padding: 5px 10px;
      font-size: 11px; } }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
#masterFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: auto; }
  #masterFooter p {
    display: none; }

.game-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0; }

.game-footer-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: 40px; }

.game-footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 0; }

.game-controls-left,
.game-controls-right {
  display: flex;
  align-items: center;
  gap: 10px; }

#mansion-game-controls-container {
  display: flex;
  align-items: center;
  gap: 10px; }

#prevLevelButton,
#nextLevelButton,
#cheatsMenuButton,
#infoButton {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--pref-font-family); }
  #prevLevelButton:hover,
  #nextLevelButton:hover,
  #cheatsMenuButton:hover,
  #infoButton:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  #prevLevelButton:focus,
  #nextLevelButton:focus,
  #cheatsMenuButton:focus,
  #infoButton:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  #prevLevelButton:hover,
  #nextLevelButton:hover,
  #cheatsMenuButton:hover,
  #infoButton:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    #prevLevelButton,
    #nextLevelButton,
    #cheatsMenuButton,
    #infoButton {
      height: 44px; } }

#prevLevelButton {
  background-color: var(--pref-accent-color, #f26767ff);
  border-color: var(--pref-accent-color, #f26767ff); }
  #prevLevelButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#nextLevelButton {
  background-color: var(--pref-accent-color, #6ae378ff);
  border-color: var(--pref-accent-color, #6ae378ff); }
  #nextLevelButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#cheatsMenuButton {
  background-color: var(--pref-accent-color, #a46ae3ff);
  border-color: var(--pref-accent-color, #a46ae3ff); }
  #cheatsMenuButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#infoButton {
  background-color: var(--pref-accent-color, #e67e22);
  border-color: var(--pref-accent-color, #e67e22); }
  #infoButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#homeButton {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none; }
  #homeButton:focus {
    outline: none; }
  #homeButton:hover {
    transform: scale(1.1); }

#cheatsModal,
#infoModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px); }
  @media (max-width: 768px) {
    #cheatsModal,
    #infoModal {
      padding: 60px 0 0 0; } }
  #cheatsModal > div,
  #infoModal > div {
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--panel), var(--panel-mid));
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    font-family: var(--pref-font-family);
    color: var(--pref-text-color); }
    @media (max-width: 768px) {
      #cheatsModal > div,
      #infoModal > div {
        padding: 20px;
        width: 95%; } }

#cheatsModal > div {
  border: 4px solid var(--pref-accent-color, #a46ae3ff);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  max-height: 80vh;
  overflow-y: auto; }

#infoModal > div {
  border: 4px solid var(--pref-accent-color, #e67e22);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }

.game-modal-title {
  text-align: center;
  margin-bottom: 25px;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
  @media (max-width: 768px) {
    .game-modal-title {
      font-size: 14px; } }

#cheatsModal .game-modal-title {
  color: var(--pref-accent-color, #a46ae3ff); }

#infoModal .game-modal-title {
  color: var(--pref-accent-color, #e67e22); }

.game-modal-container {
  display: flex;
  flex-direction: column;
  gap: 15px; }

.game-modal-section, .game-level-select-section, .game-info-section {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 10px; }
  @media (max-width: 768px) {
    .game-modal-section, .game-level-select-section, .game-info-section {
      padding: 15px; } }

.game-level-select-section {
  border: 2px solid var(--pref-accent-color, #a46ae3ff); }

.game-info-section {
  border: 2px solid var(--pref-accent-color, #e67e22);
  text-align: left;
  color: var(--pref-text-color);
  font-size: 12px; }
  .game-info-section strong {
    color: var(--pref-accent-color); }
  @media (max-width: 768px) {
    .game-info-section {
      font-size: 10px; } }

.game-section-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 14px; }
  @media (max-width: 768px) {
    .game-section-title {
      font-size: 12px; } }

.game-level-select-section .game-section-title {
  color: var(--pref-accent-color, #a46ae3ff); }

.game-level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px; }
  @media (max-width: 768px) {
    .game-level-grid {
      gap: 8px; } }

.game-level-button {
  padding: 15px 10px;
  background-color: var(--pref-accent-color, #3498db);
  color: white;
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--pref-font-family);
  transition: all 0.3s ease;
  font-weight: bold;
  text-align: center;
  line-height: 1.3; }
  .game-level-button:hover {
    transform: scale(1.05);
    background-color: var(--pref-selection-color, #2ecc71); }
  @media (max-width: 768px) {
    .game-level-button {
      padding: 12px 8px;
      font-size: 9px; } }

.game-modal-close {
  margin-top: 20px;
  padding: 12px 20px;
  background-color: var(--pref-accent-color, #e74c3c);
  color: white;
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--pref-font-family);
  width: 100%;
  transition: all 0.3s ease; }
  .game-modal-close:hover {
    transform: scale(1.05);
    filter: brightness(0.85); }
  @media (max-width: 768px) {
    .game-modal-close {
      padding: 10px 16px;
      font-size: 10px; } }

.game-placeholder-section {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 10px;
  border: 2px solid var(--ui-border);
  text-align: center;
  color: var(--text-muted);
  font-size: 11px; }
  @media (max-width: 768px) {
    .game-placeholder-section {
      padding: 12px;
      font-size: 10px; } }

@media (max-width: 768px) {
  #masterFooter {
    padding: 10px 5px; }

  .game-footer-center {
    margin-left: 20px; }

  #prevLevelButton,
  #nextLevelButton,
  #cheatsMenuButton,
  #infoButton {
    font-size: 10px;
    padding: 6px 10px; }

  #homeButton {
    font-size: 32px; } }
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Three-Panel Layout Container
 * Creates a flexible three-column layout with gap spacing
 * Automatically stacks on mobile devices
 *
 * @param {Number} $gap - Space between panels (default: 10px)
 * @param {Number} $padding - Container padding (default: 10px)
 * @param {Number} $height - Viewport height (default: 92vh)
 *
 * @example
 *   .my-builder-layout {
 *     @include three-panel-layout;
 *   }
 */
/**
 * Asset/Config Panel (Left Panel)
 * Fixed-width panel for controls, forms, and asset selection
 *
 * @param {Number} $flex-basis - Width percentage (default: 20%)
 *
 * @example
 *   .config-panel {
 *     @include asset-panel;
 *   }
 */
/**
 * Main Content Panel (Center/Right Panel)
 * Flexible panel for primary content, supports split views
 *
 * @example
 *   .main-panel {
 *     @include main-content-panel;
 *   }
 */
/**
 * Glass Panel Effect
 * Modern glassmorphic panel with backdrop blur
 *
 * @param {Color} $bg - Background color (default: rgba(0,0,0,0.3))
 * @param {Number} $blur - Backdrop blur amount (default: 20px)
 * @param {Number} $border-radius - Corner radius (default: 12px)
 *
 * @example
 *   .glass-panel {
 *     @include glass-panel-effect;
 *   }
 */
/**
 * Panel Header Bar
 * Consistent header with title and control buttons
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 *
 * @example
 *   .panel-header {
 *     @include panel-header-bar;
 *   }
 */
/**
 * View Mode Toggle Controls
 * Buttons to switch between different view modes (code/game/split)
 *
 * @example
 *   .view-controls {
 *     @include view-mode-controls;
 *   }
 */
/**
 * View Mode Button
 * Individual toggle button for view switching
 *
 * @example
 *   .view-btn {
 *     @include view-toggle-button;
 *   }
 */
/**
 * Code Editor Container
 * Dual-layer container for syntax highlighting
 * Supports both textarea editing and visual highlights
 *
 * @example
 *   .editor-container {
 *     @include code-editor-container;
 *   }
 */
/**
 * Code Layer (Editable Text)
 * Transparent textarea for code input
 *
 * @example
 *   .code-layer {
 *     @include code-text-layer;
 *   }
 */
/**
 * Highlight Layer (Visual Overlay)
 * Non-interactive layer for syntax highlighting
 *
 * @example
 *   .highlight-layer {
 *     @include code-highlight-layer;
 *   }
 */
/**
 * Preview/Game Frame
 * Container for iframe or canvas preview
 *
 * @example
 *   .game-frame {
 *     @include preview-frame;
 *   }
 */
/**
 * Scrollable Form Container
 * Scrollable area for form inputs
 *
 * @param {Number} $padding - Inner padding (default: 15px)
 *
 * @example
 *   .scroll-form {
 *     @include scrollable-form;
 *   }
 */
/**
 * Form Section Group
 * Grouped section for related form fields
 *
 * @param {Number} $padding - Inner padding (default: 14px)
 * @param {Number} $margin-bottom - Bottom margin (default: 15px)
 *
 * @example
 *   .asset-group {
 *     @include form-section-group;
 *   }
 */
/**
 * Section Group Title
 * Title header for form sections
 *
 * @example
 *   .group-title {
 *     @include section-group-title;
 *   }
 */
/**
 * Icon Button with Tooltip
 * Small icon button with hover tooltip
 *
 * @param {Number} $size - Button size (default: 32px)
 *
 * @example
 *   .icon-btn {
 *     @include icon-button-tooltip;
 *   }
 */
.gamebuilder-title {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 2px; }
  @media (max-width: 768px) {
    .gamebuilder-title {
      font-size: 1.2em; } }

.creator-layout {
  display: flex;
  gap: 10px;
  padding: 10px;
  height: 92vh;
  box-sizing: border-box; }
  @media (max-width: 768px) {
    .creator-layout {
      flex-direction: column;
      height: auto; } }

.col-asset {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column; }
  @media (max-width: 768px) {
    .col-asset {
      flex: none;
      max-height: 300px; } }

.col-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative; }
  @media (max-width: 768px) {
    .col-main {
      flex: none;
      min-height: 600px; } }
  .col-main.view-code .panel-game {
    display: none; }
  .col-main.view-game .panel-code {
    display: none; }
  .col-main.view-code .panel-code, .col-main.view-game .panel-game {
    flex: 1; }
  .col-main.view-split .main-content {
    flex-direction: row; }
  .col-main.view-split .panel-game {
    flex: 0 0 55%; }
  .col-main.view-split .panel-code {
    flex: 1; }
  @media (max-width: 768px) {
    .col-main.view-code .panel-game, .col-main.view-game .panel-code {
      display: flex !important; }
    .col-main .main-content {
      flex-direction: column !important; }
    .col-main .panel-game {
      flex: 0 0 45% !important; }
    .col-main .panel-code {
      flex: 1 !important; } }

.view-controls {
  display: flex;
  gap: 5px;
  margin-bottom: 10px; }
  @media (max-width: 768px) {
    .view-controls {
      display: none; } }

.view-btn {
  flex: 1;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 0.8em;
  text-transform: uppercase;
  transition: all 0.2s; }
  .view-btn.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pref-accent-color); }
  .view-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05); }

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0; }

.glass-panel {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

.panel-header {
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.panel-controls {
  display: flex;
  gap: 8px;
  align-items: center; }

.icon-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  position: relative; }
  .icon-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .icon-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .icon-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .icon-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .icon-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .icon-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none; }
  .icon-btn.staged {
    box-shadow: 0 0 10px rgba(0, 200, 0, 0.9);
    border-color: rgba(0, 200, 0, 0.9); }

.step-indicator {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px; }

.add-item-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 8px;
  margin-left: 0;
  position: relative;
  font-size: 18px;
  line-height: 1;
  padding: 0; }
  .add-item-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .add-item-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .add-item-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .add-item-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .add-item-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .add-item-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none; }

.scroll-form {
  flex: 1;
  overflow-y: auto;
  padding: 15px; }

.asset-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 15px; }

.group-title {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.creator-layout label {
  display: block;
  font-size: 0.7em;
  margin-bottom: 5px; }
.creator-layout select,
.creator-layout input,
.creator-layout textarea.smallInput,
.creator-layout textarea.mediumInput,
.creator-layout textarea.largeInput {
  width: 100%;
  padding: 8px !important;
  border-radius: 4px;
  font-size: 0.85em;
  margin-bottom: 10px;
  color: var(--pref-text-color, #fff);
  background: var(--pref-bg-color, #000);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box; }
.creator-layout select {
  color: var(--pref-text-color, #fff);
  background: var(--pref-bg-color, #000); }
  .creator-layout select option {
    color: var(--pref-text-color, #fff);
    background: var(--pref-bg-color, #000); }
  .creator-layout select:disabled,
  .creator-layout select option[disabled] {
    color: var(--text-muted, rgba(255, 255, 255, 0.5)); }

.creator-layout .btn {
  padding: 12px;
  border-radius: 6px;
  border: none;
  background: var(--pref-bg-color);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0; }
  .creator-layout .btn:hover {
    background: var(--panel-mid);
    opacity: 0.9; }
.creator-layout .btn-sm {
  padding: 6px;
  border-radius: 4px;
  font-size: 0.7em; }
.creator-layout .btn-confirm {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color); }
.creator-layout .btn-run {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .creator-layout .btn-run:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .creator-layout .btn-run:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .creator-layout .btn-run:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .creator-layout .btn-run {
      height: 44px; } }
  @media (max-width: 768px) {
    .creator-layout .btn-run {
      margin-left: 0.25rem;
      width: 44px; } }
  .creator-layout .btn-run:hover {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    opacity: 0.85;
    transform: scale(1.05); }
.creator-layout .btn-danger {
  background: #e74c3c;
  border-color: #e74c3c; }

.help-panel {
  display: none;
  position: absolute;
  top: 50px;
  right: 16px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  max-width: 300px;
  z-index: 100;
  font-size: 0.85em;
  line-height: 1.4; }
  .help-panel.active {
    display: block; }

.code-panel {
  flex: 1;
  position: relative; }

.editor-container {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden; }

.code-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 20px;
  border: none;
  resize: none;
  outline: none;
  z-index: 2;
  white-space: pre;
  overflow: auto; }

.highlight-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1; }

.highlight-box {
  position: absolute;
  background: color-mix(in srgb, var(--pref-accent-color) 25%, transparent);
  border-left: 4px solid var(--pref-accent-color);
  left: 10px;
  width: calc(100% - 20px);
  display: block !important; }

.highlight-persistent-block {
  position: absolute;
  background: rgba(255, 230, 0, 0.6);
  border: 2px solid #ffdd00;
  border-left-width: 4px;
  left: 10px;
  width: calc(100% - 20px); }

.typing-highlight {
  position: absolute;
  background: color-mix(in srgb, var(--pref-accent-color) 25%, transparent);
  border-left: 4px solid var(--pref-accent-color);
  left: 10px;
  width: calc(100% - 20px); }

.game-frame {
  flex: 1;
  position: relative; }
  .game-frame iframe, .game-frame canvas {
    width: 100%;
    height: 100%;
    border: none; }

.draw-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50; }
  .draw-overlay.active {
    pointer-events: auto; }
  .draw-overlay.mode-barrier {
    cursor: crosshair; }

.draw-rect {
  position: absolute;
  box-sizing: border-box; }
  .draw-rect.barrier {
    border: 2px solid #ff2d2d;
    background: rgba(255, 0, 0, 0.05); }

.draw-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 8px; }

.draw-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 0.8em; }
  .draw-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .draw-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .draw-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .draw-btn {
      height: 44px; } }
  .draw-btn.active {
    border-color: var(--pref-accent-color);
    background: rgba(255, 255, 255, 0.08); }

.wall-slot {
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08); }

.wall-fields label {
  display: block; }
.wall-fields select {
  color: var(--pref-text-color, #fff); }

iframe .pause-button-bar,
iframe button.pause-btn,
iframe .leaderboard-widget {
  display: none !important;
  visibility: hidden !important; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Form Mixins
 * Reusable form patterns for modals, widgets, and interactive components
 * All media queries are embedded in mixins for consistency
 */
/**
 * Modal Container
 * Centered container for modal content with responsive padding
 *
 * @param {Number} $min-width - Minimum width (default: 300px)
 * @param {Number} $max-width - Maximum width (default: 400px)
 * @param {Number} $padding - Inner padding (default: 24px)
 *
 * @example
 *   .my-modal-content {
 *     @include modal-container;
 *   }
 */
/**
 * Widget Container
 * Fixed/floating container for widgets like leaderboards
 *
 * @param {Number} $width - Container width (default: 350px)
 * @param {Number} $border-width - Border width (default: 2px)
 *
 * @example
 *   .my-widget {
 *     @include widget-container;
 *   }
 */
/**
 * Header Bar
 * Common header for modals and widgets
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 * @param {Number} $font-size - Font size (default: 20px)
 *
 * @example
 *   .my-header {
 *     @include header-bar;
 *   }
 */
/**
 * Form Group
 * Label and input pair with consistent styling
 *
 * @param {Number} $margin-bottom - Space between groups (default: 16px)
 *
 * @example
 *   .form-group {
 *     @include form-group;
 *   }
 */
/**
 * Submit Button
 * Primary action button with responsive sizing
 *
 * @param {Number} $padding - Inner padding (default: 12px)
 *
 * @example
 *   .submit-btn {
 *     @include submit-button;
 *   }
 */
/**
 * Content Area
 * Scrollable content area with max height
 *
 * @param {Number} $max-height - Maximum height (default: 400px)
 *
 * @example
 *   .content-area {
 *     @include content-area;
 *   }
 */
/**
 * Button Container
 * Flex container for button groups
 *
 * @param {String} $direction - Flex direction (default: column)
 * @param {Number} $gap - Gap between items (default: 10px)
 *
 * @example
 *   .button-group {
 *     @include button-container;
 *   }
 */
/**
 * Action Button
 * Full-width button for modals/forms
 *
 * @param {Number} $padding - Inner padding (default: 12px 16px)
 *
 * @example
 *   .action-btn {
 *     @include action-button;
 *   }
 */
/**
 * Table Styles
 * Themed table with alternating rows
 *
 * @example
 *   .my-table {
 *     @include themed-table;
 *   }
 */
/**
 * Game Modal Content
 * Modal styling optimized for game interfaces with backdrop blur and gradients
 *
 * @param {Color} $border-color - Border accent color (default: var(--pref-accent-color))
 * @param {Number} $max-width - Maximum width (default: 600px)
 * @param {Number} $padding - Inner padding (default: 30px)
 *
 * @example
 *   #cheatsModal .modal-content {
 *     @include game-modal-content;
 *   }
 */
/**
 * Game Modal Header
 * Header section for game modals with gradient accents
 *
 * @param {Color} $accent-color - Accent color for gradient (default: var(--pref-accent-color))
 * @param {Number} $padding-bottom - Bottom spacing (default: 20px)
 *
 * @example
 *   .modal-header {
 *     @include game-modal-header;
 *   }
 */
/**
 * Game Modal Body
 * Content area for game modals with auto-scrolling
 *
 * @param {Number} $max-height - Maximum height before scrolling (default: 400px)
 * @param {Number} $padding - Inner padding (default: 20px)
 *
 * @example
 *   .modal-body {
 *     @include game-modal-body;
 *   }
 */
/**
 * Game Modal Animation Keyframes
 * Slide-in animation for game modals
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**
 * Dialogue Box Container
 * Main dialogue box shown at bottom of screen for NPC conversations
 */
[id^="custom-dialogue-box-"] {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  max-width: 80%;
  background: var(--panel, rgba(0, 0, 0, 0.85));
  border: 2px solid var(--pref-accent-color, #4a86e8);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: 'Press Start 2P', cursive, monospace;
  font-size: 14px;
  text-align: center;
  color: var(--pref-text-color, #FFF);
  z-index: 9999;
  display: none; }
  @media (max-width: 768px) {
    [id^="custom-dialogue-box-"] {
      max-width: 90%;
      padding: 16px;
      font-size: 12px;
      bottom: 60px; } }

/**
 * Avatar Container
 * Character portrait shown in dialogue
 */
[id^="dialogue-avatar-"] {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: none; }
  @media (max-width: 768px) {
    [id^="dialogue-avatar-"] {
      width: 40px;
      height: 40px;
      margin-right: 10px; } }

/**
 * Speaker Name
 * Character name displayed above dialogue text
 */
[id^="dialogue-speaker-"] {
  font-weight: bold;
  color: var(--pref-accent-color, #4a86e8);
  margin-bottom: 10px;
  font-size: 16px; }
  @media (max-width: 768px) {
    [id^="dialogue-speaker-"] {
      font-size: 14px;
      margin-bottom: 8px; } }

/**
 * Dialogue Text Content
 * Main text area for dialogue messages
 */
[id^="dialogue-text-"] {
  line-height: 1.5;
  min-height: 40px;
  color: var(--pref-text-color, #FFF); }
  @media (max-width: 768px) {
    [id^="dialogue-text-"] {
      min-height: 30px; } }

/**
 * Close Button
 * Uses text-button mixin for consistency
 */
[id^="custom-dialogue-box-"] button {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 20px;
  font-family: 'Press Start 2P', cursive, monospace;
  font-size: 12px; }
  [id^="custom-dialogue-box-"] button:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  [id^="custom-dialogue-box-"] button:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  [id^="custom-dialogue-box-"] button:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    [id^="custom-dialogue-box-"] button {
      height: 44px; } }
  @media (max-width: 768px) {
    [id^="custom-dialogue-box-"] button {
      margin-top: 8px;
      padding: 8px 16px;
      font-size: 11px; } }

/**
 * Primary and Secondary Buttons
 * Added by addButtons() method
 */
.primary-button {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pref-accent-color, #3b82f6);
  color: var(--pref-bg-color, #FFF);
  border-color: var(--pref-accent-color, #3b82f6); }
  .primary-button:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .primary-button:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .primary-button:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .primary-button {
      height: 44px; } }
  .primary-button:hover {
    opacity: 0.9;
    background: var(--pref-accent-color, #3b82f6); }

.secondary-button {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-mid, #666);
  color: var(--pref-text-color, #FFF); }
  .secondary-button:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .secondary-button:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .secondary-button:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .secondary-button {
      height: 44px; } }
  .secondary-button:hover {
    opacity: 0.9; }

/**
 * User/AI Message Classes
 * Used in AiNpc.js chat history
 */
.user-message {
  background: linear-gradient(135deg, var(--pref-accent-color, rgba(74, 134, 232, 0.4)) 0%, var(--pref-accent-color, rgba(74, 134, 232, 0.2)) 100%);
  border-left: 4px solid var(--pref-accent-color, #4a86e8);
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative; }
  .user-message::before {
    content: '👤';
    position: absolute;
    left: -25px;
    top: 8px;
    font-size: 16px; }

.ai-message {
  background: linear-gradient(135deg, var(--panel, rgba(22, 33, 62, 0.6)) 0%, var(--panel-mid, rgba(22, 33, 62, 0.4)) 100%);
  border-left: 4px solid var(--ui-border, #555);
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative; }
  .ai-message::before {
    content: '🤖';
    position: absolute;
    left: -25px;
    top: 8px;
    font-size: 16px; }

/**
 * ===========================
 * AI NPC Interaction Styles
 * ===========================
 * Chat UI elements appended to dialogue boxes
 */
/**
 * AI NPC Container
 * Main container for input, buttons, and response area
 */
.ai-npc-container {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ui-border, rgba(255, 255, 255, 0.1)); }

/**
 * AI NPC Input Field
 * Textarea for multi-line user messages with wrapping
 */
.ai-npc-input {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 50px;
  max-height: 120px;
  padding: 10px 12px;
  font-family: var(--pref-font-family, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  resize: vertical;
  overflow-y: auto;
  background: var(--panel, rgba(0, 0, 0, 0.4));
  border: 2px solid var(--ui-border, #444);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease; }
  .ai-npc-input:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ai-npc-input:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ai-npc-input:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ai-npc-input {
      height: 44px; } }
  .ai-npc-input::placeholder {
    opacity: 0.6;
    font-style: italic; }
  .ai-npc-input:focus {
    border-color: var(--pref-accent-color, #4a86e8);
    box-shadow: 0 0 0 2px rgba(74, 134, 232, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
    background: var(--panel-mid, rgba(0, 0, 0, 0.5)); }
  @media (max-width: 768px) {
    .ai-npc-input {
      padding: 10px;
      font-size: 13px;
      min-height: 44px; } }

/**
 * AI NPC Button Row
 * Container for history and send buttons
 */
.ai-npc-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch; }
  .ai-npc-button-row::before {
    content: 'Press Enter to send, Shift+Enter for new line';
    display: block;
    font-size: 10px;
    opacity: 0.5;
    text-align: center;
    font-style: italic;
    width: 100%;
    order: -1;
    margin-bottom: -5px; }

/**
 * AI NPC History Button
 * Button to show chat history modal
 */
.ai-npc-history-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 13px;
  background: var(--panel-mid, rgba(0, 0, 0, 0.3)); }
  .ai-npc-history-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ai-npc-history-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ai-npc-history-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ai-npc-history-btn {
      height: 44px; } }
  .ai-npc-history-btn:hover {
    background: var(--pref-accent-color, #4a86e8);
    color: var(--pref-bg-color, #FFF);
    transform: scale(1.02); }
  @media (max-width: 768px) {
    .ai-npc-history-btn {
      padding: 10px 12px;
      font-size: 12px; } }

/**
 * AI NPC Response Area
 * Area displaying AI responses with typewriter effect
 */
.ai-npc-response-area {
  min-height: 40px;
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 4px solid var(--pref-accent-color, #4a86e8);
  background: linear-gradient(135deg, var(--panel, rgba(0, 0, 0, 0.4)) 0%, var(--panel-mid, rgba(0, 0, 0, 0.3)) 100%);
  color: var(--pref-text-color, #FFF);
  font-style: italic;
  line-height: 1.5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
  .ai-npc-response-area:empty::before {
    content: '💭';
    opacity: 0.3;
    margin-right: 8px; }
  @media (max-width: 768px) {
    .ai-npc-response-area {
      min-height: 30px;
      padding: 10px 12px;
      font-size: 13px; } }

/**
 * AI NPC Modal
 * Chat history modal overlay
 */
.ai-npc-modal {
  background: var(--panel, #000);
  border: 1px solid var(--pref-accent-color, #FFF);
  border-radius: 12px;
  padding: 20px;
  min-width: 300px;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--pref-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 600px;
  overflow-y: auto;
  z-index: 10001;
  padding-left: 40px;
  padding-right: 20px; }
  @media (max-width: 768px) {
    .ai-npc-modal {
      min-width: 280px;
      padding: 16px; } }
  @media (max-width: 768px) {
    .ai-npc-modal {
      max-width: 90%;
      max-height: 80vh;
      padding-left: 35px; } }

/**
 * AI NPC Modal Title
 * Title for chat history modal
 */
.ai-npc-modal-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--pref-accent-color, #4a86e8);
  text-align: center; }
  @media (max-width: 768px) {
    .ai-npc-modal-title {
      font-size: 16px;
      margin-bottom: 12px; } }

/**
 * AI NPC Close Button
 * Close button for chat history modal
 */
.ai-npc-close-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  background: var(--pref-accent-color, #3b82f6);
  color: var(--pref-bg-color, #FFF);
  border-color: var(--pref-accent-color, #3b82f6); }
  .ai-npc-close-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ai-npc-close-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ai-npc-close-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ai-npc-close-btn {
      height: 44px; } }
  .ai-npc-close-btn:hover {
    opacity: 0.9;
    background: var(--pref-accent-color, #3b82f6); }
  @media (max-width: 768px) {
    .ai-npc-close-btn {
      padding: 10px; } }

/**
 * Home Gamified Journey Styles
 * Zone-based course exploration with progressive unlock mechanics
 * Used in: _notebooks/home/2026-04-02-home2-gamified-mvp.ipynb
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Zone Clicker Buttons
 * Large interactive buttons that unlock course zones
 */
.zone-clicker {
  width: 100%;
  padding: 1.5rem;
  margin: 0.5rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--pref-accent-color);
  color: var(--pref-bg-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--pref-font-family); }
  .zone-clicker:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    opacity: 0.9; }
  .zone-clicker.locked {
    background: var(--panel-mid);
    border-color: var(--ui-border);
    opacity: 0.6; }
  .zone-clicker.unlocked {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border-color: #4CAF50; }

/**
 * Zone Subtitle Text
 * Secondary descriptive text within zone buttons
 */
.zone-subtitle {
  font-size: 0.8rem;
  font-weight: normal;
  opacity: 0.85; }

/**
 * Zone Info Panel
 * Displays current zone status, mission, and progress
 */
.zone-info {
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--panel);
  border: 2px solid var(--pref-accent-color);
  color: var(--pref-text-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-height: 100px; }
  .zone-info h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pref-accent-color); }
  .zone-info p {
    margin: 0.5rem 0;
    line-height: 1.5;
    font-size: 1rem;
    opacity: 0.95; }

/**
 * Unlock Progress Counter
 * Shows clicks remaining to unlock zone
 */
.unlock-count {
  font-size: 0.9rem;
  color: var(--pref-accent-color);
  margin-top: 0.5rem;
  font-weight: 600; }

/**
 * Progress Bar
 * Visual representation of unlock progress
 */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--panel-mid);
  border-radius: 4px;
  margin: 0.5rem 0;
  overflow: hidden; }

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 4px;
  transition: width 0.3s ease; }

/**
 * Zone Unlock Panel
 * Container for all zone selection elements
 */
#zone-unlock-panel > p {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0.25rem 0 0.75rem 0; }
#zone-unlock-panel > h3 {
  margin-bottom: 0.5rem; }

/**
 * Zone Buttons Container
 * Grid layout for zone selection buttons
 */
#zone-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }
  @media (max-width: 768px) {
    #zone-buttons-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem; } }

/**
 * Zone Status Display
 * Individual zone unlock tracking in progress panel
 */
.zone-status {
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-radius: 6px;
  background: var(--panel-mid);
  border: 1px solid var(--ui-border);
  transition: all 0.3s ease; }
  .zone-status .zone-header {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--pref-text-color); }
  .zone-status .zone-unlock-status {
    font-size: 0.85rem;
    opacity: 0.8;
    color: var(--pref-text-color); }
  .zone-status.locked {
    opacity: 0.7; }
  .zone-status.unlocked {
    background: var(--panel);
    border-color: var(--pref-accent-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

/**
 * Zone Selector Buttons
 * Side-by-side button interface for zone navigation
 */
#zone-selector-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem; }

/**
 * Zone Section Container
 * Individual zone content areas that show/hide based on selection
 * Wrapper div contains: Header (markdown) -> UI_RUNNER -> GAME_RUNNER -> Footer
 */
.zone-section {
  margin-top: 1.5rem; }
  .zone-section[style*="display: none"] {
    display: none !important; }
  .zone-section[style*="display: block"] {
    display: block !important; }

/**
 * Zone Button
 * Individual zone selection button with unlock states
 */
.zone-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  justify-content: flex-start;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  height: auto;
  position: relative;
  min-height: auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word; }
  .zone-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .zone-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .zone-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .zone-btn {
      height: 44px; } }
  .zone-btn .zone-btn-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pref-text-color);
    width: 100%;
    word-wrap: break-word;
    white-space: normal; }
  .zone-btn .zone-btn-subtitle {
    font-size: 0.85rem;
    opacity: 0.7;
    color: var(--pref-text-color);
    width: 100%;
    word-wrap: break-word;
    white-space: normal; }
  .zone-btn .zone-btn-lock {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    opacity: 0.6;
    width: 100%;
    word-wrap: break-word;
    white-space: normal; }
  @media (max-width: 768px) {
    .zone-btn {
      padding: 1rem 0.75rem;
      gap: 0.5rem;
      min-height: 90px; }
      .zone-btn .zone-btn-title {
        font-size: 1rem;
        line-height: 1.4; }
      .zone-btn .zone-btn-subtitle {
        font-size: 0.8rem;
        line-height: 1.4; }
      .zone-btn .zone-btn-lock {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-top: 0.15rem; } }
  .zone-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--panel-mid); }
    .zone-btn.locked:hover {
      transform: none;
      opacity: 0.5;
      background: var(--panel-mid); }
  .zone-btn.unlocked {
    border-color: var(--pref-accent-color); }
    .zone-btn.unlocked:hover {
      border-color: var(--pref-accent-color);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
  .zone-btn.active {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color); }
    .zone-btn.active .zone-btn-title,
    .zone-btn.active .zone-btn-subtitle,
    .zone-btn.active .zone-btn-lock {
      color: var(--pref-bg-color); }

/**
 * Zone Content Display
 * Content panel showing zone information
 */
.zone-content {
  padding: 1rem;
  color: var(--pref-text-color); }
  .zone-content h3 {
    margin-bottom: 0.5rem;
    color: var(--pref-accent-color); }
  .zone-content .zone-subtitle-text {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 1rem;
    font-weight: 600; }
  .zone-content .zone-description {
    margin-bottom: 1.5rem;
    line-height: 1.6; }
  .zone-content h4 {
    margin: 1rem 0 0.5rem 0;
    color: var(--pref-text-color); }

.zone-journey-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem; }
  .zone-journey-list li {
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    background: var(--panel-mid);
    border-radius: 4px;
    border-left: 3px solid var(--pref-accent-color);
    transition: all 0.2s ease; }
    .zone-journey-list li:hover {
      background: var(--panel);
      transform: translateX(4px); }
    .zone-journey-list li:before {
      content: '▸ ';
      color: var(--pref-accent-color);
      font-weight: bold;
      margin-right: 0.5rem; }

@keyframes rainbow {
  0% {
    background-color: red; }
  14% {
    background-color: orange; }
  28% {
    background-color: yellow; }
  42% {
    background-color: green; }
  57% {
    background-color: blue; }
  71% {
    background-color: indigo; }
  85% {
    background-color: violet; }
  100% {
    background-color: red; } }
.rainbow {
  width: 100px;
  height: 100px;
  animation: rainbow 5s linear infinite;
  margin: auto; }

@keyframes spinMove {
  0% {
    transform: rotate(0deg) translateX(0); }
  10% {
    transform: rotate(36deg) translateX(-200px); }
  20% {
    transform: rotate(72deg) translateX(200px); }
  30% {
    transform: rotate(108deg) translateX(400px); }
  40% {
    transform: rotate(144deg) translateX(200px); }
  50% {
    transform: rotate(180deg) translateX(0); }
  60% {
    transform: rotate(216deg) translateX(-200px); }
  70% {
    transform: rotate(252deg) translateX(200px); }
  80% {
    transform: rotate(288deg) translateX(400px); }
  90% {
    transform: rotate(324deg) translateX(200px); }
  100% {
    transform: rotate(360deg) translateX(0); } }
.spinMove {
  width: 100px;
  height: 100px;
  margin: auto;
  background-color: blue;
  animation: spinMove 10s linear infinite; }

@keyframes iridescent {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 200% 50%; }
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-4px); } }
.iridescent {
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.8) 0%, rgba(255, 154, 0, 0.8) 10%, rgba(208, 222, 33, 0.8) 20%, rgba(79, 220, 74, 0.8) 30%, rgba(63, 218, 216, 0.8) 40%, rgba(47, 201, 226, 0.8) 50%, rgba(28, 127, 238, 0.8) 60%, rgba(95, 21, 242, 0.8) 70%, rgba(186, 12, 248, 0.8) 80%, rgba(251, 7, 217, 0.8) 90%, rgba(255, 0, 0, 0.8) 100%);
  background-size: 200% 100%;
  animation: iridescent 2s linear infinite; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

button, .primary, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  color: white;
  background-color: rgba(80, 80, 80, 0.7);
  transition: all 0.5s;
  transition: all 0.5s; }
  button:hover, .primary:hover, .danger-button:hover, .ui-runner-container .stopBtn:hover, .game-runner-container .stopBtn:hover, .warning-button:hover, .game-runner-container .pauseBtn:hover, .success-button:hover, .info-button:hover, .hallpass-buttons button:hover {
    background-color: rgba(55, 55, 55, 0.7); }
  button:active, .primary:active, .danger-button:active, .ui-runner-container .stopBtn:active, .game-runner-container .stopBtn:active, .warning-button:active, .game-runner-container .pauseBtn:active, .success-button:active, .info-button:active, .hallpass-buttons button:active {
    background-color: rgba(29, 29, 29, 0.7); }

.secondary {
  color: #999999;
  background-color: rgba(120, 120, 128, 0.12);
  transition: all 0.5s;
  transition: all 0.5s; }
  .secondary:hover {
    background-color: rgba(95, 95, 102, 0.12); }
  .secondary:active {
    background-color: rgba(71, 71, 75, 0.12); }

.filledHighlight {
  background-color: #007aff;
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledHighlight:hover {
    background-color: #0062cc; }
  .filledHighlight:active {
    background-color: #004999; }

.filledTinted {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.15);
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledTinted:hover {
    background-color: rgba(0, 98, 204, 0.15); }
  .filledTinted:active {
    background-color: rgba(0, 73, 153, 0.15); }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/* define class for redifined button */
.button {
  width: auto;
  height: auto;
  border-radius: 10px;
  background-color: #21807c;
  border: 3px solid black;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 1;
  grid-row: span 1;
  transition: all 0.5s; }

/* darkens the background color on hover to create a selecting effect */
.button:hover {
  background-color: #373737; }

/* "row style" is flexible size and aligns pictures in center */
.row {
  align-items: center;
  display: flex; }

/* "column style" is one-third of the width with padding */
.column {
  flex: 16.66%;
  padding: 3px; }

/* Animation container */
#animation {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; }

/* Calculator container - modern grid layout */
.calculator-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 12px; }

/* Output display */
.calculator-output {
  grid-column: span 4;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: #fff;
  text-align: right;
  border: none;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  overflow: hidden; }

/* Base button mixin for calculator */
/* Number buttons */
.calculator-number {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Zero button spans 2 columns */ }
  .calculator-number:hover {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  .calculator-number:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-number.zero {
    grid-column: span 2;
    aspect-ratio: auto;
    padding: 0 2rem; }

/* Operation buttons (+, -, *, /) */
.calculator-operation {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #ff9500, #e68a00);
  color: #fff;
  box-shadow: 0 4px 6px rgba(255, 149, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-operation:hover {
    background: linear-gradient(145deg, #ffaa33, #ff9500);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 149, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-operation:active {
    transform: translateY(0); }

/* Clear button */
.calculator-clear {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(1rem, 3vw, 1.2rem); }
  .calculator-clear:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-clear:active {
    transform: translateY(0); }

/* Special operation buttons (sqrt, %) */
.calculator-special {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-special:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-special:active {
    transform: translateY(0); }

/* Equals button */
.calculator-equals {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #34c759, #28a745);
  color: #fff;
  box-shadow: 0 4px 6px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-equals:hover {
    background: linear-gradient(145deg, #4cd964, #34c759);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(52, 199, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-equals:active {
    transform: translateY(0); }

/* Responsive breakpoints */
@media (max-width: 480px) {
  .calculator-container {
    max-width: 100%;
    padding: 1rem;
    gap: 8px;
    border-radius: 16px; }

  .calculator-output {
    min-height: 60px;
    padding: 0.75rem 1rem; } }
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-container {
    max-width: 350px; } }
@media (min-width: 769px) {
  .calculator-container {
    max-width: 400px; }

  .calculator-number,
  .calculator-operation,
  .calculator-clear,
  .calculator-special,
  .calculator-equals {
    min-height: 70px; } }
/* Disable canvas filter if present */
canvas {
  filter: none; }

.iridescent {
  position: relative;
  overflow: hidden;
  background: blue;
  /* base blue */
  color: white; }
  .iridescent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(200, 200, 200, 0.6) 50%, rgba(255, 255, 255, 0.2) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s infinite linear;
    z-index: 0; }
  .iridescent span,
  .iridescent a {
    position: relative;
    z-index: 1; }

@keyframes shimmer {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 100% 50%; } }
/**
 * Runner Control Buttons
 * Standardized button styles for code/UI/game runner interfaces
 * These classes provide semantic, theme-aware buttons for common runner actions
 * 
 * Uses colors from root-color-map.scss - single source of truth
 */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

.danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important; }
  .danger-button:hover, .ui-runner-container .stopBtn:hover, .game-runner-container .stopBtn:hover {
    background-color: #c62232 !important;
    border-color: #c62232 !important;
    opacity: 0.95; }
  .danger-button:active, .ui-runner-container .stopBtn:active, .game-runner-container .stopBtn:active {
    background-color: #a71d2a !important; }
  .danger-button:disabled, .ui-runner-container .stopBtn:disabled, .game-runner-container .stopBtn:disabled {
    background-color: rgba(220, 53, 69, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.warning-button, .game-runner-container .pauseBtn {
  background-color: #FBBF24 !important;
  border-color: #FBBF24 !important;
  color: #000 !important; }
  .warning-button:hover, .game-runner-container .pauseBtn:hover {
    background-color: #f2b004 !important;
    border-color: #f2b004 !important;
    opacity: 0.95; }
  .warning-button:active, .game-runner-container .pauseBtn:active {
    background-color: #cf9604 !important; }
  .warning-button:disabled, .game-runner-container .pauseBtn:disabled {
    background-color: #5A3D2D !important;
    color: rgba(0, 0, 0, 0.5) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.success-button {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: white !important; }
  .success-button:hover {
    background-color: #0d9367 !important;
    border-color: #0d9367 !important;
    opacity: 0.95; }
  .success-button:active {
    background-color: #0a7350 !important; }
  .success-button:disabled {
    background-color: rgba(40, 167, 69, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.info-button {
  background-color: #3182CE !important;
  border-color: #3182CE !important;
  color: white !important; }
  .info-button:hover {
    background-color: #296dad !important;
    border-color: #296dad !important;
    opacity: 0.95; }
  .info-button:active {
    background-color: #225b90 !important; }
  .info-button:disabled {
    background-color: rgba(49, 130, 206, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.danger-button.icon-only, .ui-runner-container .icon-only.stopBtn, .game-runner-container .icon-only.stopBtn,
.warning-button.icon-only,
.game-runner-container .icon-only.pauseBtn,
.success-button.icon-only,
.info-button.icon-only {
  width: 38px;
  min-width: 38px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  @media (max-width: 768px) {
    .danger-button.icon-only, .ui-runner-container .icon-only.stopBtn, .game-runner-container .icon-only.stopBtn,
    .warning-button.icon-only,
    .game-runner-container .icon-only.pauseBtn,
    .success-button.icon-only,
    .info-button.icon-only {
      width: 44px;
      min-width: 44px; } }

.hallpass-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  background: #1c1c1e;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  text-align: center;
  border: 2px solid #48484a; }

.hallpass-header {
  font-size: 22px;
  font-weight: bold;
  color: white;
  padding-bottom: 10px;
  border-bottom: 2px solid #3a3a3c;
  margin-bottom: 15px; }

.hallpass-icon {
  max-width: 150px;
  height: auto;
  margin: 15px auto;
  display: block; }

.hallpass-details {
  font-size: 16px;
  color: #636366;
  margin-bottom: 10px; }

.hallpass-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px; }

.hallpass-buttons button {
  border-radius: 12px;
  font-size: 16px;
  padding: 12px 20px; }

.hallpass-buttons button:hover {
  transform: scale(1.05);
  cursor: pointer; }

/* Microblog form group and label */
.microblog-form-group {
  width: 100%;
  display: flex;
  flex-direction: column; }

.microblog-form-label {
  font-size: 1rem;
  font-weight: 500;
  color: #f1f5f9;
  margin-bottom: 0.25rem; }

.microblog-form-label .required {
  color: #ef4444; }

/* Modal overlay background: dark semi-transparent */
#microblog-modal,
#reply-modal {
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200; }

#microblog-modal,
#reply-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s; }

#microblog-modal.hidden,
#reply-modal.hidden {
  display: none; }

/* Modal Panel: matches microblog panel pattern */
.microblog-modal-panel {
  background: var(--green-bg);
  color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 32rem;
  margin: 0 0.5rem;
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column; }

.microblog-modal-content {
  /* Remove background and color, handled by .microblog-modal-panel */
  width: 100%;
  padding: 0;
  background: none;
  color: inherit; }

.microblog-modal-close {
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s;
  margin-right: 0.5rem; }

.microblog-modal-close:hover {
  color: #fff; }

.microblog-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0; }

.microblog-form {
  display: flex;
  flex-direction: column;
  gap: 1rem; }

.microblog-form label {
  font-size: 1rem;
  font-weight: 500;
  color: #f1f5f9;
  margin-bottom: 0.25rem; }

.microblog-form input[type="text"], .microblog-form textarea[type="text"].smallInput, .microblog-form textarea[type="text"].mediumInput, .microblog-form textarea[type="text"].largeInput {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.5rem;
  font-size: 1rem;
  color: #222;
  background: #fff;
  margin-top: 0.25rem; }

.microblog-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 7rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.5rem;
  font-size: 1rem;
  color: #222;
  background: #fff;
  margin-top: 0.25rem;
  resize: vertical;
  box-sizing: border-box; }

.microblog-form .microblog-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem; }

.microblog-btn {
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s; }

.microblog-btn:hover {
  background: #2563eb; }

.microblog-btn-cancel {
  background: #64748b; }

.microblog-btn-cancel:hover {
  background: #475569; }

/* Floating Action Button */
/* Container that holds the microblog FAB */
.micro-actions-wrapper {
  position: fixed;
  top: 5rem;
  right: 2rem;
  z-index: 1050;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  --fab-size: 56px;
  /* default diameter for circular FABs */ }

/* Floating Action Button */
.microblog-fab {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fab-size, 56px);
  min-width: calc(var(--fab-size, 56px) + 40px); }

.microblog-fab:hover {
  background: #1e40af; }

@media (max-width: 600px) {
  .micro-actions-wrapper {
    top: 1rem;
    right: 1rem; }

  .microblog-fab {
    font-size: 1.2rem;
    min-width: 56px;
    height: var(--fab-size, 56px); } }
/* Side Panel */
.microblog-panel {
  background: var(--green-bg);
  color: var(--white);
  position: fixed;
  top: 5rem;
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: calc(100vh - 5rem - 3rem);
  /* leave 3rem for footer */
  margin-bottom: 3rem;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column; }

.microblog-panel.open {
  transform: translateX(0); }

.microblog-panel-header,
.microblog-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb; }

.microblog-panel-title,
.microblog-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 1rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.microblog-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1; }

.microblog-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem; }

@media (max-width: 768px) {
  .microblog-panel {
    width: 95vw;
    max-width: 95vw;
    height: 85vh;
    border-radius: 12px;
    /* Centered Modal Style */
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    /* Reset right positioning */
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s ease; }

  .microblog-panel.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible; }

  .microblog-fab {
    right: 2rem;
    top: 5rem;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    min-width: auto;
    min-height: auto;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } }
/* Example: Scrollable table container */
#microblog-playground .max-h-\[45vh\],
#microblog-playground .max-h-\[60vh\],
#microblog-playground .max-h-\[70vh\] {
  overflow-y: auto; }

/* Guest Signup Styles */
.guest-signup-toggle-btn {
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-left: auto; }

.guest-signup-toggle-btn:hover {
  background: #059669; }

.guest-signup-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2); }

.guest-signup-title {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff; }

.guest-form-group {
  margin-bottom: 0.75rem; }

.guest-form-group input, .guest-form-group textarea.smallInput, .guest-form-group textarea.mediumInput, .guest-form-group textarea.largeInput {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  font-size: 1rem;
  color: #222;
  background: #fff;
  box-sizing: border-box; }

.guest-submit-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%; }

.guest-submit-btn:hover:not(:disabled) {
  background: #1e40af; }

.guest-submit-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed; }

.guest-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.2rem; }

/* Add more microblog-specific styles as needed */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

/* ===================== Grading Button ===================== */
.grading-button-container {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0; }

.grading-btn {
  padding: 10px 22px;
  border-radius: 999px;
  background: #4CAFEF;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.2s; }
  .grading-btn:hover {
    background: #007ACC; }

/* ===================== Fullscreen Grading Overlay ===================== */
.grading-panel {
  position: fixed;
  inset: 0;
  z-index: 1300;
  /* ABOVE microblog */
  background: #000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  isolation: isolate; }

/* Hidden state */
.grading-panel[hidden] {
  display: none; }

/* ===================== Inner Panel ===================== */
.grading-panel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
  color: white;
  pointer-events: auto; }

/* ===================== Header ===================== */
.grading-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #000;
  border-bottom: 1px solid #333;
  z-index: 1; }
  .grading-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: white; }
  .grading-header .grading-close-btn {
    font-size: 2rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: white; }

/* ===================== Content ===================== */
#grading-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  background: #000;
  color: white; }

/* ===================== Table Styling ===================== */
#grading-content table {
  width: 100%;
  border-collapse: collapse; }
  #grading-content table th,
  #grading-content table td {
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid #333;
    color: white; }
  #grading-content table th {
    background-color: #2A2D2D;
    font-weight: 600; }
  #grading-content table tr:nth-child(even) {
    background-color: #1F1F1F; }
  #grading-content table tr:nth-child(odd) {
    background-color: #000; }

#rubric-container {
  margin-top: 24px;
  padding: 16px;
  border-top: 1px solid #333; }

.rubric-label {
  font-weight: 600; }

.rubric-score {
  padding: 4px; }

.rubric-comment {
  width: 100%;
  min-height: 48px; }

.rubric-footer {
  margin-top: 16px;
  font-size: 1.1em; }

#create-assignment-btn {
  padding: 8px 14px;
  background: #4CAFEF;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s; }
  #create-assignment-btn:hover {
    background: #007ACC; }

#assignment-modal {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; }

.assignment-box {
  background: #2A2D2D;
  padding: 20px;
  width: 300px;
  border-radius: 8px; }

.assignment-box input, .assignment-box textarea.smallInput, .assignment-box textarea.mediumInput, .assignment-box textarea.largeInput,
.assignment-box textarea {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 8px;
  background: #000;
  color: white;
  border: 1px solid #333;
  border-radius: 4px; }

.assignment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px; }

#rubric-modal,
#assignment-modal {
  position: fixed;
  inset: 0;
  background: #000;
  align-items: center;
  justify-content: center;
  z-index: 10000; }

#rubric-modal:not([hidden]),
#assignment-modal:not([hidden]) {
  display: flex; }

.rubric-panel,
.assignment-box {
  background: #2A2D2D;
  padding: 16px;
  border-radius: 8px;
  width: 600px; }

.rubric-row {
  display: grid;
  grid-template-columns: 120px 80px 1fr;
  gap: 8px;
  margin-bottom: 8px; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.site-header {
  border-top: 0px solid;
  border-bottom: 1px solid #404040;
  font-weight: bold;
  z-index: 999999999; }

.site-nav {
  background-color: transparent; }

.site-nav .page-link {
  line-height: 1.5;
  padding: 5px 10px;
  margin-left: 20px; }

.site-title {
  color: white !important; }

.site-nav .page-link:not(:last-child) {
  margin-right: 0; }

#loginArea {
  margin-left: 20px; }

.site-title,
.site-title:visited,
.site-nav,
.page-link {
  font-weight: bolder; }

@media screen and (max-width: fit-content) {
  .site-title {
    padding-right: 45px; } }
.site-header .wrapper {
  max-width: fit-content !important; }

/* Press Start 2P font loaded globally via head-custom.html */
#score {
  position: relative;
  z-index: 2;
  padding: 5px;
  color: darkred !important; }

#gameBegin,
#gameOver,
#settings,
#leaderboard {
  position: relative;
  z-index: 2; }

#addRow,
#backToGame {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-right: 2rem; }

.submenu {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  border: none;
  position: fixed;
  z-index: 3;
  top: 3.73rem;
  width: fit-content; }
  .submenu .submenu-item {
    display: inline-block;
    margin-right: 2rem; }

.sidebar {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  border: none;
  position: fixed;
  z-index: 3;
  top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5-second transition effect to slide in the sidebar */
  width: 0px;
  padding-left: 0px;
  padding-right: 0px;
  overflow-y: scroll;
  height: 75%; }

.leaderboardDropDown {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  border: none;
  position: fixed;
  z-index: 3;
  top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5-second transition effect to slide in the sidebar */
  width: 0px;
  padding-left: 0px;
  padding-right: 0px;
  height: 75%;
  scroll-behavior: auto; }

#leaderboardTitle {
  text-align: center;
  color: #3d3af2;
  text-decoration: wavy;
  font-weight: 900;
  font-size: 70px;
  font-family: "Press Start 2P", system-ui;
  background-color: #b01a2e; }

.table.scores,
th,
tr,
td {
  text-align: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; }

.table.scores th {
  background-color: #e0b2b2; }
.table.scores tr td {
  border: 1px solid #742929; }
  .table.scores tr td:nth-child(odd) {
    background-color: #e85252; }
  .table.scores tr td:nth-child(even) {
    background-color: #be6464; }

.table.levels tr {
  cursor: pointer; }
  .table.levels tr td {
    border: 1px solid #6272a4; }
  .table.levels tr:hover {
    background-color: #6272a4; }
    .table.levels tr:hover td {
      background-color: inherit; }

.input.userID {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  height: 30px;
  border-radius: 5px;
  padding: 5px;
  width: 100px; }

.input.gameSpeed,
.input.gravity {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  height: 30px;
  border-radius: 5px;
  padding: 5px;
  width: 40px;
  text-align: right; }

#toggleCanvasEffect,
#background,
#platform {
  animation: fadein 3s; }

#startGame,
#marioSays {
  animation: flash 0.5s infinite; }

@keyframes flash {
  50% {
    opacity: 0; } }
@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.bottom-matter {
  position: relative; }

#cut-story {
  visibility: hidden;
  min-width: 250px;
  background-color: #ff5d0c;
  color: white;
  font-family: "Press Start 2P", system-ui;
  border-radius: 4px;
  position: fixed;
  text-align: center;
  justify-content: center;
  border: 4px solid;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 50%;
  padding: 10px;
  bottom: 0px; }

/*creating class with javascript*/
#cut-story.show {
  visibility: visible;
  -webkit-animation: fadein 3s;
  animation: fadein 3s; }

#cut-story.hide {
  visibility: visible;
  -webkit-animation: fadeout 0.5s 3s;
  animation: fadeout 0.5s 3s; }

body {
  background: #FFB6C1; }

#container {
  width: 95%;
  height: 100vh;
  display: flex;
  text-align: center; }

.fun_facts {
  visibility: hidden;
  min-width: 250px;
  background-color: #0cebff;
  color: #096b4e;
  font-family: "Press Start 2P", system-ui;
  border-radius: 20px;
  position: absolute;
  text-align: center;
  border: 4px solid;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 90%;
  padding: 10px;
  bottom: 0px;
  z-index: 1; }

.fun_facts h3,
.fun_facts p {
  font-size: 1rem; }

.quiz-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px; }

.question-section {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px; }

.question {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px; }

.answer-input {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px; }

.submit-btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer; }
  .submit-btn:hover {
    background-color: #45a049; }
  .submit-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed; }

.score-display {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0; }

.leaderboard {
  margin-top: 30px; }
  .leaderboard table {
    width: 100%;
    border-collapse: collapse; }
  .leaderboard th, .leaderboard td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd; }
  .leaderboard th {
    background-color: #4CAF50;
    color: white; }
  .leaderboard tr:hover {
    background-color: #f5f5f5; }

.user-form {
  margin-bottom: 20px; }
  .user-form input, .user-form textarea.smallInput, .user-form textarea.mediumInput, .user-form textarea.largeInput {
    padding: 8px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px; }

.error-msg {
  color: red;
  margin: 10px 0; }

.success-msg {
  color: green;
  margin: 10px 0; }

.rps-lesson .lesson-wrapper {
  background: #121212;
  /* slightly lighter than page background */
  border-radius: 12px;
  padding: 40px 32px;
  margin: 40px auto;
  max-width: 1000px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  border: 1px solid #000000; }

.rps-lesson {
  background: #121212;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  margin: 0;
  padding: 0; }

.rps-lesson .subtitle {
  text-align: center;
  color: #e5e7eb;
  font-style: italic;
  font-size: 1.15em;
  margin-bottom: 24px; }

.rps-lesson .play-instructions {
  background: #121212;
  color: #fff;
  border: 2px solid #ffa600;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  margin: 20px auto 32px auto;
  padding: 20px;
  max-width: 700px; }

.rps-lesson .game-buttons {
  text-align: center;
  margin: 32px 0 24px 0;
  display: flex;
  justify-content: center;
  gap: 32px; }

.rps-lesson button {
  background: #232336;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: bold;
  padding: 10px 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background 0.2s, color 0.2s, transform 0.2s; }

.rps-lesson button:hover {
  background: #ffa600;
  color: #232336;
  transform: translateY(-2px); }

.rps-lesson button:active {
  background: #c06c84;
  color: #fff;
  transform: translateY(-1px); }

.rps-lesson h1 {
  color: #fff;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: none;
  padding-bottom: 0; }

.rps-lesson h2 {
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 36px;
  margin-bottom: 18px;
  border-left: 5px solid #c06c84;
  padding-left: 18px; }

.rps-lesson h3 {
  color: #fff;
  font-size: 1.25em;
  font-weight: bold;
  margin-top: 28px;
  margin-bottom: 12px; }

.rps-lesson h4 {
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 8px; }

.rps-lesson p, .rps-lesson li, .rps-lesson strong {
  color: #e5e7eb;
  font-size: 0.98em; }

.rps-lesson ul, .rps-lesson ol {
  margin: 15px 0;
  padding-left: 30px; }

.rps-lesson li {
  margin: 8px 0; }

/* Section highlight for all major content blocks */
.rps-lesson .section-highlight {
  background: #121212;
  border-radius: 16px;
  border: 2px solid #c06c84;
  box-shadow: 0 0 0 2px #c06c84;
  padding: 32px 28px 24px 28px;
  margin-bottom: 32px; }

.rps-lesson .console-example, .rps-lesson .code-block {
  background: #000 !important;
  color: #f6f5f4 !important;
  padding: 18px;
  font-family: 'Courier New', monospace;
  margin: 18px 0;
  border: 2px solid #8e6fc4;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 1em; }

.rps-lesson .checkpoint-section {
  margin: 32px 0 24px 0;
  padding: 24px;
  background: #111112;
  border-radius: 12px;
  border: 2px solid #ffd700;
  box-shadow: 0 2px 12px #0004; }

.rps-lesson .checkpoint-label {
  font-weight: bold;
  color: #ffffff;
  font-size: 1.1em;
  margin-bottom: 8px;
  display: block; }

.rps-lesson .checkpoint-input {
  width: 100%;
  padding: 10px;
  font-size: 1em;
  border-radius: 6px;
  border: 2px solid #444;
  margin-bottom: 10px;
  background: #121212;
  color: #fff;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s; }

.rps-lesson .checkpoint-input.correct {
  border: 2px solid #22c55e;
  box-shadow: 0 0 8px #22c55e;
  background: #1e2e1e; }

.rps-lesson .checkpoint-input.incorrect {
  border: 2px solid #ef4444;
  box-shadow: 0 0 8px #ef4444;
  background: #2e1e1e; }

.rps-lesson .checkpoint-feedback {
  font-weight: bold;
  margin-bottom: 8px;
  min-height: 24px; }

.rps-lesson .checkpoint-feedback.correct {
  color: #22c55e; }

.rps-lesson .checkpoint-feedback.incorrect {
  color: #ef4444; }

.rps-lesson .show-answer-btn {
  background: #111112;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 0; }

.rps-lesson .show-answer-btn:hover {
  background: #8e6fc4; }

.rps-lesson .flowchart-box {
  border: 2px solid #fff !important;
  background: #121212;
  border-radius: 8px;
  max-width: 500px;
  text-align: left;
  padding: 1rem 1.5rem; }

.rps-lesson .flowchart-arrow {
  color: #fff !important;
  font-size: 2.5rem; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.search-result-preview {
  color: #8e8e93 !important;
  list-style-type: none !important;
  list-style: none !important;
  background-color: #1e1e1e !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px; }

.search-result-highlight {
  color: #4bbaff !important;
  font-weight: bold !important;
  list-style-type: none !important;
  list-style: none !important; }

.search-results-list-item .search-result-title {
  color: white !important;
  list-style-type: none !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: #1e1e1e !important;
  padding: 10px; }

.search-results-list-item {
  list-style-type: none !important;
  margin-bottom: 10px !important; }

.stack-clicker-page {
  --stack-clicker-bg: #0d0d0d;
  --stack-clicker-bg-alt: #1a1a1a;
  --stack-clicker-panel: #1e1e1e;
  --stack-clicker-ink: #e0e0e0;
  --stack-clicker-accent: #00ff88;
  --stack-clicker-accent-2: #00cc66;
  --stack-clicker-warn: #ff6b6b;
  --stack-clicker-line: #333333;
  margin: 0;
  font-family: "Fira Code", "Courier New", monospace;
  color: var(--stack-clicker-ink);
  background: var(--stack-clicker-bg);
  min-height: 100vh; }
  .stack-clicker-page * {
    box-sizing: border-box; }
  .stack-clicker-page .app {
    width: min(1100px, 94vw);
    margin: 1.2rem auto;
    display: grid;
    gap: 1rem;
    grid-template-columns: 2fr 1.2fr; }
  .stack-clicker-page .panel {
    background: var(--stack-clicker-panel);
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 1rem;
    box-shadow: none; }
  .stack-clicker-page .hero {
    grid-column: 1; }
  .stack-clicker-page .upgrades {
    grid-column: 2;
    grid-row: 1 / 3; }
  .stack-clicker-page .upgrade-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem; }
  .stack-clicker-page .upgrade-tab {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    background: #252525;
    color: var(--stack-clicker-ink);
    padding: 0.45rem 0.5rem;
    font-weight: 700;
    cursor: pointer; }
  .stack-clicker-page .upgrade-tab.active {
    background: var(--stack-clicker-accent);
    color: #000;
    border-color: transparent; }
  .stack-clicker-page .lesson-log {
    grid-column: 1; }
  .stack-clicker-page h1,
  .stack-clicker-page h2 {
    margin: 0 0 0.5rem; }
  .stack-clicker-page .subtitle {
    margin-top: 0;
    opacity: 0.8; }
  .stack-clicker-page .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 0.6rem;
    margin: 0.8rem 0; }
  .stack-clicker-page .stat-card {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 0.6rem;
    background: #252525; }
  .stack-clicker-page .stat-card.warn {
    border-color: #663333;
    background: #2a1f1f; }
  .stack-clicker-page .label {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.85; }
  .stack-clicker-page .value {
    margin: 0.15rem 0 0;
    font-size: 1.25rem;
    font-weight: 700; }
  .stack-clicker-page .push-btn {
    width: 100%;
    border: 1px solid var(--stack-clicker-accent);
    border-radius: 4px;
    padding: 0.85rem;
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    background: var(--stack-clicker-accent);
    cursor: pointer; }
  .stack-clicker-page .ai-btn {
    width: 100%;
    margin-top: 0.6rem;
    border: 1px solid var(--stack-clicker-accent);
    border-radius: 4px;
    padding: 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    background: transparent;
    color: var(--stack-clicker-accent);
    cursor: pointer; }
  .stack-clicker-page .ai-btn:hover {
    background: #333333; }
  .stack-clicker-page .push-btn:active {
    transform: translateY(1px); }
  .stack-clicker-page .meter-wrap {
    margin-top: 0.9rem; }
  .stack-clicker-page .meter {
    width: 100%;
    height: 18px;
    border-radius: 2px;
    background: #252525;
    border: 1px solid var(--stack-clicker-line);
    overflow: hidden; }
  .stack-clicker-page .meter-fill {
    height: 100%;
    width: 0%;
    background: var(--stack-clicker-accent);
    transition: width 120ms linear; }
  .stack-clicker-page .tip {
    margin: 0.7rem 0 0;
    font-size: 0.9rem; }
  .stack-clicker-page .upgrade-list {
    display: grid;
    gap: 0.6rem; }
  .stack-clicker-page .upgrade {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 0.6rem;
    background: #252525; }
  .stack-clicker-page .upgrade h3 {
    margin: 0;
    font-size: 0.95rem; }
  .stack-clicker-page .upgrade p {
    margin: 0.4rem 0;
    font-size: 0.86rem; }
  .stack-clicker-page .upgrade button {
    width: 100%;
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 0.45rem;
    cursor: pointer;
    background: #333333;
    color: var(--stack-clicker-accent); }
  .stack-clicker-page .upgrade button:disabled {
    cursor: not-allowed;
    opacity: 0.55; }
  .stack-clicker-page #logList {
    margin: 0;
    padding-left: 1.2rem;
    max-height: 220px;
    overflow: auto; }
  .stack-clicker-page #logList li {
    margin-bottom: 0.45rem;
    font-size: 0.9rem; }
  .stack-clicker-page .ai-npc-container {
    margin-top: 0.55rem;
    padding: 0.65rem;
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    background: #252525;
    box-shadow: none; }
  .stack-clicker-page .ai-npc-input {
    background: #1e1e1e;
    border: 1px solid var(--stack-clicker-line);
    color: var(--stack-clicker-ink);
    font-family: "Fira Code", "Courier New", monospace; }
  .stack-clicker-page .ai-npc-input:focus {
    background: #1e1e1e;
    border-color: var(--stack-clicker-accent); }
  .stack-clicker-page .ai-npc-history-btn {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    background: #333333;
    color: var(--stack-clicker-accent); }
  .stack-clicker-page .ai-npc-history-btn:hover {
    background: #3a3a3a;
    color: var(--stack-clicker-accent);
    transform: none; }
  .stack-clicker-page .ai-npc-response-area {
    border-left: 4px solid var(--stack-clicker-accent);
    background: #252525;
    color: var(--stack-clicker-ink);
    font-style: normal;
    box-shadow: none; }
  .stack-clicker-page [id^="custom-dialogue-box-"] {
    background: #1e1e1e !important;
    border: 1px solid var(--stack-clicker-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--stack-clicker-ink) !important; }
  .stack-clicker-page [id^="custom-dialogue-box-"] p,
  .stack-clicker-page [id^="custom-dialogue-box-"] em {
    color: var(--stack-clicker-ink) !important;
    background: transparent; }
  .stack-clicker-page [id^="dialogue-close-btn-"] {
    background: #333333;
    border: 1px solid var(--stack-clicker-line);
    color: var(--stack-clicker-accent); }
  .stack-clicker-page [id^="dialogue-close-btn-"]:hover {
    background: #3a3a3a; }
  @media (max-width: 900px) {
    .stack-clicker-page .app {
      grid-template-columns: 1fr; }
    .stack-clicker-page .hero,
    .stack-clicker-page .lesson-log,
    .stack-clicker-page .upgrades {
      grid-column: 1;
      grid-row: auto; } }

/* ---------- User theme: plain color (no gradients) ---------- */
:root {
  --pref-bg-color: #0b1220;
  --pref-text-color: #e6eef8;
  --pref-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --pref-font-size: 14px;
  --pref-accent-color: #3b82f6;
  --text-muted: #a0a0a0;
  /* Derived UI variables */
  --panel: var(--pref-bg-color);
  --panel-mid: rgba(0,0,0,0.12);
  --ui-bg: rgba(0,0,0,0.06);
  --ui-border: rgba(255,255,255,0.06);
  --emoji-bg: rgba(255,255,255,0.9); }

/* Scope the user theme */
.user-theme-active,
.user-theme-active.dark {
  background-color: var(--pref-bg-color) !important;
  color: var(--pref-text-color) !important;
  font-family: var(--pref-font-family) !important;
  font-size: var(--pref-font-size) !important; }

/* Make main containers use plain user color (no gradients) */
.user-theme-active {
  /* Full sidebar and topbar use the plain user color */
  /* Infograph module cards: same plain color for every card */
  /* Ensure no alternating rule overrides the plain color */
  /* Columns transparent so card color remains visible */
  /* Questions: background plain; inputs also plain user color */
  /* Generic cards/panels use plain user color */
  /* Links/icons */
  /* Force text color for readability */
  /* Muted secondary text */
  /* Inputs/buttons default */
  /* Invert color to look preferred */
  /* Lesson player specific overrides */
  /* Tailwind background class overrides */ }
  .user-theme-active .container,
  .user-theme-active .page-content,
  .user-theme-active .wrapper,
  .user-theme-active main,
  .user-theme-active article,
  .user-theme-active .post,
  .user-theme-active .content,
  .user-theme-active .opencs_root {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border-color: var(--ui-border) !important; }
  .user-theme-active .lesson-sidebar,
  .user-theme-active .lesson-topbar,
  .user-theme-active aside,
  .user-theme-active .sidebar,
  .user-theme-active #sidebar,
  .user-theme-active .site-sidebar,
  .user-theme-active .sidebar-container,
  .user-theme-active .side-panel {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border-color: var(--ui-border) !important; }
  .user-theme-active .module-card {
    background-color: var(--pref-bg-color) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--pref-text-color) !important;
    padding: 1rem !important;
    box-shadow: none !important; }
  .user-theme-active .module-card:nth-child(2n) {
    background-color: var(--pref-bg-color) !important; }
  .user-theme-active .module-image-col,
  .user-theme-active .module-keypoints-col,
  .user-theme-active .module-desc-col {
    background: transparent !important;
    color: var(--pref-text-color) !important; }
  .user-theme-active .module-desc-col {
    padding: 0.6rem !important;
    border-radius: 0.375rem !important; }
  .user-theme-active .module-img {
    background-color: transparent !important;
    border-radius: 0.5rem !important;
    object-fit: cover !important; }
  .user-theme-active .module-emoji {
    background-color: var(--emoji-bg) !important;
    color: #0b1220 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important; }
  .user-theme-active .module-overlay {
    background-color: rgba(0, 0, 0, 0.45) !important; }
  .user-theme-active .questions,
  .user-theme-active .question-box,
  .user-theme-active .question-card,
  .user-theme-active .qa-box,
  .user-theme-active .qa-section {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border: 1px solid var(--ui-border) !important; }
  .user-theme-active .question-box input, .user-theme-active .question-box textarea.smallInput, .user-theme-active .question-box textarea.mediumInput, .user-theme-active .question-box textarea.largeInput,
  .user-theme-active .question-box textarea,
  .user-theme-active .question-card input,
  .user-theme-active .question-card textarea.smallInput,
  .user-theme-active .question-card textarea.mediumInput,
  .user-theme-active .question-card textarea.largeInput,
  .user-theme-active .question-card textarea,
  .user-theme-active input.question-input,
  .user-theme-active textarea.question-input.smallInput,
  .user-theme-active textarea.question-input.mediumInput,
  .user-theme-active textarea.question-input.largeInput,
  .user-theme-active textarea.question-input {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    padding: 0.5rem !important; }
  .user-theme-active .card,
  .user-theme-active .panel,
  .user-theme-active .box,
  .user-theme-active .post,
  .user-theme-active .microblog-post,
  .user-theme-active [class*="rounded-xl"],
  .user-theme-active [class*="rounded-lg"] {
    background-color: var(--pref-bg-color) !important;
    border-color: var(--ui-border) !important;
    color: var(--pref-text-color) !important; }
  .user-theme-active a, .user-theme-active a:visited, .user-theme-active a:hover,
  .user-theme-active .module-card a,
  .user-theme-active .module-card svg,
  .user-theme-active header a,
  .user-theme-active .site-header a,
  .user-theme-active aside a,
  .user-theme-active .sidebar a {
    color: var(--pref-accent-color) !important;
    fill: currentColor !important; }
  .user-theme-active p, .user-theme-active span, .user-theme-active div, .user-theme-active li, .user-theme-active td, .user-theme-active th, .user-theme-active label, .user-theme-active h1, .user-theme-active h2, .user-theme-active h3, .user-theme-active h4, .user-theme-active h5, .user-theme-active h6, .user-theme-active small {
    color: var(--pref-text-color) !important; }
  .user-theme-active .text-neutral-400, .user-theme-active .text-neutral-500, .user-theme-active .text-gray-400, .user-theme-active .text-gray-500,
  .user-theme-active .text-slate-400, .user-theme-active .text-slate-500, .user-theme-active .text-zinc-400, .user-theme-active .text-zinc-500,
  .user-theme-active .post-meta, .user-theme-active .post-meta-description {
    color: var(--text-muted) !important; }
  .user-theme-active input, .user-theme-active textarea.smallInput, .user-theme-active textarea.mediumInput, .user-theme-active textarea.largeInput, .user-theme-active select, .user-theme-active textarea, .user-theme-active button {
    background-color: var(--panel);
    border: 1px solid var(--pref-accent-color); }
  .user-theme-active button.bg-blue-600, .user-theme-active button.bg-blue-700,
  .user-theme-active button.bg-green-600, .user-theme-active button.bg-green-700,
  .user-theme-active .btn-primary,
  .user-theme-active .save-section-btn,
  .user-theme-active #save-preferences,
  .user-theme-active #save-theme-btn {
    background-color: color-mix(in srgb, var(--pref-accent-color) 65%, white 35%);
    border: 1px solid var(--pref-accent-color); }
  .user-theme-active .lesson-player,
  .user-theme-active .lesson-main,
  .user-theme-active .main-content,
  .user-theme-active .content-wrapper,
  .user-theme-active .lesson-content {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important; }
  .user-theme-active .lesson-sidebar,
  .user-theme-active .sidebar-header,
  .user-theme-active .sprint-nav,
  .user-theme-active .sprint-section,
  .user-theme-active .lesson-item {
    background-color: var(--panel) !important;
    color: var(--pref-text-color) !important;
    border-color: var(--ui-border) !important; }
  .user-theme-active .sidebar-header h2,
  .user-theme-active .sidebar-header p,
  .user-theme-active .sprint-toggle,
  .user-theme-active .lesson-title,
  .user-theme-active .progress-label {
    color: var(--pref-text-color) !important; }
  .user-theme-active [class*="bg-neutral-"],
  .user-theme-active [class*="bg-gray-"],
  .user-theme-active [class*="bg-slate-"],
  .user-theme-active [class*="bg-zinc-"] {
    background-color: var(--pref-bg-color) !important; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

button, .primary, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  color: white;
  background-color: rgba(80, 80, 80, 0.7);
  transition: all 0.5s;
  transition: all 0.5s; }
  button:hover, .primary:hover, .danger-button:hover, .ui-runner-container .stopBtn:hover, .game-runner-container .stopBtn:hover, .warning-button:hover, .game-runner-container .pauseBtn:hover, .success-button:hover, .info-button:hover, .hallpass-buttons button:hover {
    background-color: rgba(55, 55, 55, 0.7); }
  button:active, .primary:active, .danger-button:active, .ui-runner-container .stopBtn:active, .game-runner-container .stopBtn:active, .warning-button:active, .game-runner-container .pauseBtn:active, .success-button:active, .info-button:active, .hallpass-buttons button:active {
    background-color: rgba(29, 29, 29, 0.7); }

.secondary {
  color: #999999;
  background-color: rgba(120, 120, 128, 0.12);
  transition: all 0.5s;
  transition: all 0.5s; }
  .secondary:hover {
    background-color: rgba(95, 95, 102, 0.12); }
  .secondary:active {
    background-color: rgba(71, 71, 75, 0.12); }

.filledHighlight {
  background-color: #007aff;
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledHighlight:hover {
    background-color: #0062cc; }
  .filledHighlight:active {
    background-color: #004999; }

.filledTinted {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.15);
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledTinted:hover {
    background-color: rgba(0, 98, 204, 0.15); }
  .filledTinted:active {
    background-color: rgba(0, 73, 153, 0.15); }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/* define class for redifined button */
.button {
  width: auto;
  height: auto;
  border-radius: 10px;
  background-color: #21807c;
  border: 3px solid black;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 1;
  grid-row: span 1;
  transition: all 0.5s; }

/* darkens the background color on hover to create a selecting effect */
.button:hover {
  background-color: #373737; }

/* "row style" is flexible size and aligns pictures in center */
.row {
  align-items: center;
  display: flex; }

/* "column style" is one-third of the width with padding */
.column {
  flex: 16.66%;
  padding: 3px; }

/* Animation container */
#animation {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; }

/* Calculator container - modern grid layout */
.calculator-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 12px; }

/* Output display */
.calculator-output {
  grid-column: span 4;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: #fff;
  text-align: right;
  border: none;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  overflow: hidden; }

/* Base button mixin for calculator */
/* Number buttons */
.calculator-number {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Zero button spans 2 columns */ }
  .calculator-number:hover {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  .calculator-number:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-number.zero {
    grid-column: span 2;
    aspect-ratio: auto;
    padding: 0 2rem; }

/* Operation buttons (+, -, *, /) */
.calculator-operation {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #ff9500, #e68a00);
  color: #fff;
  box-shadow: 0 4px 6px rgba(255, 149, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-operation:hover {
    background: linear-gradient(145deg, #ffaa33, #ff9500);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 149, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-operation:active {
    transform: translateY(0); }

/* Clear button */
.calculator-clear {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(1rem, 3vw, 1.2rem); }
  .calculator-clear:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-clear:active {
    transform: translateY(0); }

/* Special operation buttons (sqrt, %) */
.calculator-special {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-special:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-special:active {
    transform: translateY(0); }

/* Equals button */
.calculator-equals {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #34c759, #28a745);
  color: #fff;
  box-shadow: 0 4px 6px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-equals:hover {
    background: linear-gradient(145deg, #4cd964, #34c759);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(52, 199, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-equals:active {
    transform: translateY(0); }

/* Responsive breakpoints */
@media (max-width: 480px) {
  .calculator-container {
    max-width: 100%;
    padding: 1rem;
    gap: 8px;
    border-radius: 16px; }

  .calculator-output {
    min-height: 60px;
    padding: 0.75rem 1rem; } }
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-container {
    max-width: 350px; } }
@media (min-width: 769px) {
  .calculator-container {
    max-width: 400px; }

  .calculator-number,
  .calculator-operation,
  .calculator-clear,
  .calculator-special,
  .calculator-equals {
    min-height: 70px; } }
/* Disable canvas filter if present */
canvas {
  filter: none; }

.iridescent {
  position: relative;
  overflow: hidden;
  background: blue;
  /* base blue */
  color: white; }
  .iridescent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(200, 200, 200, 0.6) 50%, rgba(255, 255, 255, 0.2) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s infinite linear;
    z-index: 0; }
  .iridescent span,
  .iridescent a {
    position: relative;
    z-index: 1; }

@keyframes shimmer {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 100% 50%; } }
/**
 * Runner Control Buttons
 * Standardized button styles for code/UI/game runner interfaces
 * These classes provide semantic, theme-aware buttons for common runner actions
 * 
 * Uses colors from root-color-map.scss - single source of truth
 */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.primary.disabled, .disabled.danger-button, .ui-runner-container .disabled.stopBtn, .game-runner-container .disabled.stopBtn, .disabled.warning-button, .game-runner-container .disabled.pauseBtn, .disabled.success-button, .disabled.info-button, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .disabled.danger-button:hover, .ui-runner-container .disabled.stopBtn:hover, .game-runner-container .disabled.stopBtn:hover, .disabled.warning-button:hover, .game-runner-container .disabled.pauseBtn:hover, .disabled.success-button:hover, .disabled.info-button:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .disabled.danger-button:active, .ui-runner-container .disabled.stopBtn:active, .game-runner-container .disabled.stopBtn:active, .disabled.warning-button:active, .game-runner-container .disabled.pauseBtn:active, .disabled.success-button:active, .disabled.info-button:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

.danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important; }
  .danger-button:hover, .ui-runner-container .stopBtn:hover, .game-runner-container .stopBtn:hover {
    background-color: #c62232 !important;
    border-color: #c62232 !important;
    opacity: 0.95; }
  .danger-button:active, .ui-runner-container .stopBtn:active, .game-runner-container .stopBtn:active {
    background-color: #a71d2a !important; }
  .danger-button:disabled, .ui-runner-container .stopBtn:disabled, .game-runner-container .stopBtn:disabled {
    background-color: rgba(220, 53, 69, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.warning-button, .game-runner-container .pauseBtn {
  background-color: #FBBF24 !important;
  border-color: #FBBF24 !important;
  color: #000 !important; }
  .warning-button:hover, .game-runner-container .pauseBtn:hover {
    background-color: #f2b004 !important;
    border-color: #f2b004 !important;
    opacity: 0.95; }
  .warning-button:active, .game-runner-container .pauseBtn:active {
    background-color: #cf9604 !important; }
  .warning-button:disabled, .game-runner-container .pauseBtn:disabled {
    background-color: #5A3D2D !important;
    color: rgba(0, 0, 0, 0.5) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.success-button {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: white !important; }
  .success-button:hover {
    background-color: #0d9367 !important;
    border-color: #0d9367 !important;
    opacity: 0.95; }
  .success-button:active {
    background-color: #0a7350 !important; }
  .success-button:disabled {
    background-color: rgba(40, 167, 69, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.info-button {
  background-color: #3182CE !important;
  border-color: #3182CE !important;
  color: white !important; }
  .info-button:hover {
    background-color: #296dad !important;
    border-color: #296dad !important;
    opacity: 0.95; }
  .info-button:active {
    background-color: #225b90 !important; }
  .info-button:disabled {
    background-color: rgba(49, 130, 206, 0.2) !important;
    cursor: not-allowed;
    opacity: 0.6; }

.danger-button.icon-only, .ui-runner-container .icon-only.stopBtn, .game-runner-container .icon-only.stopBtn,
.warning-button.icon-only,
.game-runner-container .icon-only.pauseBtn,
.success-button.icon-only,
.info-button.icon-only {
  width: 38px;
  min-width: 38px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  @media (max-width: 768px) {
    .danger-button.icon-only, .ui-runner-container .icon-only.stopBtn, .game-runner-container .icon-only.stopBtn,
    .warning-button.icon-only,
    .game-runner-container .icon-only.pauseBtn,
    .success-button.icon-only,
    .info-button.icon-only {
      width: 44px;
      min-width: 44px; } }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
/* Define a mixin for common dropdown styles */
/* Apply mixin to dropdown menus */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdown:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdown .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdown .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdown .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdown .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdown .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp1 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp1:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp1 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp1 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp1 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp1 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp1 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp2 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp2:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp2 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp2 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp2 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp2 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp2 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp3 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp3:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp3 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp3 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp3 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp3 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp3 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp4 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp4:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp4 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp4 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp4 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp4 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp4 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

@keyframes scaleIn {
  0% {
    transform: scale(0.8);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }
.dropbtn {
  border: none;
  background-color: transparent !important;
  text-decoration: underline; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
img {
  border-radius: 12px; }

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(30px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; }

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
input, input.smallInput, input.mediumInput, input.largeInput, textarea.smallInput, textarea.mediumInput, textarea.largeInput, input.gradientInput, textarea {
  color: white;
  border-radius: 12px;
  border: 1px solid rgba(72, 72, 81, 0.63);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea.smallInput:focus, textarea.mediumInput:focus, textarea.largeInput:focus, textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3); }
  input:-webkit-autofill, textarea.smallInput:-webkit-autofill, textarea.mediumInput:-webkit-autofill, textarea.largeInput:-webkit-autofill, input:-webkit-autofill:hover, textarea.smallInput:-webkit-autofill:hover, textarea.mediumInput:-webkit-autofill:hover, textarea.largeInput:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea.smallInput:-webkit-autofill:focus, textarea.mediumInput:-webkit-autofill:focus, textarea.largeInput:-webkit-autofill:focus, input:-webkit-autofill:active, textarea.smallInput:-webkit-autofill:active, textarea.mediumInput:-webkit-autofill:active, textarea.largeInput:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329; }

input, input.smallInput, input.mediumInput, input.largeInput, textarea.smallInput, textarea.mediumInput, textarea.largeInput, input.gradientInput, textarea {
  color: white;
  border-radius: 12px;
  border: 1px solid rgba(72, 72, 81, 0.63);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea.smallInput:focus, textarea.mediumInput:focus, textarea.largeInput:focus, textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3); }
  input:-webkit-autofill, textarea.smallInput:-webkit-autofill, textarea.mediumInput:-webkit-autofill, textarea.largeInput:-webkit-autofill, input:-webkit-autofill:hover, textarea.smallInput:-webkit-autofill:hover, textarea.mediumInput:-webkit-autofill:hover, textarea.largeInput:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea.smallInput:-webkit-autofill:focus, textarea.mediumInput:-webkit-autofill:focus, textarea.largeInput:-webkit-autofill:focus, input:-webkit-autofill:active, textarea.smallInput:-webkit-autofill:active, textarea.mediumInput:-webkit-autofill:active, textarea.largeInput:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329; }

input.smallInput, textarea.smallInput {
  font-size: 0.8em; }

input.mediumInput, textarea.mediumInput {
  font-size: 1.1em; }

input.largeInput, textarea.largeInput {
  font-size: 1.5em; }

textarea.smallInput {
  font-size: 0.8em;
  height: 8em; }

textarea.mediumInput {
  font-size: 1.1em;
  height: 12em; }

textarea.largeInput {
  font-size: 1.5em;
  height: 24em; }

input, input.smallInput, input.mediumInput, input.largeInput, textarea.smallInput, textarea.mediumInput, textarea.largeInput, input.gradientInput, textarea {
  color: white;
  border-radius: 12px;
  border: 1px solid rgba(72, 72, 81, 0.63);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea.smallInput:focus, textarea.mediumInput:focus, textarea.largeInput:focus, textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3); }
  input:-webkit-autofill, textarea.smallInput:-webkit-autofill, textarea.mediumInput:-webkit-autofill, textarea.largeInput:-webkit-autofill, input:-webkit-autofill:hover, textarea.smallInput:-webkit-autofill:hover, textarea.mediumInput:-webkit-autofill:hover, textarea.largeInput:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea.smallInput:-webkit-autofill:focus, textarea.mediumInput:-webkit-autofill:focus, textarea.largeInput:-webkit-autofill:focus, input:-webkit-autofill:active, textarea.smallInput:-webkit-autofill:active, textarea.mediumInput:-webkit-autofill:active, textarea.largeInput:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
input.gradientInput, textarea.gradientInput.smallInput, textarea.gradientInput.mediumInput, textarea.gradientInput.largeInput {
  background-image: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a); }

.inputIconGroup > ion-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  /* Adjust based on desired spacing */
  transform: translateY(-50%);
  font-size: 1.5rem;
  /* Adjust the size of the icon */
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  /* Ensure the icon does not interfere with input focus */ }

.switch {
  display: flex;
  align-items: center;
  gap: 10px; }
  .switch .toggle {
    position: relative;
    display: flex;
    width: 54px;
    height: 31px;
    padding: 2px 2px 2px 6px;
    justify-content: flex-end;
    align-items: center; }
    .switch .toggle input[type="checkbox"], .switch .toggle textarea[type="checkbox"].smallInput, .switch .toggle textarea[type="checkbox"].mediumInput, .switch .toggle textarea[type="checkbox"].largeInput {
      opacity: 0;
      width: 0;
      height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border-radius: 100px; }
  .slider:before {
    content: "";
    position: absolute;
    width: 27px;
    height: 27px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%; }

.label-text {
  font-size: 16px;
  color: #fff;
  user-select: none; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.switch input[type="checkbox"]:checked + .slider, .switch textarea[type="checkbox"].smallInput:checked + .slider, .switch textarea[type="checkbox"].mediumInput:checked + .slider, .switch textarea[type="checkbox"].largeInput:checked + .slider {
  background: #007aff; }
  .switch input[type="checkbox"]:checked + .slider.green, .switch textarea[type="checkbox"].smallInput:checked + .slider.green, .switch textarea[type="checkbox"].mediumInput:checked + .slider.green, .switch textarea[type="checkbox"].largeInput:checked + .slider.green {
    background: #34c759; }
.switch input[type="checkbox"]:focus + .slider, .switch textarea[type="checkbox"].smallInput:focus + .slider, .switch textarea[type="checkbox"].mediumInput:focus + .slider, .switch textarea[type="checkbox"].largeInput:focus + .slider {
  box-shadow: 0 0 1px #2196f3; }
.switch input[type="checkbox"]:checked + .slider:before, .switch textarea[type="checkbox"].smallInput:checked + .slider:before, .switch textarea[type="checkbox"].mediumInput:checked + .slider:before, .switch textarea[type="checkbox"].largeInput:checked + .slider:before {
  transform: translateX(27px); }

.slider {
  background: #3a3a3c;
  background-blend-mode: overlay, luminosity;
  transition: 0.4s; }
  .slider:before {
    background: #fff;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 3px 1px 0px rgba(0, 0, 0, 0.06);
    transition: 0.4s; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
h1, h2, h3, h4 {
  color: white !important; }

p {
  color: #e1e1e6 !important; }

a {
  color: #4bbaff !important; }
  a:hover {
    color: rgba(255, 255, 255, 0.87) !important; }

li, ul, ol {
  color: #e1e1e6 !important; }

body {
  font-family: Verdana, sans-serif !important; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.backend-status {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); }
  @media (max-width: 480px) {
    .backend-status {
      flex-direction: column;
      gap: calc(15px * 0.5); } }
  @media (max-width: 768px) {
    .backend-status {
      padding: calc(15px * 0.75); } }

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  flex: 1;
  justify-content: center; }
  @media (max-width: 768px) {
    .status-item {
      padding: 6px 10px;
      gap: 6px; } }
  @media (max-width: 480px) {
    .status-item {
      justify-content: flex-start;
      min-height: 44px; } }

.status-icon {
  font-size: 16px;
  min-width: 16px;
  text-align: center; }

.status-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  @media (max-width: 480px) {
    .status-text {
      white-space: normal;
      word-break: break-word; } }

.overall-status {
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease; }
  .overall-status.hidden {
    display: none; }

@keyframes statusIndicatorSuccessPulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }
@keyframes statusIndicatorErrorShake {
  0%, 100% {
    transform: translateX(0); }
  25% {
    transform: translateX(-5px); }
  75% {
    transform: translateX(5px); } }
@keyframes statusIndicatorPendingPulse {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0.6; } }
@keyframes statusIndicatorSpin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.backend-status {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); }
  @media (max-width: 480px) {
    .backend-status {
      flex-direction: column;
      gap: calc(15px * 0.5); } }
  @media (max-width: 768px) {
    .backend-status {
      padding: calc(15px * 0.75); } }

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  flex: 1;
  justify-content: center; }
  @media (max-width: 768px) {
    .status-item {
      padding: 6px 10px;
      gap: 6px; } }
  @media (max-width: 480px) {
    .status-item {
      justify-content: flex-start;
      min-height: 44px; } }

.status-icon {
  font-size: 16px;
  min-width: 16px;
  text-align: center; }

.status-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  @media (max-width: 480px) {
    .status-text {
      white-space: normal;
      word-break: break-word; } }

.overall-status {
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease; }
  .overall-status.hidden {
    display: none; }

.status-item.pending {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.3);
  animation: statusIndicatorPendingPulse 2s ease-in-out infinite; }
.status-item.success {
  background: rgba(40, 167, 69, 0.2);
  border: 1px solid rgba(40, 167, 69, 0.3);
  animation: statusIndicatorSuccessPulse 0.5s ease-in-out; }
.status-item.error {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.3);
  animation: statusIndicatorErrorShake 0.5s ease-in-out; }
.status-item.loading {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.3); }
  .status-item.loading .status-icon {
    animation: statusIndicatorSpin 1s linear infinite; }
.status-item.disabled {
  opacity: 0.5; }
  .status-item.disabled .status-icon {
    opacity: 0.5; }
  .status-item.disabled .status-text {
    color: #888;
    font-style: italic; }

.overall-status.success {
  background: rgba(40, 167, 69, 0.2);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: #28a745; }
.overall-status.partial {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #ffc107; }
.overall-status.error {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #dc3545; }

.small, .danger-button.small, .ui-runner-container .small.stopBtn, .game-runner-container .small.stopBtn,
.warning-button.small,
.game-runner-container .small.pauseBtn,
.success-button.small,
.info-button.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .danger-button, .ui-runner-container .stopBtn, .game-runner-container .stopBtn, .warning-button, .game-runner-container .pauseBtn, .success-button, .info-button, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large, .danger-button.large, .ui-runner-container .large.stopBtn, .game-runner-container .large.stopBtn,
.warning-button.large,
.game-runner-container .large.pauseBtn,
.success-button.large,
.info-button.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

@media (max-width: 768px) {
  .submit-button {
    width: 100%;
    margin-bottom: 10px;
    min-height: 44px; } }

.loading {
  color: transparent;
  position: relative; }
  .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: statusIndicatorSpin 1s linear infinite; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.login-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap; }
  @media (max-width: 768px) {
    .login-container {
      flex-direction: column;
      gap: calc(20px * 0.75); } }

.login-card,
.signup-card {
  background-color: var(--bg-1);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  color: white;
  overflow: hidden;
  flex: 1 1 calc(50% - 20px);
  max-width: 45%;
  box-sizing: border-box; }
  @media (max-width: 768px) {
    .login-card,
    .signup-card {
      flex: 1 1 100%;
      max-width: 100%; } }
  .login-card h1,
  .signup-card h1 {
    margin-bottom: 20px;
    color: inherit; }
  .login-card hr,
  .signup-card hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 20px 0; }

.form-group {
  position: relative;
  margin-bottom: 1.5rem; }
  .form-group input, .form-group textarea.smallInput, .form-group textarea.mediumInput, .form-group textarea.largeInput, .form-group textarea, .form-group select {
    width: 100%;
    box-sizing: border-box; }
  @media (max-width: 480px) {
    .form-group {
      margin-bottom: calc(1.5rem * 0.75); } }

.form-group select {
  color: white;
  border-radius: 12px;
  border: 1px solid rgba(72, 72, 81, 0.63);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
  padding: 15px;
  transition: all 0.3s ease;
  background-color: #121212; }
  .form-group select option[disabled], .form-group select:invalid {
    color: #757575; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.oauth-error {
  background-color: #dc2626;
  color: white;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin: 1rem 0; }

.oauth-success {
  background-color: #16a34a;
  color: white;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin: 1rem 0; }

.secondary {
  background-color: #6b7280 !important;
  color: white; }
  .secondary:hover {
    background-color: #5a6272 !important; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: rgba(50, 50, 50, 0.5); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    animation: glowing 20s linear infinite; }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: #1e1e1e; }

.glowOnHover, .hallpass-buttons button {
  border: none;
  outline: none;
  color: #fff;
  background: #1e1e1e;
  border-radius: 12px; }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.password-match {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important; }

.password-mismatch {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important; }

.validation-message {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  min-height: 1.2rem;
  transition: all 0.3s ease; }
  .validation-message.success {
    color: #10b981; }
  .validation-message.error {
    color: #ef4444; }

.form-group input:focus, .form-group textarea.smallInput:focus, .form-group textarea.mediumInput:focus, .form-group textarea.largeInput:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1; }

.museum-container {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  min-height: 100vh;
  padding: 2rem 0; }

.museum-title {
  text-align: center;
  color: #f4f4f4;
  font-size: 3rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 1rem; }

.museum-subtitle {
  text-align: center;
  color: #b8860b;
  font-style: italic;
  margin-bottom: 3rem; }

.exhibit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem; }

.exhibit-card {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #b8860b;
  border-radius: 15px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }

.course-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 10; }

.course-badge.csa {
  background: linear-gradient(45deg, #ff6b6b, #ee5a52);
  border: 2px solid #ff8a80; }

.course-badge.csp {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  border: 2px solid #80cbc4; }

.course-badge.csse {
  background: linear-gradient(45deg, #a8e6cf, #88d8a3);
  border: 2px solid #c8e6c9; }

.exhibit-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(184, 134, 11, 0.3);
  border-color: #ffd700; }

.exhibit-icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1rem; }

.exhibit-title {
  color: #ffd700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center; }

.exhibit-description {
  color: #f0f0f0;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 1.5rem; }

.exhibit-link {
  display: block;
  background: linear-gradient(45deg, #b8860b, #ffd700);
  color: #1a1a2e;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-align: center;
  font-weight: bold;
  transition: all 0.3s ease; }

.exhibit-link:hover {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  transform: scale(1.05);
  color: #1a1a2e;
  text-decoration: none; }

.closing-message {
  text-align: center;
  color: #b8860b;
  font-style: italic;
  margin-top: 3rem;
  font-size: 1.1rem; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/* ============================= */
/*       VIDEO DEMO MODAL        */
/* ============================= */
#video-demo {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem; }
  @media (max-width: 768px) {
    #video-demo {
      padding: 60px 0 0 0; } }

#video-demo > div {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #1F2020;
  border: 1px solid #2A2D2D;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  top: 60px; }
  @media (max-width: 768px) {
    #video-demo > div {
      padding: 20px 0;
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      min-height: calc(100vh - 60px); } }

#video-demo .close-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  position: absolute;
  z-index: 10;
  line-height: 1;
  font-size: 28px;
  top: 28px;
  right: 28px; }
  #video-demo .close-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  #video-demo .close-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  #video-demo .close-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    #video-demo .close-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    #video-demo .close-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  @media (max-width: 768px) {
    #video-demo .close-btn {
      font-size: 20px;
      top: 12px;
      right: 12px; } }

#video-demo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }

@media (max-width: 768px) {
  #video-demo .desktop-only {
    display: none; } }

.clickable-video {
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s; }

.clickable-video:hover {
  transform: scale(1.05); }

.timeline-page {
  /* Certificate System Styles */
  /* ============================= */
  /*     PROGRESSION MODAL         */
  /* ============================= */
  /* ============================= */
  /*      CERTIFICATE MODAL        */
  /* ============================= */
  /* Certificate List Modal */
  /* ============================= */
  /*         HELP MODAL            */
  /* ============================= */
  /* ============================= */
  /*     SPRINT CALENDAR SYNC      */
  /* ============================= */
  /* ============================= */
  /*     PRIORITY SELECTOR         */
  /* ============================= */
  /* ============================= */
  /*  SELECTIVE SYNC/REMOVE MODAL  */
  /* ============================= */ }
  .timeline-page .timeline-header {
    margin-bottom: 32px; }
  .timeline-page .timeline-header h1 {
    color: #F0F0F0;
    font-size: 2.5rem;
    margin-bottom: 8px; }
  .timeline-page .timeline-header-description {
    color: #aaa;
    margin-bottom: 24px; }
  .timeline-page .timeline-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap; }
  .timeline-page .filter-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: #F0F0F0;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px; }
  .timeline-page .filter-btn:hover {
    background: #1F1F1F; }
  .timeline-page .filter-btn.active {
    background: #1F1F1F;
    border-color: #4CAFEF;
    color: #4CAFEF; }
  .timeline-page .sprint-filters {
    display: flex;
    gap: 6px;
    align-items: center; }
  .timeline-page .sprint-filter-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #2A2D2D;
    border-radius: 4px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    white-space: nowrap;
    line-height: 1; }
  .timeline-page .sprint-filter-btn:hover {
    background: #1F1F1F; }
  .timeline-page .sprint-filter-btn.active {
    background: #1F1F1F;
    border-color: #4CAFEF;
    color: #4CAFEF; }
  .timeline-page .sprint-filter-btn i {
    font-size: 10px;
    margin-right: 4px; }
  .timeline-page .timeline-container {
    margin-top: 32px; }
  .timeline-page .sprint-card {
    border: 1px solid var(--accent);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
  .timeline-page .sprint-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid #1f2338;
    padding-bottom: 20px;
    margin-bottom: 24px; }
  .timeline-page .sprint-title {
    margin: 0;
    font-size: 1.75rem;
    color: var(--pref-accent-color) !important; }
  .timeline-page .sprint-meta {
    color: #aaa;
    font-size: 0.95rem; }
  .timeline-page .sprint-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center; }
  .timeline-page .sprint-toggle-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center; }
    .timeline-page .sprint-toggle-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-toggle-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
  .timeline-page .sprint-card.collapsed .sprint-toggle-icon {
    transform: rotate(0deg); }
  .timeline-page .sprint-toggle-icon {
    transition: transform 0.3s;
    display: inline-flex;
    color: var(--pref-accent-color);
    font-size: 2em;
    font-weight: bold;
    margin-right: 4px; }
  .timeline-page .sprint-weeks {
    display: flex;
    flex-direction: column;
    gap: 16px; }
  .timeline-page .sprint-card.collapsed .sprint-weeks {
    display: none; }
  .timeline-page .week-card {
    border-radius: 12px;
    margin-bottom: 16px;
    transition: all 0.2s;
    overflow: hidden; }
  .timeline-page .week-card:hover {
    border-color: var(--border-hover-color, #2A2D2D); }
  .timeline-page .week-content-wrapper {
    display: flex;
    gap: 24px; }
  .timeline-page .week-main-content {
    flex: 1; }
  .timeline-page .week-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px; }
  .timeline-page .week-indicator {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .timeline-page .week-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #2A2D2D;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4CAFEF;
    font-weight: 600;
    font-size: 14px; }
  .timeline-page .week-connector {
    width: 1px;
    height: 32px;
    background: #2A2D2D;
    margin-top: 8px; }
  .timeline-page .week-card:last-child .week-connector {
    display: none; }
  .timeline-page .week-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end; }
  .timeline-page .week-title-group h3 {
    color: var(--pref-accent-color) !important;
    font-size: 1.25rem;
    margin: 0 0 4px 0; }
  .timeline-page .completion-badge {
    background: transparent;
    border: 1px solid #2A2D2D;
    color: #aaa;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px; }
  .timeline-page .sprint-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--pref-accent-color);
    color: var(--pref-accent-color);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: var(--pref-font-size);
    font-family: var(--pref-font-family);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center; }
  .timeline-page .sprint-btn:hover,
  .timeline-page .sprint-btn:focus-visible {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center; }
    .timeline-page .sprint-btn:hover:hover,
    .timeline-page .sprint-btn:focus-visible:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn:hover:focus,
    .timeline-page .sprint-btn:focus-visible:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn:hover:hover,
    .timeline-page .sprint-btn:focus-visible:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .timeline-page .sprint-btn:hover,
      .timeline-page .sprint-btn:focus-visible {
        height: 44px; } }
  .timeline-page .sprint-btn.certificate,
  .timeline-page .sprint-btn.help {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px; }
    .timeline-page .sprint-btn.certificate:hover,
    .timeline-page .sprint-btn.help:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.certificate:focus,
    .timeline-page .sprint-btn.help:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.certificate:hover,
    .timeline-page .sprint-btn.help:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .timeline-page .sprint-btn.certificate,
      .timeline-page .sprint-btn.help {
        height: 44px; } }
    @media (max-width: 768px) {
      .timeline-page .sprint-btn.certificate,
      .timeline-page .sprint-btn.help {
        margin-left: 0.25rem;
        width: 44px; } }
  .timeline-page .items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 16px; }
  .timeline-page .item-card {
    padding: 12px;
    border: 1px solid #2A2D2D;
    border-radius: 8px;
    transition: background 0.2s; }
  .timeline-page .item-card:hover {
    background: rgba(240, 240, 240, 0.05); }
  .timeline-page .item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%; }
  .timeline-page .completion-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px; }
  .timeline-page .item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 1;
    min-width: 0; }
  .timeline-page .status-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 16px; }
  .timeline-page .status-icon.completed {
    color: #4CAFEF; }
  .timeline-page .status-icon.incomplete {
    color: #2A2D2D; }
  .timeline-page .type-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px; }
  .timeline-page .type-icon.lesson {
    color: #4CAFEF; }
  .timeline-page .type-icon.assignment {
    color: #f59e0b; }
  .timeline-page .item-title {
    color: #F0F0F0;
    flex: 1;
    font-size: 14px; }
  .timeline-page .item-card.completed .item-title {
    color: #aaa; }
  .timeline-page .item-priority-selector {
    flex-shrink: 0;
    margin-left: auto; }
  .timeline-page .item-priority-dropdown {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #2A2D2D;
    background: #1F1F1F;
    color: #F0F0F0;
    cursor: pointer;
    min-width: 42px;
    text-align: center;
    transition: all 0.2s ease; }
    .timeline-page .item-priority-dropdown:hover {
      border-color: #4CAFEF; }
    .timeline-page .item-priority-dropdown:focus {
      outline: none;
      border-color: #4CAFEF;
      box-shadow: 0 0 0 2px rgba(76, 175, 239, 0.2); }
    .timeline-page .item-priority-dropdown.priority-p0 {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.4);
      color: #ef4444; }
    .timeline-page .item-priority-dropdown.priority-p1 {
      background: rgba(249, 115, 22, 0.15);
      border-color: rgba(249, 115, 22, 0.4);
      color: #f97316; }
    .timeline-page .item-priority-dropdown.priority-p2 {
      background: rgba(234, 179, 8, 0.15);
      border-color: rgba(234, 179, 8, 0.4);
      color: #eab308; }
    .timeline-page .item-priority-dropdown.priority-p3 {
      background: rgba(156, 163, 175, 0.15);
      border-color: rgba(156, 163, 175, 0.4);
      color: #9ca3af; }
  .timeline-page .week-goals-container {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2A2D2D; }
  .timeline-page .goals-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block; }
  .timeline-page .goals-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start; }
  .timeline-page .goal-item {
    position: relative;
    padding-left: 16px;
    font-size: 0.85rem;
    color: #F0F0F0;
    line-height: 1.4; }
  .timeline-page .goal-item::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #4CAFEF;
    font-weight: bold;
    opacity: 0.7; }
  .timeline-page .goal-item:hover {
    color: #F0F0F0; }
  .timeline-page .goal-item:hover::before {
    opacity: 1; }
  .timeline-page .assignment-due {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f59e0b;
    font-size: 14px;
    margin-top: 8px; }
  .timeline-page .load-more {
    text-align: center;
    margin-top: 24px; }
  .timeline-page .load-more-btn {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid #2A2D2D;
    color: #4CAFEF;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s; }
  .timeline-page .load-more-btn:hover {
    background: #1F1F1F;
    color: #007ACC; }
  @media (max-width: 768px) {
    .timeline-page {
      /* Modal responsiveness */ }
      .timeline-page .timeline-header h1 {
        font-size: 2rem; }
      .timeline-page .timeline-filters {
        flex-direction: column;
        gap: 8px; }
      .timeline-page .filter-btn {
        width: 100%;
        text-align: center; }
      .timeline-page .sprint-card {
        padding: 16px; }
      .timeline-page .sprint-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px; }
      .timeline-page .sprint-title {
        font-size: 1.5rem; }
      .timeline-page .sprint-controls {
        justify-content: space-between;
        width: 100%; }
      .timeline-page .week-content-wrapper {
        flex-direction: column;
        gap: 12px; }
      .timeline-page .week-indicator {
        flex-direction: row;
        align-items: center;
        gap: 12px; }
      .timeline-page .week-circle {
        width: 40px;
        height: 40px;
        font-size: 12px; }
      .timeline-page .week-connector {
        display: none; }
      .timeline-page .week-main-content {
        width: 100%; }
      .timeline-page .week-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px; }
      .timeline-page .week-title-group h3 {
        font-size: 1.1rem; }
      .timeline-page .week-actions {
        justify-content: space-between;
        flex-wrap: wrap; }
      .timeline-page .items-grid {
        grid-template-columns: 1fr;
        gap: 8px; }
      .timeline-page .item-card {
        padding: 10px; }
      .timeline-page .item-content {
        gap: 8px; }
      .timeline-page .item-title {
        font-size: 13px; }
      .timeline-page .progression-btn {
        padding: 8px 12px;
        font-size: 12px; }
      .timeline-page .completion-badge {
        font-size: 12px;
        padding: 3px 8px; }
      .timeline-page #progression-modal > div,
      .timeline-page #certificate-list-modal > div {
        margin: 20px auto;
        padding: 20px; }
      .timeline-page #certificate-content {
        padding: 40px 20px; }
      .timeline-page #certificate-student-name {
        font-size: 36px; }
      .timeline-page #certificate-content .achievement-text {
        font-size: 18px; }
      .timeline-page .certificate-modal .action-bar {
        padding: 12px; }
      .timeline-page .action-btn {
        padding: 8px 12px;
        font-size: 12px;
        margin: 0 4px; }
      .timeline-page .progression-task {
        padding: 10px;
        gap: 10px; } }
  .timeline-page .certificate-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4CAFEF 0%, #007ACC 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(76, 175, 239, 0.3);
    z-index: 1; }
  .timeline-page .week-card.clickable {
    cursor: pointer; }
  .timeline-page .week-card.clickable:hover {
    border-color: #4CAFEF;
    box-shadow: 0 0 12px rgba(76, 175, 239, 0.2); }
  .timeline-page #progression-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    overflow-y: auto;
    padding: 1rem; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal {
        padding: 60px 0 0 0; } }
  .timeline-page #progression-modal > div {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    top: 60px; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal > div {
        padding: 20px 0;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        min-height: calc(100vh - 60px); } }
  .timeline-page #progression-modal .close-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    position: absolute;
    z-index: 10;
    line-height: 1;
    font-size: 28px;
    top: 28px;
    right: 28px; }
    .timeline-page #progression-modal .close-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page #progression-modal .close-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page #progression-modal .close-btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .close-btn {
        height: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .close-btn {
        margin-left: 0.25rem;
        width: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .close-btn {
        font-size: 20px;
        top: 12px;
        right: 12px; } }
  .timeline-page #progression-modal h2 {
    color: #F0F0F0;
    margin-bottom: 8px;
    padding-right: 50px; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal h2 {
        font-size: 1.5rem; } }
  .timeline-page #progression-modal .week-theme {
    color: #4CAFEF;
    margin-bottom: 24px;
    padding-right: 50px; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .week-theme {
        font-size: 0.9rem;
        margin-bottom: 16px; } }
  .timeline-page #task-list {
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 16px; }
    @media (max-width: 768px) {
      .timeline-page #task-list {
        max-height: 50vh; } }
  .timeline-page #modal-progress-fill {
    height: 100%;
    background: #4CAFEF;
    width: 0%;
    transition: width 0.3s; }
  .timeline-page .progression-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #1F1F1F;
    border: 1px solid #2A2D2D;
    border-radius: 8px;
    margin-bottom: 8px; }
    @media (max-width: 768px) {
      .timeline-page .progression-task {
        padding: 10px;
        gap: 10px; } }
  .timeline-page .progression-week-header {
    color: #F0F0F0;
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2A2D2D; }
    .timeline-page .progression-week-header:first-child {
      margin-top: 0; }
    @media (max-width: 768px) {
      .timeline-page .progression-week-header {
        font-size: 14px;
        margin-top: 16px;
        margin-bottom: 10px; } }
  .timeline-page .progression-task input[type="checkbox"], .timeline-page .progression-task textarea[type="checkbox"].smallInput, .timeline-page .progression-task textarea[type="checkbox"].mediumInput, .timeline-page .progression-task textarea[type="checkbox"].largeInput {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #4CAFEF;
    flex-shrink: 0; }
    @media (max-width: 768px) {
      .timeline-page .progression-task input[type="checkbox"], .timeline-page .progression-task textarea[type="checkbox"].smallInput, .timeline-page .progression-task textarea[type="checkbox"].mediumInput, .timeline-page .progression-task textarea[type="checkbox"].largeInput {
        width: 22px;
        height: 22px; } }
  .timeline-page .progression-task label {
    color: #F0F0F0;
    flex: 1;
    cursor: pointer; }
    @media (max-width: 768px) {
      .timeline-page .progression-task label {
        font-size: 14px; } }
  .timeline-page .task-number {
    color: #aaa;
    font-size: 14px;
    flex-shrink: 0; }
    @media (max-width: 768px) {
      .timeline-page .task-number {
        font-size: 12px; } }
  .timeline-page #view-certificate-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4CAFEF 0%, #007ACC 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: 24px; }
  .timeline-page #view-certificate-btn:hover {
    transform: scale(1.02); }
  .timeline-page #certificate-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000; }
    @media (max-width: 768px) {
      .timeline-page #certificate-modal {
        padding: 60px 0 0 0; } }
  .timeline-page #certificate-modal .action-bar {
    position: sticky;
    top: 60px;
    background: var(--panel);
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--ui-border);
    z-index: 10; }
  .timeline-page #certificate-modal .action-btn {
    padding: 10px 20px;
    background: var(--pref-accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    margin: 0 8px;
    cursor: pointer; }
  .timeline-page #certificate-modal .secondary-btn {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--ui-border); }
  .timeline-page #certificate-content {
    max-width: 1000px;
    margin: 40px auto;
    background: var(--bg-1);
    padding: 90px 80px;
    border: 3px solid var(--pref-accent-color);
    position: relative;
    font-family: 'Crimson Text', serif;
    color: var(--text);
    transition: all 0.3s ease; }
    .timeline-page #certificate-content.excellence-theme {
      border-color: #ffd700;
      box-shadow: 0 0 50px rgba(255, 215, 0, 0.2);
      background: linear-gradient(135deg, var(--bg-1) 0%, #fffdf0 100%); }
      .timeline-page #certificate-content.excellence-theme::before {
        border-color: #ffd700; }
      .timeline-page #certificate-content.excellence-theme .certificate-emblem {
        border-color: #ffd700;
        background: #fffdf0; }
      .timeline-page #certificate-content.excellence-theme .certify-text {
        color: #b8860b; }
  .timeline-page .cert-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    z-index: 10001;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px); }
    .timeline-page .cert-notification.cert-notification-visible {
      transform: translateX(0); }
    .timeline-page .cert-notification.cert-notification-success {
      background: linear-gradient(135deg, #065f46 0%, #047857 100%);
      border: 1px solid #10b981; }
    .timeline-page .cert-notification.cert-notification-warning {
      background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
      border: 1px solid #f59e0b; }
    .timeline-page .cert-notification.cert-notification-error {
      background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
      border: 1px solid #ef4444; }
    .timeline-page .cert-notification.cert-notification-info {
      background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
      border: 1px solid #3b82f6; }
  .timeline-page .cert-notification-icon {
    font-size: 24px;
    line-height: 1; }
  .timeline-page .cert-notification-content {
    flex: 1; }
  .timeline-page .cert-notification-title {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    margin-bottom: 4px; }
  .timeline-page .cert-notification-message {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4; }
  .timeline-page .cert-notification-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s; }
    .timeline-page .cert-notification-close:hover {
      color: #fff; }
  .timeline-page .cert-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cert-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px; }
@keyframes cert-spin {
  to {
    transform: rotate(360deg); } }
  .timeline-page .cert-btn-loading {
    opacity: 0.8;
    cursor: wait; }
  .timeline-page #certificate-content::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    bottom: 18px;
    border: 1px solid var(--ui-border);
    pointer-events: none; }
  .timeline-page #certificate-content > div {
    position: relative;
    z-index: 1; }
  .timeline-page .certificate-heading {
    text-align: center;
    margin-bottom: 40px; }
  .timeline-page .certificate-emblem {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border: 3px solid var(--pref-accent-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
  .timeline-page #certificate-logo {
    width: 80px;
    height: 80px;
    object-fit: contain; }
  .timeline-page #certificate-content .header-text {
    font-size: 14px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 12px; }
  .timeline-page #certificate-content .certify-text {
    font-size: 30px;
    color: var(--text);
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 8px; }
  .timeline-page .certificate-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 13px;
    color: var(--text-muted); }
  .timeline-page #certificate-student-name {
    font-size: 62px;
    color: var(--text-strong);
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    border: none;
    outline: none;
    display: block;
    cursor: text;
    text-align: center;
    margin: 32px auto 40px;
    width: 100%; }
  .timeline-page #certificate-student-name:empty::before {
    content: 'Your Name';
    color: var(--text-muted); }
  .timeline-page #certificate-content .achievement-text {
    text-align: center;
    font-size: 22px;
    color: var(--text);
    max-width: 720px;
    margin: 0 auto 48px;
    line-height: 1.7; }
  .timeline-page .skill-focus-pill {
    text-align: center;
    margin-bottom: 32px; }
  .timeline-page .skill-focus-pill span {
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid var(--pref-accent-color);
    border-radius: 999px;
    font-size: 16px;
    color: var(--pref-accent-color);
    background: var(--bg-2);
    text-transform: uppercase;
    letter-spacing: 0.1em; }
  .timeline-page #certificate-date {
    text-align: center;
    font-size: 18px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 40px; }
  .timeline-page .certificate-divider {
    width: 60%;
    height: 1px;
    background: transparent;
    margin: 0 auto 48px; }
  .timeline-page #certificate-content .signature-section {
    display: flex;
    justify-content: center;
    margin-top: 32px; }
  .timeline-page #certificate-content .signature {
    text-align: center;
    max-width: 320px; }
  .timeline-page #certificate-content .signature-name {
    font-size: 30px;
    font-style: italic;
    color: var(--text);
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 8px; }
  .timeline-page #certificate-content .signature-line {
    border-top: 2px solid var(--ui-border);
    padding-top: 8px;
    margin-bottom: 12px; }
  .timeline-page #certificate-content .signature-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 600;
    color: var(--text);
    margin: 0; }
  .timeline-page #certificate-content .signature-subtitle {
    color: var(--text-muted);
    margin: 2px 0 0 0; }
  .timeline-page #certificate-list-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1500;
    padding: 20px;
    overflow-y: auto; }
  .timeline-page #certificate-list-modal > div {
    max-width: 600px;
    margin: 40px auto;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 32px; }
  .timeline-page #certificate-list-modal .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer; }
  .timeline-page #certificate-list-modal h2 {
    color: #F0F0F0;
    margin-bottom: 24px; }
  .timeline-page #certificate-list button {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4CAFEF 0%, #007ACC 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    margin-bottom: 12px; }
  .timeline-page #certificate-list button:hover {
    transform: scale(1.02); }
  .timeline-page #certificate-skills {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ui-border); }
  .timeline-page .skills-heading {
    text-align: center;
    color: var(--text-strong) !important;
    font-family: 'Libre Baskerville', serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 16px; }
  .timeline-page #skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; }
  .timeline-page .skill-tag {
    padding: 6px 16px;
    border: 1px solid var(--pref-accent-color);
    border-radius: 20px;
    color: var(--text);
    font-family: 'Crimson Text', serif;
    font-size: 14px;
    margin: 4px;
    background: var(--bg-2); }
  @media (max-width: 768px) {
    .timeline-page #certificate-content {
      margin: 0;
      padding: 40px 20px;
      border-radius: 0;
      border-left: none;
      border-right: none; }
    .timeline-page #certificate-student-name {
      font-size: 36px; }
    .timeline-page #certificate-content .signature-section {
      flex-direction: column;
      gap: 16px; } }
  .timeline-page #help-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    overflow-y: auto;
    padding: 1rem; }
    @media (max-width: 768px) {
      .timeline-page #help-modal {
        padding: 60px 0 0 0; } }
  .timeline-page #help-modal > div {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    top: 60px; }
    @media (max-width: 768px) {
      .timeline-page #help-modal > div {
        padding: 20px 0;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        min-height: calc(100vh - 60px); } }
  .timeline-page #help-modal .close-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    position: absolute;
    z-index: 10;
    line-height: 1;
    font-size: 28px;
    top: 28px;
    right: 28px; }
    .timeline-page #help-modal .close-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page #help-modal .close-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page #help-modal .close-btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .timeline-page #help-modal .close-btn {
        height: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #help-modal .close-btn {
        margin-left: 0.25rem;
        width: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #help-modal .close-btn {
        font-size: 20px;
        top: 12px;
        right: 12px; } }
  .timeline-page .sprint-date-control {
    position: relative;
    display: inline-block; }
  .timeline-page .sprint-btn.date-toggle {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px; }
    .timeline-page .sprint-btn.date-toggle:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.date-toggle:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.date-toggle:hover {
      background: #1F1F1F; }
    .timeline-page .sprint-btn.date-toggle i {
      color: var(--pref-accent-color); }
  .timeline-page .sprint-date-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 320px;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 8px; }
    .timeline-page .sprint-date-dropdown.hidden {
      display: none; }
  .timeline-page .date-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2A2D2D; }
    .timeline-page .date-dropdown-header span {
      font-weight: 600;
      color: #F0F0F0;
      font-size: 14px; }
  .timeline-page .date-dropdown-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1; }
    .timeline-page .date-dropdown-close:hover {
      color: #F0F0F0; }
  .timeline-page .calendar-sync-info {
    margin-bottom: 16px; }
  .timeline-page .sprint-week-range {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #1F1F1F;
    border-radius: 8px;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 12px; }
    .timeline-page .sprint-week-range i {
      color: var(--pref-accent-color); }
    .timeline-page .sprint-week-range strong {
      color: #F0F0F0; }
  .timeline-page .sprint-date-preview {
    padding: 12px;
    background: rgba(var(--pref-accent-rgb), 0.1);
    border: 1px solid rgba(var(--pref-accent-rgb), 0.2);
    border-radius: 8px; }
    .timeline-page .sprint-date-preview .date-preview-loading {
      color: #aaa;
      font-size: 12px;
      text-align: center; }
    .timeline-page .sprint-date-preview .date-range-display {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      font-size: 13px; }
      .timeline-page .sprint-date-preview .date-range-display .date-label {
        color: #aaa;
        font-weight: 500; }
      .timeline-page .sprint-date-preview .date-range-display .date-value {
        color: #F0F0F0;
        font-weight: 600; }
    .timeline-page .sprint-date-preview .date-error {
      color: #ef4444;
      font-size: 12px;
      text-align: center; }
  .timeline-page .holiday-warnings {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(var(--pref-accent-rgb), 0.3); }
  .timeline-page .holiday-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
    font-size: 11px;
    color: #f59e0b;
    margin-top: 6px; }
    .timeline-page .holiday-notice i {
      flex-shrink: 0; }
    .timeline-page .holiday-notice:first-child {
      margin-top: 0; }
  .timeline-page .sync-options {
    margin-bottom: 16px;
    padding: 12px;
    background: #1F1F1F;
    border-radius: 8px; }
  .timeline-page .sync-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 13px;
    color: #F0F0F0;
    border-bottom: 1px solid #2A2D2D; }
    .timeline-page .sync-option:last-child {
      border-bottom: none;
      padding-bottom: 0; }
    .timeline-page .sync-option:first-child {
      padding-top: 0; }
    .timeline-page .sync-option input[type="checkbox"], .timeline-page .sync-option textarea[type="checkbox"].smallInput, .timeline-page .sync-option textarea[type="checkbox"].mediumInput, .timeline-page .sync-option textarea[type="checkbox"].largeInput {
      width: 16px;
      height: 16px;
      accent-color: var(--pref-accent-color);
      cursor: pointer; }
    .timeline-page .sync-option span {
      display: flex;
      align-items: center;
      gap: 8px; }
      .timeline-page .sync-option span i {
        width: 16px;
        text-align: center;
        color: var(--pref-accent-color);
        opacity: 0.8; }
  .timeline-page .date-actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .timeline-page .advanced-sync-btn {
    width: 100%;
    padding: 12px 16px;
    background: var(--pref-accent-color);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.1s; }
    .timeline-page .advanced-sync-btn:hover {
      opacity: 0.9; }
    .timeline-page .advanced-sync-btn:active {
      transform: scale(0.98); }
    .timeline-page .advanced-sync-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
    .timeline-page .advanced-sync-btn i {
      font-size: 12px; }
  .timeline-page .advanced-remove-btn {
    width: 100%;
    padding: 10px 16px;
    background: #dc2626;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.1s; }
    .timeline-page .advanced-remove-btn:hover {
      opacity: 0.9;
      background: #b91c1c; }
    .timeline-page .advanced-remove-btn:active {
      transform: scale(0.98); }
    .timeline-page .advanced-remove-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
    .timeline-page .advanced-remove-btn i {
      font-size: 12px; }
  .timeline-page .sprint-date-status {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    min-height: 18px;
    padding: 6px;
    border-radius: 6px; }
    .timeline-page .sprint-date-status.success {
      color: #10b981;
      background: rgba(16, 185, 129, 0.1); }
    .timeline-page .sprint-date-status.error {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1); }
    .timeline-page .sprint-date-status.warning {
      color: #f59e0b;
      background: rgba(245, 158, 11, 0.1); }
    .timeline-page .sprint-date-status.loading {
      color: #aaa;
      background: #1F1F1F; }
  .timeline-page .sprint-dates-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #aaa;
    padding: 6px 10px;
    background: #1F1F1F;
    border-radius: 6px; }
    .timeline-page .sprint-dates-display i {
      color: var(--pref-accent-color); }
    .timeline-page .sprint-dates-display .date-range {
      color: #F0F0F0; }
  .timeline-page .priority-selector {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #2A2D2D; }
  .timeline-page .priority-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #F0F0F0;
    margin-bottom: 10px; }
  .timeline-page .priority-options {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .timeline-page .priority-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #1F1F1F;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s; }
    .timeline-page .priority-option:hover {
      background: rgba(240, 240, 240, 0.05); }
    .timeline-page .priority-option input[type="radio"], .timeline-page .priority-option textarea[type="radio"].smallInput, .timeline-page .priority-option textarea[type="radio"].mediumInput, .timeline-page .priority-option textarea[type="radio"].largeInput {
      display: none; }
    .timeline-page .priority-option input[type="radio"]:checked + .priority-badge, .timeline-page .priority-option textarea[type="radio"].smallInput:checked + .priority-badge, .timeline-page .priority-option textarea[type="radio"].mediumInput:checked + .priority-badge, .timeline-page .priority-option textarea[type="radio"].largeInput:checked + .priority-badge {
      transform: scale(1.1);
      box-shadow: 0 0 8px currentColor; }
    .timeline-page .priority-option:has(input[type="radio"]:checked, textarea[type="radio"].smallInput:checked, textarea[type="radio"].mediumInput:checked, textarea[type="radio"].largeInput:checked) {
      border-color: currentColor;
      background: rgba(240, 240, 240, 0.08); }
  .timeline-page .priority-option.priority-p0 {
    color: #ef4444; }
    .timeline-page .priority-option.priority-p0:has(input:checked, textarea.smallInput:checked, textarea.mediumInput:checked, textarea.largeInput:checked) {
      border-color: #ef4444;
      background: rgba(239, 68, 68, 0.1); }
  .timeline-page .priority-option.priority-p1 {
    color: #f97316; }
    .timeline-page .priority-option.priority-p1:has(input:checked, textarea.smallInput:checked, textarea.mediumInput:checked, textarea.largeInput:checked) {
      border-color: #f97316;
      background: rgba(249, 115, 22, 0.1); }
  .timeline-page .priority-option.priority-p2 {
    color: #eab308; }
    .timeline-page .priority-option.priority-p2:has(input:checked, textarea.smallInput:checked, textarea.mediumInput:checked, textarea.largeInput:checked) {
      border-color: #eab308;
      background: rgba(234, 179, 8, 0.1); }
  .timeline-page .priority-option.priority-p3 {
    color: #22c55e; }
    .timeline-page .priority-option.priority-p3:has(input:checked, textarea.smallInput:checked, textarea.mediumInput:checked, textarea.largeInput:checked) {
      border-color: #22c55e;
      background: rgba(34, 197, 94, 0.1); }
  .timeline-page .priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s; }
    .timeline-page .priority-badge.p0 {
      background: #dc2626;
      color: white; }
    .timeline-page .priority-badge.p1 {
      background: #ea580c;
      color: white; }
    .timeline-page .priority-badge.p2 {
      background: #ca8a04;
      color: white; }
    .timeline-page .priority-badge.p3 {
      background: #16a34a;
      color: white; }
  .timeline-page .priority-desc {
    font-size: 13px;
    color: #F0F0F0;
    flex: 1; }
  @media (max-width: 768px) {
    .timeline-page .priority-options {
      gap: 6px; }
    .timeline-page .priority-option {
      padding: 8px 10px; }
    .timeline-page .priority-badge {
      width: 28px;
      height: 20px;
      font-size: 10px; }
    .timeline-page .priority-desc {
      font-size: 12px; } }
  .timeline-page .calendar-action-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px); }
  .timeline-page .calendar-action-modal-content {
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
    .timeline-page .calendar-action-modal-content.remove-modal .calendar-action-modal-header h2 {
      color: #ef4444; }
  .timeline-page .calendar-action-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #2A2D2D;
    flex-shrink: 0; }
    .timeline-page .calendar-action-modal-header h2 {
      margin: 0;
      font-size: 1.25rem;
      color: var(--pref-accent-color);
      display: flex;
      align-items: center;
      gap: 10px; }
      .timeline-page .calendar-action-modal-header h2 i {
        font-size: 1.1rem; }
    .timeline-page .calendar-action-modal-header .close-btn {
      background: none;
      border: none;
      color: #aaa;
      font-size: 24px;
      cursor: pointer;
      padding: 4px;
      line-height: 1;
      transition: color 0.2s; }
      .timeline-page .calendar-action-modal-header .close-btn:hover {
        color: #F0F0F0; }
  .timeline-page .calendar-action-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px; }
  .timeline-page .calendar-action-modal-footer {
    display: flex;
    justify-content: stretch;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #2A2D2D;
    flex-shrink: 0; }
  .timeline-page .modal-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    border: none;
    white-space: nowrap; }
    .timeline-page .modal-btn.primary, .timeline-page .modal-btn.danger-button, .timeline-page .ui-runner-container .modal-btn.stopBtn, .ui-runner-container .timeline-page .modal-btn.stopBtn, .timeline-page .game-runner-container .modal-btn.stopBtn, .game-runner-container .timeline-page .modal-btn.stopBtn, .timeline-page .modal-btn.warning-button, .timeline-page .game-runner-container .modal-btn.pauseBtn, .game-runner-container .timeline-page .modal-btn.pauseBtn, .timeline-page .modal-btn.success-button, .timeline-page .modal-btn.info-button, .timeline-page .hallpass-buttons button.modal-btn, .hallpass-buttons .timeline-page button.modal-btn {
      background: var(--pref-accent-color);
      color: white; }
      .timeline-page .modal-btn.primary:hover, .timeline-page .modal-btn.danger-button:hover, .timeline-page .ui-runner-container .modal-btn.stopBtn:hover, .ui-runner-container .timeline-page .modal-btn.stopBtn:hover, .timeline-page .game-runner-container .modal-btn.stopBtn:hover, .game-runner-container .timeline-page .modal-btn.stopBtn:hover, .timeline-page .modal-btn.warning-button:hover, .timeline-page .game-runner-container .modal-btn.pauseBtn:hover, .game-runner-container .timeline-page .modal-btn.pauseBtn:hover, .timeline-page .modal-btn.success-button:hover, .timeline-page .modal-btn.info-button:hover, .timeline-page .hallpass-buttons button.modal-btn:hover, .hallpass-buttons .timeline-page button.modal-btn:hover {
        opacity: 0.9; }
      .timeline-page .modal-btn.primary:disabled, .timeline-page .modal-btn.danger-button:disabled, .timeline-page .ui-runner-container .modal-btn.stopBtn:disabled, .ui-runner-container .timeline-page .modal-btn.stopBtn:disabled, .timeline-page .game-runner-container .modal-btn.stopBtn:disabled, .game-runner-container .timeline-page .modal-btn.stopBtn:disabled, .timeline-page .modal-btn.warning-button:disabled, .timeline-page .game-runner-container .modal-btn.pauseBtn:disabled, .game-runner-container .timeline-page .modal-btn.pauseBtn:disabled, .timeline-page .modal-btn.success-button:disabled, .timeline-page .modal-btn.info-button:disabled, .timeline-page .hallpass-buttons button.modal-btn:disabled, .hallpass-buttons .timeline-page button.modal-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed; }
    .timeline-page .modal-btn.secondary {
      background: #1F1F1F;
      color: #F0F0F0;
      border: 1px solid #2A2D2D; }
      .timeline-page .modal-btn.secondary:hover {
        background: #2A2D2D; }
    .timeline-page .modal-btn.export-blue {
      background: #3b82f6;
      color: white; }
      .timeline-page .modal-btn.export-blue:hover {
        background: #2563eb; }
    .timeline-page .modal-btn.danger {
      background: #dc2626;
      color: white; }
      .timeline-page .modal-btn.danger:hover {
        background: #b91c1c; }
      .timeline-page .modal-btn.danger:disabled {
        opacity: 0.5;
        cursor: not-allowed; }
    .timeline-page .modal-btn.info {
      background: #0ea5e9;
      color: white; }
      .timeline-page .modal-btn.info:hover {
        background: #0284c7; }
      .timeline-page .modal-btn.info:disabled {
        opacity: 0.5;
        cursor: not-allowed; }
  .timeline-page .calendar-action-modal-content.preview-modal {
    max-width: 1000px; }
    .timeline-page .calendar-action-modal-content.preview-modal .calendar-action-modal-body {
      display: flex;
      flex-direction: column;
      gap: 20px; }
  .timeline-page .preview-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; }
  .timeline-page .preview-column {
    display: flex;
    flex-direction: column;
    gap: 12px; }
    .timeline-page .preview-column h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #F0F0F0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 8px;
      border-bottom: 2px solid #2A2D2D; }
    .timeline-page .preview-column.current h3 {
      color: var(--pref-accent-color); }
    .timeline-page .preview-column.changes h3 {
      color: #10b981; }
  .timeline-page .preview-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto; }
  .timeline-page .preview-event-item {
    padding: 12px;
    background: #1F1F1F;
    border-left: 4px solid #2A2D2D;
    border-radius: 6px;
    font-size: 13px; }
    .timeline-page .preview-event-item.current {
      border-left-color: var(--pref-accent-color); }
    .timeline-page .preview-event-item.add {
      border-left-color: #10b981;
      background: rgba(16, 185, 129, 0.05); }
    .timeline-page .preview-event-item.update {
      border-left-color: #f59e0b;
      background: rgba(245, 158, 11, 0.05); }
    .timeline-page .preview-event-item .event-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 4px; }
      .timeline-page .preview-event-item .event-status.add {
        color: #10b981; }
      .timeline-page .preview-event-item .event-status.update {
        color: #f59e0b; }
    .timeline-page .preview-event-item .event-title {
      font-weight: 600;
      color: #F0F0F0;
      margin-bottom: 4px;
      line-height: 1.3; }
    .timeline-page .preview-event-item .event-date {
      color: #aaa;
      font-size: 12px;
      margin-bottom: 6px; }
    .timeline-page .preview-event-item .event-description-preview {
      color: #aaa;
      font-size: 12px;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis; }
    .timeline-page .preview-event-item .no-events {
      text-align: center;
      color: #aaa;
      padding: 20px;
      font-style: italic; }
    .timeline-page .preview-event-item .error-message {
      color: #ef4444;
      padding: 12px;
      background: rgba(239, 68, 68, 0.1);
      border-radius: 6px; }
  .timeline-page .preview-summary {
    display: flex;
    gap: 20px;
    padding: 16px;
    background: #1F1F1F;
    border-radius: 10px; }
  .timeline-page .summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600; }
    .timeline-page .summary-item i {
      font-size: 16px; }
    .timeline-page .summary-item.add {
      color: #10b981; }
    .timeline-page .summary-item.update {
      color: #f59e0b; }
  .timeline-page .sync-modal-sprint-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1F1F1F;
    border-radius: 10px;
    margin-bottom: 16px; }
  .timeline-page .sync-modal-sprint-name {
    font-weight: 600;
    color: #F0F0F0;
    font-size: 15px; }
  .timeline-page .sync-modal-date-range {
    color: #aaa;
    font-size: 13px;
    padding: 4px 10px;
    background: #2A2D2D;
    border-radius: 6px; }
  .timeline-page .sync-warnings-container {
    margin-bottom: 16px; }
    .timeline-page .sync-warnings-container.hidden {
      display: none; }
    .timeline-page .sync-warnings-container .checking-events {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: #1F1F1F;
      border-radius: 8px;
      color: #aaa;
      font-size: 13px; }
  .timeline-page .sync-warning {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 12px; }
    .timeline-page .sync-warning.duplicate {
      background: rgba(245, 158, 11, 0.1);
      border: 1px solid rgba(245, 158, 11, 0.3); }
    .timeline-page .sync-warning .warning-header {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #f59e0b;
      margin-bottom: 8px; }
      .timeline-page .sync-warning .warning-header i {
        font-size: 16px; }
      .timeline-page .sync-warning .warning-header strong {
        font-size: 14px; }
    .timeline-page .sync-warning p {
      color: #aaa;
      font-size: 13px;
      margin: 0 0 10px 0; }
    .timeline-page .sync-warning .existing-events-list {
      margin: 0 0 12px 20px;
      padding: 0;
      font-size: 12px;
      color: #aaa; }
      .timeline-page .sync-warning .existing-events-list li {
        margin-bottom: 4px; }
    .timeline-page .sync-warning .warning-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(245, 158, 11, 0.2); }
    .timeline-page .sync-warning .warning-option {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 13px;
      color: #F0F0F0; }
      .timeline-page .sync-warning .warning-option input[type="radio"], .timeline-page .sync-warning .warning-option textarea[type="radio"].smallInput, .timeline-page .sync-warning .warning-option textarea[type="radio"].mediumInput, .timeline-page .sync-warning .warning-option textarea[type="radio"].largeInput {
        accent-color: #f59e0b; }
  .timeline-page .sync-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px; }
  .timeline-page .quick-action-btn {
    padding: 6px 12px;
    background: #1F1F1F;
    border: 1px solid #2A2D2D;
    border-radius: 6px;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s; }
    .timeline-page .quick-action-btn:hover {
      background: #2A2D2D;
      color: #F0F0F0;
      border-color: var(--pref-accent-color); }
    .timeline-page .quick-action-btn i {
      font-size: 11px; }
  .timeline-page .sync-modal-priority {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #1F1F1F;
    border-radius: 10px; }
    .timeline-page .sync-modal-priority .priority-label {
      font-size: 13px;
      font-weight: 600;
      color: #F0F0F0;
      margin-bottom: 10px;
      display: block; }
  .timeline-page .priority-options-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap; }
  .timeline-page .priority-option-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #1F2020;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s; }
    .timeline-page .priority-option-inline input[type="radio"], .timeline-page .priority-option-inline textarea[type="radio"].smallInput, .timeline-page .priority-option-inline textarea[type="radio"].mediumInput, .timeline-page .priority-option-inline textarea[type="radio"].largeInput {
      display: none; }
    .timeline-page .priority-option-inline:has(input:checked, textarea.smallInput:checked, textarea.mediumInput:checked, textarea.largeInput:checked) {
      border-color: currentColor; }
    .timeline-page .priority-option-inline:has(input:checked, textarea.smallInput:checked, textarea.mediumInput:checked, textarea.largeInput:checked) .priority-badge {
      transform: scale(1.05); }
  .timeline-page .sync-week-list {
    display: flex;
    flex-direction: column;
    gap: 12px; }
  .timeline-page .sync-week-group {
    border: 1px solid #2A2D2D;
    border-radius: 10px;
    overflow: hidden; }
  .timeline-page .sync-week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #1F1F1F;
    cursor: pointer; }
    .timeline-page .sync-week-header:hover {
      background: rgba(240, 240, 240, 0.05); }
  .timeline-page .sync-week-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1; }
    .timeline-page .sync-week-checkbox input[type="checkbox"], .timeline-page .sync-week-checkbox textarea[type="checkbox"].smallInput, .timeline-page .sync-week-checkbox textarea[type="checkbox"].mediumInput, .timeline-page .sync-week-checkbox textarea[type="checkbox"].largeInput {
      width: 18px;
      height: 18px;
      accent-color: var(--pref-accent-color);
      cursor: pointer; }
    .timeline-page .sync-week-checkbox .week-label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px; }
      .timeline-page .sync-week-checkbox .week-label strong {
        color: #F0F0F0;
        font-size: 14px; }
      .timeline-page .sync-week-checkbox .week-label .week-date-range {
        font-size: 12px;
        color: #aaa;
        padding: 2px 8px;
        background: #2A2D2D;
        border-radius: 4px; }
  .timeline-page .week-expand-btn {
    background: none;
    border: none;
    color: #aaa;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s; }
    .timeline-page .week-expand-btn:hover {
      color: #F0F0F0; }
    .timeline-page .week-expand-btn i {
      transition: transform 0.2s; }
  .timeline-page .sync-item-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    margin: 0; }
    .timeline-page .sync-item-warning i {
      flex-shrink: 0; }
    .timeline-page .sync-item-warning.skip {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6; }
    .timeline-page .sync-item-warning.holiday {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b; }
    .timeline-page .sync-item-warning.past {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444; }
  .timeline-page .sync-week-items {
    padding: 12px 16px;
    background: #1F2020; }
    .timeline-page .sync-week-items.collapsed {
      display: none; }
  .timeline-page .sync-item-category {
    margin-bottom: 12px; }
    .timeline-page .sync-item-category:last-child {
      margin-bottom: 0; }
  .timeline-page .sync-category-header {
    margin-bottom: 8px; }
  .timeline-page .sync-category-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #F0F0F0; }
    .timeline-page .sync-category-checkbox input[type="checkbox"], .timeline-page .sync-category-checkbox textarea[type="checkbox"].smallInput, .timeline-page .sync-category-checkbox textarea[type="checkbox"].mediumInput, .timeline-page .sync-category-checkbox textarea[type="checkbox"].largeInput {
      width: 16px;
      height: 16px;
      accent-color: var(--pref-accent-color);
      cursor: pointer; }
    .timeline-page .sync-category-checkbox i {
      color: var(--pref-accent-color);
      width: 16px;
      text-align: center; }
  .timeline-page .sync-item-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 26px; }
  .timeline-page .sync-item-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    background: #1F1F1F;
    border-radius: 6px;
    transition: background 0.2s; }
    .timeline-page .sync-item-checkbox:hover {
      background: #2A2D2D; }
    .timeline-page .sync-item-checkbox input[type="checkbox"], .timeline-page .sync-item-checkbox textarea[type="checkbox"].smallInput, .timeline-page .sync-item-checkbox textarea[type="checkbox"].mediumInput, .timeline-page .sync-item-checkbox textarea[type="checkbox"].largeInput {
      width: 14px;
      height: 14px;
      accent-color: var(--pref-accent-color);
      cursor: pointer;
      flex-shrink: 0; }
    .timeline-page .sync-item-checkbox .item-title {
      flex: 1;
      font-size: 13px;
      color: #F0F0F0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .timeline-page .sync-item-checkbox .item-link-icon {
      color: #aaa;
      font-size: 11px;
      padding: 4px;
      transition: color 0.2s; }
      .timeline-page .sync-item-checkbox .item-link-icon:hover {
        color: var(--pref-accent-color); }
  .timeline-page .item-priority-select {
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    background: #2A2D2D;
    color: #F0F0F0; }
    .timeline-page .item-priority-select:focus {
      outline: 2px solid var(--pref-accent-color);
      outline-offset: 1px; }
    .timeline-page .item-priority-select option {
      padding: 4px 8px; }
  .timeline-page .item-date-input {
    padding: 3px 6px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid #2A2D2D;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    background: #1F1F1F;
    color: #F0F0F0;
    width: 115px; }
    .timeline-page .item-date-input:hover {
      border-color: var(--pref-accent-color); }
    .timeline-page .item-date-input:focus {
      outline: none;
      border-color: var(--pref-accent-color);
      box-shadow: 0 0 0 2px rgba(var(--pref-accent-rgb), 0.2); }
    .timeline-page .item-date-input::-webkit-calendar-picker-indicator {
      filter: invert(0.7);
      cursor: pointer; }
      .timeline-page .item-date-input::-webkit-calendar-picker-indicator:hover {
        filter: invert(0.5); }
  .timeline-page .bulk-priority-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: #1F1F1F;
    border-radius: 8px;
    margin-bottom: 16px; }
    .timeline-page .bulk-priority-section .bulk-priority-label {
      font-size: 13px;
      font-weight: 500;
      color: #aaa; }
    .timeline-page .bulk-priority-section .bulk-priority-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap; }
    .timeline-page .bulk-priority-section .set-all-priority-btn {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s; }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P0"] {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P0"]:hover {
          background: rgba(239, 68, 68, 0.3); }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P1"] {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P1"]:hover {
          background: rgba(245, 158, 11, 0.3); }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P2"] {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P2"]:hover {
          background: rgba(59, 130, 246, 0.3); }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P3"] {
        background: rgba(156, 163, 175, 0.2);
        color: #9ca3af; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P3"]:hover {
          background: rgba(156, 163, 175, 0.3); }
  .timeline-page .sync-summary {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(var(--pref-accent-rgb), 0.1);
    border: 1px solid rgba(var(--pref-accent-rgb), 0.2);
    border-radius: 8px;
    text-align: center; }
    .timeline-page .sync-summary.remove-summary {
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.2); }
  .timeline-page .sync-summary-count {
    font-size: 14px;
    font-weight: 600;
    color: #F0F0F0; }
    .timeline-page .sync-summary-count span {
      color: var(--pref-accent-color); }
  .timeline-page .remove-summary .sync-summary-count span {
    color: #ef4444; }
  .timeline-page .no-items-message {
    text-align: center;
    color: #aaa;
    padding: 40px 20px;
    font-size: 14px; }
  @media (max-width: 600px) {
    .timeline-page .calendar-action-modal {
      padding: 10px; }
    .timeline-page .calendar-action-modal-content {
      max-height: 90vh;
      border-radius: 12px; }
    .timeline-page .calendar-action-modal-header {
      padding: 16px; }
      .timeline-page .calendar-action-modal-header h2 {
        font-size: 1.1rem; }
    .timeline-page .calendar-action-modal-body {
      padding: 16px; }
    .timeline-page .calendar-action-modal-footer {
      padding: 12px 16px;
      flex-direction: column; }
      .timeline-page .calendar-action-modal-footer .modal-btn {
        width: 100%;
        justify-content: center; }
    .timeline-page .sync-quick-actions {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 4px; }
      .timeline-page .sync-quick-actions .quick-action-btn {
        white-space: nowrap;
        flex-shrink: 0; }
    .timeline-page .priority-options-inline {
      flex-wrap: nowrap;
      overflow-x: auto; }
    .timeline-page .sync-week-checkbox .week-label {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px; } }

/* ============================= */
/*    TOAST NOTIFICATIONS        */
/* ============================= */
.calendar-toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 400px; }
  .calendar-toast-notification.show {
    transform: translateY(0);
    opacity: 1; }
  .calendar-toast-notification.success {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    border: 1px solid #10b981;
    color: white; }
  .calendar-toast-notification.error {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    border: 1px solid #ef4444;
    color: white; }
  .calendar-toast-notification.warning {
    background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
    border: 1px solid #f59e0b;
    color: white; }
  .calendar-toast-notification .toast-message {
    font-size: 14px;
    font-weight: 500;
    flex: 1; }
  .calendar-toast-notification .toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s; }
    .calendar-toast-notification .toast-close:hover {
      color: white; }
  @media (max-width: 600px) {
    .calendar-toast-notification {
      bottom: 16px;
      right: 16px;
      left: 16px;
      max-width: none; } }

/* ============================= */
/*  BULK PRIORITY BUTTONS        */
/*  (Global - applies to modals) */
/* ============================= */
.sync-bulk-priority {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--panel-mid, #2a2a2a);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap; }
  .sync-bulk-priority .bulk-priority-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted, #888);
    margin-right: 4px; }

.bulk-priority-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s; }
  .bulk-priority-btn.p0, .bulk-priority-btn[data-priority="P0"] {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.3) !important; }
    .bulk-priority-btn.p0:hover, .bulk-priority-btn.p0.active, .bulk-priority-btn[data-priority="P0"]:hover, .bulk-priority-btn[data-priority="P0"].active {
      background: rgba(220, 38, 38, 0.3) !important;
      border-color: #dc2626 !important; }
  .bulk-priority-btn.p1, .bulk-priority-btn[data-priority="P1"] {
    background: rgba(234, 88, 12, 0.15) !important;
    color: #ea580c !important;
    border-color: rgba(234, 88, 12, 0.3) !important; }
    .bulk-priority-btn.p1:hover, .bulk-priority-btn.p1.active, .bulk-priority-btn[data-priority="P1"]:hover, .bulk-priority-btn[data-priority="P1"].active {
      background: rgba(234, 88, 12, 0.3) !important;
      border-color: #ea580c !important; }
  .bulk-priority-btn.p2, .bulk-priority-btn[data-priority="P2"] {
    background: rgba(202, 138, 4, 0.15) !important;
    color: #ca8a04 !important;
    border-color: rgba(202, 138, 4, 0.3) !important; }
    .bulk-priority-btn.p2:hover, .bulk-priority-btn.p2.active, .bulk-priority-btn[data-priority="P2"]:hover, .bulk-priority-btn[data-priority="P2"].active {
      background: rgba(202, 138, 4, 0.3) !important;
      border-color: #ca8a04 !important; }
  .bulk-priority-btn.p3, .bulk-priority-btn[data-priority="P3"] {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #16a34a !important;
    border-color: rgba(22, 163, 74, 0.3) !important; }
    .bulk-priority-btn.p3:hover, .bulk-priority-btn.p3.active, .bulk-priority-btn[data-priority="P3"]:hover, .bulk-priority-btn[data-priority="P3"].active {
      background: rgba(22, 163, 74, 0.3) !important;
      border-color: #16a34a !important; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .runBtn {
 *     @include emphasized-icon-button;
 *   }
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/* Apply minimal body styles when lesson player is active */
body:has(.lesson-player) {
  margin: 0;
  padding: 0; }

/* Override any parent container constraints only for lesson player */
.lesson-player .container,
.lesson-player .main-content,
.lesson-player .wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important; }

.lesson-player {
  display: flex;
  height: calc(100vh - 80px);
  width: 100vw;
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 1000; }

/* LEFT SIDEBAR */
.lesson-sidebar {
  width: 500px;
  border-right: 1px solid #2A2D2D;
  overflow-y: auto;
  flex-shrink: 0; }

.sidebar-header {
  padding: 32px 24px;
  border-bottom: 1px solid #2A2D2D; }

.sidebar-header h2 {
  color: #F0F0F0;
  font-size: 1.25rem;
  margin: 0 0 8px 0; }

.sidebar-header p {
  color: #aaa;
  margin: 0 0 16px 0;
  font-size: 14px; }

.course-progress-section {
  margin-top: 16px; }

.progress-label {
  display: flex;
  justify-content: space-between;
  color: #aaa;
  font-size: 14px;
  margin-bottom: 8px; }

.progress-bar-sidebar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  overflow: hidden; }

.progress-bar-sidebar-fill {
  height: 100%;
  background: #4CAFEF;
  transition: width 0.3s ease; }

/* Sprint Navigation */
.sprint-nav {
  padding: 24px 16px; }

.sprint-section {
  margin-bottom: 8px; }

.sprint-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left; }

.sprint-toggle:hover {
  background: rgba(76, 175, 239, 0.08); }

.sprint-chevron {
  width: 16px;
  height: 16px;
  color: #aaa;
  flex-shrink: 0; }

.sprint-info {
  flex: 1; }

.sprint-title {
  color: var(--pref-accent-color);
  font-size: 14px;
  margin-bottom: 2px; }

.sprint-weeks {
  color: #4CAFEF;
  font-size: 12px; }

.lesson-list {
  margin-left: 24px;
  margin-top: 4px; }

.lesson-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
  text-decoration: none; }

.lesson-item:hover {
  background: rgba(76, 175, 239, 0.06); }

.lesson-item.active {
  background: rgba(76, 175, 239, 0.1); }

.lesson-item.active .lesson-title {
  color: #F0F0F0; }

.lesson-status-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: all 0.2s ease; }

/* Incomplete state - completely hidden, no space */
.lesson-status-icon.incomplete {
  display: none; }

/* Completed state - visible blue checkmark */
.lesson-status-icon.completed {
  display: block;
  color: #4CAFEF; }

.lesson-title {
  color: #aaa;
  font-size: 14px;
  flex: 1; }

/* MAIN CONTENT AREA */
.lesson-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

/* Top Bar */
.topbar-lesson {
  border-bottom: 1px solid #2A2D2D;
  padding: 6px 24px; }

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 14px; }

.breadcrumbs .current {
  color: #F0F0F0; }

.topbar-progress {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  overflow: hidden; }

.topbar-progress-fill {
  height: 100%;
  background: #4CAFEF;
  width: 15%;
  transition: width 0.3s ease; }

/* Lesson Content */
.lesson-content,
.lesson-content-inner,
.lesson-header {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  margin: 0;
  text-align: left;
  padding: 6px 24px;
  box-sizing: border-box; }

.lesson-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #F0F0F0;
  font-size: 14px;
  margin-bottom: 6px; }

.lesson-body {
  color: #aaa;
  line-height: 1.7; }

.lesson-body h2 {
  color: #F0F0F0;
  font-size: 1.5rem;
  margin: 0; }

.lesson-body h3 {
  color: #F0F0F0;
  font-size: 1.25rem;
  margin: 24px 0 12px 0; }

.lesson-body h4 {
  color: #F0F0F0;
  font-size: 1.1rem;
  margin: 20px 0 10px 0; }

.lesson-body p {
  margin-bottom: 16px; }

.lesson-body ul, .lesson-body ol {
  margin-bottom: 16px;
  padding-left: 24px; }

.lesson-body li {
  margin-bottom: 8px; }

.lesson-body a {
  color: #4CAFEF;
  text-decoration: none; }

.lesson-body a:hover {
  text-decoration: underline; }

.lesson-body code {
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
  color: #F0F0F0; }

.lesson-body pre {
  border: 1px solid var(--pref-accent-color);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 16px; }

.lesson-body pre code {
  background: none;
  padding: 0; }

.lesson-body blockquote {
  border-left: 4px solid var(--pref-accent-color);
  padding-left: 16px;
  margin-left: 0;
  color: #aaa; }

.lesson-body img {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0; }

.lesson-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0; }

.lesson-body table th,
.lesson-body table td {
  border: 1px solid var(--pref-accent-color);
  padding: 8px 12px;
  text-align: left; }

.lesson-body table th,
.lesson-body table tr:nth-child(even) {
  background: var(--bg-2); }

/* Assignment Submission Widget */
.assignment-submission {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--pref-accent-color);
  border-radius: 12px; }

.assignment-submission h3 {
  color: #F0F0F0;
  font-size: 1.25rem;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px; }

.assignment-submission-icon {
  color: #4CAFEF; }

.submission-options {
  display: flex;
  gap: 12px;
  margin-bottom: 20px; }

.submission-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #2A2D2D;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s; }

.submission-tab:hover {
  background: #1F2020;
  color: #F0F0F0; }

.submission-tab.active {
  background: #4CAFEF;
  color: #000;
  border-color: #4CAFEF; }

.submission-form {
  display: none; }

.submission-form.active {
  display: block; }

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

.form-group label {
  display: block;
  color: #F0F0F0;
  font-size: 14px;
  margin-bottom: 8px; }

.form-group input[type="text"], .form-group textarea[type="text"].smallInput, .form-group textarea[type="text"].mediumInput, .form-group textarea[type="text"].largeInput,
.form-group input[type="url"],
.form-group textarea[type="url"].smallInput,
.form-group textarea[type="url"].mediumInput,
.form-group textarea[type="url"].largeInput,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #2A2D2D;
  border-radius: 6px;
  color: #F0F0F0;
  font-size: 14px;
  font-family: inherit; }

.form-group input:focus, .form-group textarea.smallInput:focus, .form-group textarea.mediumInput:focus, .form-group textarea.largeInput:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4CAFEF; }

.form-group textarea {
  min-height: 100px;
  resize: vertical; }

.file-upload-area {
  border: 2px dashed #2A2D2D;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s; }

.file-upload-area:hover {
  border-color: #4CAFEF;
  background: #1F2020; }

.file-upload-area.dragover {
  border-color: #4CAFEF;
  background: #1F2020; }

.file-upload-icon {
  font-size: 48px;
  color: #4CAFEF;
  margin-bottom: 12px; }

.file-upload-text {
  color: #aaa;
  margin-bottom: 8px; }

.file-upload-hint {
  color: #aaa;
  font-size: 12px; }

.file-list {
  margin-top: 16px; }

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #1F2020;
  border-radius: 6px;
  margin-bottom: 8px; }

.file-info {
  display: flex;
  align-items: center;
  gap: 12px; }

.file-name {
  color: #F0F0F0;
  font-size: 14px; }

.file-size {
  color: #aaa;
  font-size: 12px; }

.remove-file {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s; }

.remove-file:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ff6b6b; }

.submit-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color);
  font-size: 14px; }
  .submit-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .submit-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .submit-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .submit-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .submit-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .submit-btn:hover {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    opacity: 0.85;
    transform: scale(1.05); }

.submit-btn:disabled {
  background: #2A2D2D;
  color: #aaa;
  cursor: not-allowed; }

.submission-status {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  display: none; }

.submission-status.success {
  display: block;
  background: rgba(76, 175, 239, 0.1);
  border: 1px solid #4CAFEF;
  color: #4CAFEF; }

.submission-status.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  color: #ef4444; }

/* Bottom Navigation */
.lesson-bottom {
  border-top: 1px solid var(--pref-accent-color);
  padding: 12px 64px; }

.lesson-bottom-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.bottom-actions {
  display: flex;
  gap: 12px; }

/* Floating Menu Button (Mobile) */
.floating-menu-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 8px;
  margin-left: 0;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: var(--pref-accent-color);
  border-radius: 50%;
  z-index: 1000; }
  .floating-menu-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .floating-menu-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .floating-menu-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .floating-menu-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .floating-menu-btn {
      margin-left: 0.25rem;
      width: 44px; } }

/* Timeline Modal - applies to all screen sizes */
.timeline-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 800px;
  height: 80vh;
  background-color: var(--pref-bg-color);
  border: 1px solid #2A2D2D;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: none;
  flex-direction: column;
  overflow: hidden; }

.timeline-modal.open {
  display: flex; }

.timeline-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1999;
  display: none; }

.timeline-modal-overlay.open {
  display: block; }

.timeline-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #2A2D2D; }

.timeline-modal-header h3 {
  color: #F0F0F0;
  margin: 0;
  font-size: 1.5rem; }

.timeline-close-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color);
  font-size: 24px; }
  .timeline-close-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .timeline-close-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .timeline-close-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .timeline-close-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .timeline-close-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .timeline-close-btn:hover {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    opacity: 0.85;
    transform: scale(1.05); }

.timeline-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px; }

/* Sprint cards in modal */
.modal-sprint-card {
  border: 1px solid var(--pref-accent-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }

.modal-sprint-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pref-accent-color); }

.modal-sprint-title {
  color: #F0F0F0;
  font-size: 1.2rem;
  margin: 0; }

.modal-sprint-toggle {
  background: transparent;
  border: 1px solid var(--pref-accent-color);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s; }

.modal-sprint-toggle:hover {
  background: var(--bg-2); }

.modal-lessons {
  display: none; }

.modal-lessons.expanded {
  display: block; }

.modal-lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #2A2D2D;
  border-radius: 8px;
  text-decoration: none;
  color: #F0F0F0;
  transition: all 0.2s;
  margin-bottom: 8px; }

.modal-lesson-item:hover {
  background: var(--bg-2);
  border-color: var(--pref-accent-color); }

.modal-lesson-item.active {
  border-color: var(--pref-accent-color); }

.modal-lesson-status {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: all 0.2s ease; }

.modal-lesson-status.incomplete {
  display: none; }

.modal-lesson-status.completed {
  display: block;
  color: #4CAFEF; }

.modal-lesson-title {
  flex: 1;
  font-size: 14px; }

@keyframes checkmarkAppear {
  0% {
    opacity: 0;
    transform: scale(0.5); }
  50% {
    transform: scale(1.1); }
  100% {
    opacity: 1;
    transform: scale(1); } }
.lesson-status-icon.completed,
.modal-lesson-status.completed {
  animation: checkmarkAppear 0.3s ease; }

/* Mobile Styles */
@media (max-width: 768px) {
  .lesson-player {
    flex-direction: column;
    height: auto;
    position: static;
    width: 100%; }

  .lesson-sidebar {
    display: none; }

  .lesson-main {
    flex: none;
    width: 100%;
    height: auto;
    /* ADD THIS */
    min-height: 100vh;
    /* ADD THIS */ }

  .floating-menu-btn {
    display: flex; }

  .topbar-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; }

  .breadcrumbs {
    font-size: 12px; }

  .lesson-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; }

  .lesson-body {
    width: 100%;
    /* ADD THIS */ }

  .lesson-bottom {
    padding: 8px 16px;
    position: relative;
    /* ADD THIS */ }

  .lesson-bottom-inner {
    flex-direction: column;
    gap: 12px;
    align-items: stretch; }

  .bottom-actions {
    width: 100%;
    justify-content: space-between; }

  .assignment-submission {
    margin-top: 24px;
    padding: 16px; }

  .submission-options {
    flex-direction: column;
    gap: 8px; }

  .submission-tab {
    width: 100%;
    text-align: center; }

  .file-upload-area {
    padding: 20px; }

  .file-upload-icon {
    font-size: 32px; } }
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --blue: #3182CE;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D; }

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

body {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden; }

.header {
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-3) 100%);
  padding: 3rem 2rem;
  text-align: center;
  border-bottom: 3px solid var(--accent);
  position: relative;
  overflow: hidden; }

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(74, 222, 128, 0.03) 10px, rgba(74, 222, 128, 0.03) 20px);
  pointer-events: none; }

h1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
  margin-bottom: 0.5rem;
  position: relative; }

.subtitle {
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 400; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem; }

.section {
  background: var(--panel);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--accent);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.5s ease-out; }

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
h2 {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem; }

h3 {
  font-size: 1.4rem;
  color: var(--accent);
  margin: 1.5rem 0 1rem 0; }

p {
  margin-bottom: 1rem;
  color: var(--text-muted); }

.code-block {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1rem 0;
  font-family: 'Space Mono', monospace;
  overflow-x: auto;
  position: relative; }

.code-block::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase; }

.code-block code {
  color: var(--text);
  font-size: 0.9rem; }

.keyword {
  color: var(--accent); }

.string {
  color: var(--green); }

.comment {
  color: var(--text-muted);
  font-style: italic; }

.method {
  color: var(--warn); }

.number {
  color: var(--orange); }

.list-item {
  background: var(--bg-3);
  padding: 1rem;
  margin: 0.5rem 0;
  border-radius: 6px;
  border-left: 3px solid var(--accent-700); }

.list-item strong {
  color: var(--accent); }

.game-container {
  background: var(--bg-1);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative; }

.game-header {
  text-align: center;
  margin-bottom: 2rem; }

.game-title {
  font-size: 1.8rem;
  color: var(--green);
  margin-bottom: 0.5rem; }

.game-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem; }

.game-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem; }

.game-panel {
  background: var(--panel);
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid var(--bg-3); }

.panel-header {
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bg-3); }

.error-indicator {
  background: rgba(229, 62, 62, 0.2);
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  color: var(--red); }

.success-indicator {
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  color: var(--green);
  display: none; }

.debug-tools {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap; }

.tool-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent; }

.tool-btn:hover {
  background: var(--accent-700-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(74, 175, 239, 0.3); }

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

.tool-btn.used {
  background: var(--bg-3);
  color: var(--text-muted);
  cursor: not-allowed; }

.output-console {
  background: var(--bg-0);
  border: 1px solid var(--bg-3);
  border-radius: 6px;
  padding: 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  min-height: 150px;
  max-height: 300px;
  overflow-y: auto; }

.console-line {
  padding: 0.25rem 0;
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards; }

@keyframes fadeIn {
  to {
    opacity: 1; } }
.console-error {
  color: var(--red); }

.console-success {
  color: var(--green); }

.console-info {
  color: var(--accent); }

.console-warning {
  color: var(--warn); }

.postman-sim {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 1rem; }

.request-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem; }

.method-select {
  background: var(--success-green);
  color: var(--text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; }

.url-input {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--surface);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; }

.send-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease; }

.send-btn:hover {
  background: var(--accent-700-hover); }

.response-section {
  margin-top: 1rem; }

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem; }

.status-200 {
  background: var(--green-bg);
  color: var(--green); }

.status-500 {
  background: rgba(229, 62, 62, 0.2);
  color: var(--red); }

.objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem; }

.objective-card {
  background: var(--bg-3);
  border: 2px solid var(--accent-700);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease; }

.objective-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 8px 16px rgba(74, 175, 239, 0.2); }

.objective-number {
  display: inline-block;
  background: var(--accent-700);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 0.5rem; }

.interactive-section {
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-top: 2rem;
  border: 2px solid var(--green); }

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem; }

.interactive-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-align: left;
  position: relative;
  overflow: hidden; }

.interactive-btn::before {
  content: '→';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  transition: transform 0.3s ease; }

.interactive-btn:hover {
  background: var(--accent-700-hover);
  border-color: var(--accent);
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(74, 175, 239, 0.4); }

.interactive-btn:hover::before {
  transform: translateY(-50%) translateX(5px); }

.interactive-btn.clicked {
  background: var(--green-bg);
  border-color: var(--green); }

.progress-bar {
  background: var(--bg-3);
  height: 8px;
  border-radius: 4px;
  margin-top: 1rem;
  overflow: hidden; }

.progress-fill {
  background: linear-gradient(90deg, var(--accent-700) 0%, var(--green) 100%);
  height: 100%;
  width: 0%;
  transition: width 0.5s ease; }

.hint-box {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  display: none; }

.hint-box.visible {
  display: block;
  animation: slideIn 0.3s ease-out; }

.hint-title {
  color: var(--warn);
  font-weight: 700;
  margin-bottom: 0.5rem; }

.badge {
  display: inline-block;
  background: var(--accent-700);
  color: var(--text);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 0.5rem; }

@media (max-width: 768px) {
  .game-content {
    grid-template-columns: 1fr; }

  h1 {
    font-size: 2rem; }

  .container {
    padding: 1rem; } }
.line-number {
  color: var(--text-muted);
  display: inline-block;
  width: 30px;
  user-select: none; }

.code-line {
  display: block; }

.highlight-error {
  background: rgba(229, 62, 62, 0.2);
  border-radius: 3px;
  padding: 0 3px; }

.tab-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem; }

.tab-btn {
  background: var(--bg-3);
  color: var(--text-muted);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px 6px 0 0;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.3s ease; }

.tab-btn.active {
  background: var(--accent-700);
  color: var(--text); }

.tab-content {
  display: none; }

.tab-content.active {
  display: block; }

/**
 * API Documentation Styles
 * Clean, maintainable styles for technical documentation pages
 * Uses theme variables and mixins for consistency
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
.api-docs {
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
  .api-docs .api-header {
    background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
    padding: 25px;
    border-radius: 12px 12px 0 0;
    border-bottom: 3px solid var(--accent); }
    .api-docs .api-header h2 {
      margin: 0;
      color: var(--accent);
      font-weight: 700;
      font-size: 24px; }
    .api-docs .api-header p {
      margin: 8px 0 0 0;
      color: var(--text);
      opacity: 0.85;
      font-size: 15px; }
  .api-docs .api-content {
    background: var(--bg-0);
    padding: 30px;
    border-radius: 0 0 12px 12px; }
  .api-docs section {
    margin-bottom: 30px; }
  .api-docs h3 {
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 20px 0; }
    .api-docs h3.accent {
      color: var(--accent); }
    .api-docs h3.green {
      color: var(--green); }
    .api-docs h3.teal {
      color: var(--teal); }
    .api-docs h3.orange {
      color: var(--orange); }
  .api-docs h4 {
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 15px 0; }
  .api-docs .grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px; }
  .api-docs .panel {
    background: var(--bg-2);
    border-radius: 8px;
    padding: 20px; }
    .api-docs .panel.border-left {
      border-left: 4px solid; }
      .api-docs .panel.border-left.accent {
        border-color: var(--accent); }
      .api-docs .panel.border-left.teal {
        border-color: var(--teal); }
      .api-docs .panel.border-left.green {
        border-color: var(--green); }
      .api-docs .panel.border-left.orange {
        border-color: var(--orange); }
    .api-docs .panel.border-all {
      border: 2px solid; }
      .api-docs .panel.border-all.accent {
        border-color: var(--accent); }
      .api-docs .panel.border-all.teal {
        border-color: var(--teal); }
      .api-docs .panel.border-all.green {
        border-color: var(--green); }
    .api-docs .panel .panel-title {
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 10px; }
      .api-docs .panel .panel-title.accent {
        color: var(--accent); }
      .api-docs .panel .panel-title.teal {
        color: var(--teal); }
      .api-docs .panel .panel-title.green {
        color: var(--green); }
      .api-docs .panel .panel-title.orange {
        color: var(--orange); }
    .api-docs .panel ul {
      color: var(--text-muted);
      margin: 0;
      padding-left: 20px;
      line-height: 1.8;
      font-size: 14px; }
      .api-docs .panel ul strong {
        color: var(--text); }
    .api-docs .panel .panel-example {
      margin-top: 15px;
      padding: 12px;
      background: var(--bg-0);
      border-radius: 6px;
      font-size: 13px;
      color: var(--text-muted); }
      .api-docs .panel .panel-example strong {
        color: var(--accent); }
  .api-docs .info-box {
    padding: 12px;
    border-radius: 4px;
    margin: 15px 0;
    font-size: 14px;
    border-left: 3px solid; }
    .api-docs .info-box.warning {
      background: var(--warn-bg);
      border-color: var(--warn); }
      .api-docs .info-box.warning strong {
        color: var(--warn); }
    .api-docs .info-box.info {
      background: var(--bg-3);
      border-color: var(--accent); }
      .api-docs .info-box.info strong {
        color: var(--accent); }
    .api-docs .info-box.success {
      background: var(--green-bg);
      border-color: var(--green); }
      .api-docs .info-box.success strong {
        color: var(--green); }
    .api-docs .info-box strong {
      font-weight: 600; }
    .api-docs .info-box span {
      color: var(--text-muted); }
  .api-docs .http-method {
    background: var(--bg-2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px; }
    .api-docs .http-method.get {
      border-left: 4px solid var(--teal); }
    .api-docs .http-method.post {
      border-left: 4px solid var(--accent); }
    .api-docs .http-method.delete {
      border-left: 4px solid var(--orange); }
    .api-docs .http-method .method-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px; }
      .api-docs .http-method .method-header .method-name {
        font-weight: 700;
        font-size: 18px; }
        .api-docs .http-method .method-header .method-name.get {
          color: var(--teal); }
        .api-docs .http-method .method-header .method-name.post {
          color: var(--accent); }
        .api-docs .http-method .method-header .method-name.delete {
          color: var(--orange); }
        .api-docs .http-method .method-header .method-name .arrow {
          color: var(--text-muted);
          font-size: 14px;
          margin-left: 10px;
          font-weight: 400; }
      .api-docs .http-method .method-header .method-badge {
        padding: 4px 12px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 12px;
        color: var(--bg-2); }
        .api-docs .http-method .method-header .method-badge.get {
          background: var(--teal); }
        .api-docs .http-method .method-header .method-badge.post {
          background: var(--accent); }
        .api-docs .http-method .method-header .method-badge.delete {
          background: var(--orange); }
    .api-docs .http-method .method-description {
      color: var(--text-muted);
      margin: 0 0 15px 0;
      font-size: 14px;
      line-height: 1.6; }
      .api-docs .http-method .method-description strong {
        color: var(--text); }
    .api-docs .http-method details {
      cursor: pointer; }
      .api-docs .http-method details summary {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 10px; }
        .api-docs .http-method details summary.get {
          color: var(--teal); }
        .api-docs .http-method details summary.post {
          color: var(--accent); }
        .api-docs .http-method details summary.delete {
          color: var(--orange); }
  .api-docs pre {
    background: var(--bg-0);
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 10px 0 0 0; }
    .api-docs pre code {
      color: var(--text);
      font-family: 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.5; }
      .api-docs pre code .comment {
        color: var(--text-muted); }
      .api-docs pre code .keyword {
        color: #c44569; }
      .api-docs pre code .string {
        color: var(--teal); }
      .api-docs pre code .function {
        color: var(--green); }
  .api-docs ol {
    color: var(--text-muted);
    margin: 0;
    padding-left: 20px;
    line-height: 2;
    font-size: 14px; }
    .api-docs ol strong {
      color: var(--text); }
    .api-docs ol a {
      color: var(--accent);
      text-decoration: none; }
      .api-docs ol a:hover {
        text-decoration: underline; }
    .api-docs ol code {
      background: var(--bg-0);
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--orange); }
  .api-docs .integration-guide {
    background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px; }
    .api-docs .integration-guide .architecture-flow {
      background: var(--bg-0);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px; }
      .api-docs .integration-guide .architecture-flow .flow-box {
        background: var(--bg-2);
        padding: 15px;
        border-left: 4px solid var(--accent);
        border-radius: 4px; }
        .api-docs .integration-guide .architecture-flow .flow-box p {
          color: var(--text-muted);
          margin: 0 0 10px 0;
          font-size: 14px;
          line-height: 1.8; }
          .api-docs .integration-guide .architecture-flow .flow-box p:last-child {
            margin-bottom: 0; }
          .api-docs .integration-guide .architecture-flow .flow-box p .step {
            font-weight: 600; }
          .api-docs .integration-guide .architecture-flow .flow-box p .arrow {
            color: var(--text-muted);
            opacity: 0.5; }
    .api-docs .integration-guide .integration-steps {
      background: var(--bg-2);
      border-radius: 8px;
      padding: 20px; }
      .api-docs .integration-guide .integration-steps .step {
        margin-bottom: 20px; }
        .api-docs .integration-guide .integration-steps .step:last-child {
          margin-bottom: 0; }
        .api-docs .integration-guide .integration-steps .step .step-header {
          display: flex;
          align-items: center;
          margin-bottom: 10px; }
          .api-docs .integration-guide .integration-steps .step .step-header .step-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-right: 12px;
            color: var(--bg-2); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-1 {
              background: var(--accent); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-2 {
              background: var(--teal); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-3 {
              background: var(--green); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-4 {
              background: var(--orange); }
          .api-docs .integration-guide .integration-steps .step .step-header strong {
            font-size: 15px; }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-1 {
              color: var(--accent); }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-2 {
              color: var(--teal); }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-3 {
              color: var(--green); }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-4 {
              color: var(--orange); }
        .api-docs .integration-guide .integration-steps .step pre {
          margin-left: 40px; }
          .api-docs .integration-guide .integration-steps .step pre code {
            font-size: 12px; }
        .api-docs .integration-guide .integration-steps .step p {
          color: var(--text-muted);
          margin: 0 0 10px 40px;
          font-size: 13px;
          line-height: 1.6; }
          .api-docs .integration-guide .integration-steps .step p code {
            background: var(--bg-0);
            padding: 2px 6px;
            border-radius: 3px;
            color: var(--accent); }
        .api-docs .integration-guide .integration-steps .step ul {
          color: var(--text-muted);
          margin: 0 0 0 60px;
          padding: 0;
          font-size: 13px;
          line-height: 1.8; }
          .api-docs .integration-guide .integration-steps .step ul strong {
            color: var(--text); }
  .api-docs .auto-enable {
    background: linear-gradient(135deg, #2d1b3d 0%, var(--bg-2) 100%);
    border: 2px solid var(--green);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px; }
    .api-docs .auto-enable h3 {
      color: var(--green); }
    .api-docs .auto-enable .option-panel {
      background: var(--bg-2);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px; }
      .api-docs .auto-enable .option-panel:last-of-type {
        margin-bottom: 0; }
      .api-docs .auto-enable .option-panel h4.option-1 {
        color: var(--accent); }
      .api-docs .auto-enable .option-panel h4.option-2 {
        color: var(--teal); }
      .api-docs .auto-enable .option-panel p {
        color: var(--text-muted);
        margin: 0 0 15px 0;
        font-size: 14px; }
        .api-docs .auto-enable .option-panel p code {
          background: var(--bg-0);
          padding: 2px 6px;
          border-radius: 3px;
          color: var(--orange); }
    .api-docs .auto-enable .pro-tip {
      background: #2d1b3d;
      border-left: 3px solid var(--green);
      padding: 15px;
      border-radius: 6px;
      margin-top: 20px; }
      .api-docs .auto-enable .pro-tip strong {
        color: var(--green); }
      .api-docs .auto-enable .pro-tip span {
        color: var(--text-muted);
        font-size: 13px; }

@keyframes pswGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px #5C4A1E, 0 0 20px rgba(200, 160, 50, 0.2); }
  50% {
    box-shadow: 0 0 0 2px #8A7A3E, 0 0 30px rgba(200, 160, 50, 0.4); } }
@keyframes pswBlink {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0; } }
#pixel-submit-widget {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  background: #1a1208;
  border: 3px solid #5C4A1E;
  max-width: 520px;
  margin: 30px auto;
  overflow: hidden;
  animation: pswGlow 3s ease-in-out infinite;
  box-sizing: border-box; }
  #pixel-submit-widget * {
    font-family: inherit; }
  #pixel-submit-widget canvas {
    image-rendering: pixelated;
    display: block; }
  #pixel-submit-widget .psw-titlebar {
    background: linear-gradient(180deg, #3a2a0e, #2a1e08);
    border-bottom: 3px solid #5C4A1E;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px; }
    #pixel-submit-widget .psw-titlebar-icon {
      font-size: 14px; }
    #pixel-submit-widget .psw-titlebar-text {
      color: #FFD700;
      font-size: 8px;
      letter-spacing: 2px;
      flex: 1; }
  #pixel-submit-widget .psw-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid #2a1e08; }
  #pixel-submit-widget .psw-panel {
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; }
    #pixel-submit-widget .psw-panel-left {
      border-right: 2px solid #2a1e08; }
  #pixel-submit-widget .psw-step-label {
    color: #C8A830;
    font-size: 7px;
    letter-spacing: 1px; }
  #pixel-submit-widget .psw-btn {
    font-family: inherit;
    font-size: 9px;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 14px;
    height: 34px;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    clip-path: polygon(2px 0%, calc(100% - 2px) 0%, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0% calc(100% - 2px), 0% 2px);
    transition: transform 0.05s, box-shadow 0.05s;
    user-select: none; }
    #pixel-submit-widget .psw-btn:active {
      transform: translateY(3px); }
    #pixel-submit-widget .psw-btn:disabled {
      background: #2a2a2a !important;
      color: #666 !important;
      cursor: not-allowed;
      box-shadow: none !important; }
    #pixel-submit-widget .psw-btn-gold {
      background: #C8880A;
      box-shadow: 0 4px 0 #7a5006, inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 0 14px #C8880A88; }
      #pixel-submit-widget .psw-btn-gold:hover:not(:disabled) {
        background: #E89A18; }
      #pixel-submit-widget .psw-btn-gold.done {
        background: #555;
        box-shadow: none; }
    #pixel-submit-widget .psw-btn-blue {
      background: #1E4D8C;
      box-shadow: 0 4px 0 #0d2347, inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 14px #1E4D8C88; }
      #pixel-submit-widget .psw-btn-blue:hover:not(:disabled) {
        background: #2a5ea0; }
  #pixel-submit-widget .psw-url-row {
    padding: 12px 16px 8px;
    border-bottom: 2px solid #2a1e08;
    display: flex;
    gap: 8px;
    align-items: center; }
  #pixel-submit-widget .psw-url-arrow {
    color: #5C4A1E;
    font-size: 8px; }
  #pixel-submit-widget .psw-url-input {
    flex: 1;
    background: #0e0a04;
    border: 2px solid #3a2a0e;
    color: #C8A830;
    font-family: inherit;
    font-size: 7px;
    padding: 8px 10px;
    outline: none;
    caret-color: #FFD700;
    box-sizing: border-box; }
    #pixel-submit-widget .psw-url-input:focus {
      border-color: #C8880A; }
    #pixel-submit-widget .psw-url-input::placeholder {
      color: #3a2a0e; }
  #pixel-submit-widget .psw-dialog {
    min-height: 42px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px; }
  #pixel-submit-widget .psw-dialog-icon {
    color: #FFD700;
    font-size: 12px;
    flex-shrink: 0; }
  #pixel-submit-widget .psw-dialog-text {
    color: #C8A830;
    font-size: 7px;
    line-height: 1.9; }
  #pixel-submit-widget .psw-dialog-muted {
    color: #5C4A1E; }
  #pixel-submit-widget .psw-dialog-success {
    color: #00FF88; }
  #pixel-submit-widget .psw-cursor {
    animation: pswBlink 1s step-end infinite; }

@media (prefers-color-scheme: light) {
  #pixel-submit-widget {
    animation: none;
    box-shadow: 0 0 0 3px #5C4A1E, 0 4px 24px rgba(92, 74, 30, 0.3); } }
.grading-module-panel {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--surface);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem; }
  .grading-module-panel h2 {
    color: var(--text);
    margin-top: 0; }

.grading-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  color: var(--text); }
  .grading-table th,
  .grading-table td {
    border: 1px solid var(--surface);
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: var(--bg-2);
    color: var(--text); }
  .grading-table th {
    background: var(--bg-3);
    color: var(--text);
    font-weight: 600; }
  .grading-table tbody tr:hover td {
    background: var(--bg-3); }
  .grading-table td button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0.25rem 0.6rem;
    margin: 0 0.15rem;
    border-radius: 4px;
    border: 1px solid var(--surface);
    background: var(--bg-3);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8rem; }
    .grading-table td button:hover {
      background: var(--panel);
      border-color: var(--accent); }

#grade-create-form input, #grade-create-form textarea.smallInput, #grade-create-form textarea.mediumInput, #grade-create-form textarea.largeInput,
#grade-edit-form input,
#grade-edit-form textarea.smallInput,
#grade-edit-form textarea.mediumInput,
#grade-edit-form textarea.largeInput {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--surface);
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--text);
  box-sizing: border-box; }
  #grade-create-form input::placeholder, #grade-create-form textarea.smallInput::placeholder, #grade-create-form textarea.mediumInput::placeholder, #grade-create-form textarea.largeInput::placeholder,
  #grade-edit-form input::placeholder,
  #grade-edit-form textarea.smallInput::placeholder,
  #grade-edit-form textarea.mediumInput::placeholder,
  #grade-edit-form textarea.largeInput::placeholder {
    color: var(--text-muted); }
  #grade-create-form input:focus, #grade-create-form textarea.smallInput:focus, #grade-create-form textarea.mediumInput:focus, #grade-create-form textarea.largeInput:focus,
  #grade-edit-form input:focus,
  #grade-edit-form textarea.smallInput:focus,
  #grade-edit-form textarea.mediumInput:focus,
  #grade-edit-form textarea.largeInput:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(76, 175, 239, 0.25); }

.btn-primary {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  border-radius: 4px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  margin-right: 0.5rem; }
  .btn-primary:hover {
    background: var(--accent-700-hover); }

.btn-secondary {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--surface);
  border-radius: 4px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.9rem; }
  .btn-secondary:hover {
    background: var(--panel);
    border-color: var(--accent); }

.grading-dropdown {
  position: relative;
  display: inline-block; }

.grading-dropdown-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem; }
  .grading-dropdown-btn:hover {
    background: var(--accent-700-hover); }

.grading-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--surface);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  min-width: 160px;
  overflow: hidden; }
  .grading-dropdown-content.show {
    display: block; }

.grading-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem; }
  .grading-dropdown-item:hover {
    background: var(--bg-3);
    color: var(--accent); }

#grading-status {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  min-height: 1.2em;
  color: var(--text-muted); }
  #grading-status.success {
    color: var(--success-green); }
  #grading-status.error {
    color: var(--red); }
  #grading-status.warn {
    color: var(--warn); }

.grading-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  align-items: center;
  justify-content: center; }
  .grading-modal-backdrop.show {
    display: flex; }

.grading-modal-box {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--surface);
  border-radius: 8px;
  padding: 2rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
  .grading-modal-box h3 {
    margin-top: 0;
    color: var(--text); }
  .grading-modal-box p {
    margin-bottom: 0.4rem;
    color: var(--text); }
  .grading-modal-box label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem; }
  .grading-modal-box input, .grading-modal-box textarea.smallInput, .grading-modal-box textarea.mediumInput, .grading-modal-box textarea.largeInput {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
    border: 1px solid var(--surface);
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text); }
    .grading-modal-box input::placeholder, .grading-modal-box textarea.smallInput::placeholder, .grading-modal-box textarea.mediumInput::placeholder, .grading-modal-box textarea.largeInput::placeholder {
      color: var(--text-muted); }
    .grading-modal-box input:focus, .grading-modal-box textarea.smallInput:focus, .grading-modal-box textarea.mediumInput:focus, .grading-modal-box textarea.largeInput:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(76, 175, 239, 0.25); }

.grading-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem; }

.grading-modal-error {
  color: var(--red);
  margin-bottom: 1rem;
  font-size: 0.875rem; }

.grading-submission-module {
  margin: 3rem auto 2rem auto;
  max-width: 520px;
  width: 100%; }

html,
body,
input,
input.smallInput,
input.mediumInput,
input.largeInput,
textarea.smallInput,
textarea.mediumInput,
textarea.largeInput,
input.gradientInput,
textarea,
select {
  background-color: #121212; }

:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6; }

.lesson-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 1rem; }
  @media (max-width: 768px) {
    .lesson-container {
      flex-direction: column; } }

/* Sidebar */
.lesson-sidebar {
  flex: 0 0 250px;
  max-width: 100%;
  background: #1F2020;
  padding: 1rem;
  border-radius: 8px;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto; }
  @media (max-width: 768px) {
    .lesson-sidebar {
      position: relative;
      top: auto;
      max-height: none;
      overflow: visible;
      width: 100%; } }

/* Main content */
.lesson-content {
  flex: 1 1 0;
  min-width: 300px; }

.time-display {
  background: #2A2D2D;
  padding: 0.5rem;
  margin: 0.25rem 0;
  border-radius: 4px;
  text-align: center; }
  .time-display span {
    font-size: 1.2rem;
    font-weight: bold;
    color: #4CAFEF;
    display: block; }
  .time-display small {
    font-size: 0.75rem;
    color: #aaa; }

.timer-status {
  text-align: center;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 0.5rem; }
  .timer-status.active {
    background: #2D5A3D;
    color: #4ADE80; }
  .timer-status.paused {
    background: #5A3D2D;
    color: #FBBF24; }

.progress-bar {
  background: #333;
  border-radius: 6px;
  height: 12px;
  width: 100%;
  margin: 0.5rem 0; }
  .progress-bar .progress-fill {
    background: #4CAFEF;
    height: 100%;
    width: 0%;
    border-radius: 6px; }

.btn {
  display: inline-block;
  color: white;
  padding: 15px 25px;
  border-radius: 4px;
  text-decoration: none;
  margin: 0.5rem 0.25rem;
  border: none;
  cursor: pointer;
  font-family: arial;
  font-weight: bolder;
  background: #007ACC; }
  .btn:hover {
    background: #005FA3;
    border-radius: 25px;
    transition: border-radius 2s; }

.small-btn {
  font-size: 0.75rem;
  padding: 3px 6px;
  margin-top: 0.5rem; }

.sandbox textarea {
  width: 100%;
  height: 120px;
  font-family: monospace;
  margin-bottom: 0.5rem; }

.resources,
.sandbox,
.lesson-quiz {
  background: #2B2B2B;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  color: #F0F0F0; }

#badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; }

.badge {
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

.congrats-popup {
  position: fixed;
  top: 20px;
  right: -300px;
  background: #222;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease, opacity 0.3s ease;
  opacity: 0.95;
  z-index: 9999; }
  .congrats-popup.show {
    right: 20px; }

.lesson-quiz textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #444;
  font-size: 1rem;
  resize: vertical;
  box-sizing: border-box;
  background: #1F1F1F;
  color: #F0F0F0; }
.lesson-quiz button:hover {
  background: #1aa3ff; }
.lesson-quiz #reflection-status {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #9ACDFF; }

.blackboard {
  width: 100%;
  min-height: 240px; }

#blackboard-canvas {
  border: 1px solid #ccc;
  background: #000;
  cursor: crosshair; }

.blackboard-description {
  margin-top: 10px;
  color: #ccc; }

.demo-label {
  display: block;
  text-align: center;
  margin: 6px 0; }

#demo-canvas-wrapper {
  background: white;
  border: 2px solid #333;
  display: block;
  margin: 0 auto; }

#demo-code {
  display: none;
  margin: 8px auto;
  overflow: auto; }

.info-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #3182CE; }

.challenge-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #38B2AC; }

.think-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #ED8936; }

.checkpoint-box,
.key-points {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #3182CE; }

.warning-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #E53E3E; }

.success {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #28A745; }

.flashcards-section {
  background: #2B2B2B !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  margin: 1rem 0 2rem 0 !important;
  color: #F0F0F0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important; }

.flashcard-container {
  position: relative !important;
  width: 100% !important;
  max-width: 280px !important;
  height: 140px !important;
  perspective: 1500px !important;
  margin: 1rem auto 1.5rem auto !important;
  display: block !important; }
  .flashcard-container.hidden {
    display: none !important; }

.flashcard-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.6s ease !important;
  transform-style: preserve-3d !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important; }
  .flashcard-inner.flipped {
    transform: rotateY(180deg) !important; }

.flashcard-front,
.flashcard-back {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 8px !important;
  background: #1E293B !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important; }

.flashcard-back {
  transform: rotateY(180deg) !important; }

.card-counter {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 15px !important;
  padding: 4px 10px !important;
  font-size: 0.8rem !important; }

.flashcard-front h3,
.flashcard-back h4 {
  text-align: center !important;
  margin-bottom: 1rem !important;
  color: white !important; }

.flashcard-back p {
  text-align: center !important;
  margin-bottom: 1rem !important;
  color: white !important; }

.flashcard-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 1rem 0 1.5rem 0 !important;
  gap: 0.4rem !important;
  max-width: 100% !important; }
  .flashcard-controls button {
    flex: 0 1 auto !important;
    min-width: 60px !important;
    max-width: 100px !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important; }

.flashcard-actions {
  display: flex !important;
  gap: 0.5rem !important;
  flex: 1 !important; }
  .flashcard-actions .know-btn, .flashcard-actions .review-btn {
    flex: 1 !important;
    min-width: 60px !important;
    font-size: 0.75rem !important;
    padding: 6px 10px !important; }
  .flashcard-actions .know-btn {
    background: #10B981 !important;
    color: white !important; }
  .flashcard-actions .review-btn {
    background: #F59E0B !important;
    color: white !important; }

.card-status {
  margin-top: 12px !important;
  font-size: 0.85rem !important;
  color: #CBD5E1 !important;
  text-align: center !important; }

#flashcard-review-sidebar button {
  width: 100%;
  background: #334155;
  border: none;
  color: white;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 5px;
  font-size: 0.85rem; }
  #flashcard-review-sidebar button:hover {
    background: #475569; }

.flashcard-front h3,
.flashcard-back h4 {
  text-align: center !important;
  margin-bottom: 0.5rem !important;
  color: white !important;
  font-size: 1rem !important; }

.flashcard-back p {
  text-align: center !important;
  margin-bottom: 0.5rem !important;
  color: white !important;
  font-size: 0.9rem !important; }

.flashcard-front .btn,
.flashcard-back .btn {
  padding: 6px 12px !important;
  font-size: 0.8rem !important; }

.flashcard-deck {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important; }

.footer-links {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%; }

.footer-previous {
  justify-self: start;
  margin-left: 10vw; }

.footer-home {
  justify-self: center; }

.footer-next {
  justify-self: end;
  margin-right: 10vw; }