.xh-student-stage{
  --xhs-aspect:1.7916667;
  --xhs-cream:#fff1c9;
  --xhs-soft:#f7d999;
  --xhs-gold:#e8b86d;
  --xhs-amber:#bd7442;
  --xhs-mint:#76d0b0;
  --xhs-ink:#1a100b;
  --xhs-dark:rgba(14,9,7,.72);
  position:fixed;
  inset:74px 12px 86px 12px;
  z-index:82;
  display:none;
  color:var(--xhs-cream);
  pointer-events:none;
}
body.xh-student-open .xh-student-stage{
  display:grid;
  place-items:center;
  pointer-events:auto;
}
body.xh-student-open .calm,
body.xh-student-open .dock,
body.xh-student-open .xh-media,
body.xh-student-open .xh-media-stage{
  opacity:0;
  pointer-events:none;
}
#xh-student-launch{color:var(--xhs-gold)}
.xhs-shell{
  position:relative;
  width:min(calc(100vw - 24px), calc((100vh - 174px) * var(--xhs-aspect)), 1680px);
  aspect-ratio:2752 / 1536;
  min-width:960px;
  overflow:hidden;
  border:1px solid rgba(255,219,157,.34);
  border-radius:18px;
  background:#1c120d;
  box-shadow:0 34px 120px rgba(0,0,0,.62), 0 0 0 1px rgba(255,244,213,.06) inset;
}
.xhs-art{
  position:absolute;
  inset:0;
  background:url("assets/student-desk-ui.webp?v=1") center/cover no-repeat;
  filter:saturate(1.03) contrast(1.01);
}
.xhs-art:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 26%, rgba(255,231,174,.08), transparent 24%),
    linear-gradient(180deg, rgba(21,12,7,.03), rgba(10,6,4,.16));
}
.xhs-hot,
.xhs-desk-btn,
.xhs-icon-btn,
.xhs-course-status{
  position:absolute;
  z-index:2;
}
.xhs-course-status.empty{display:none}
.xhs-hot,
.xhs-desk-btn,
.xhs-icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:999px;
  background:rgba(255,244,214,.018);
  color:transparent;
  font:900 clamp(9px, .72vw, 13px)/1 var(--mono);
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.xhs-hot:hover,
.xhs-hot:focus-visible,
.xhs-icon-btn:hover,
.xhs-icon-btn:focus-visible{
  color:transparent;
  border-color:rgba(255,228,172,.55);
  background:rgba(32,19,11,.1);
  box-shadow:0 0 0 3px rgba(255,212,134,.12), 0 10px 28px rgba(0,0,0,.26);
  outline:none;
  text-shadow:none;
}
.xhs-desk-btn:hover,
.xhs-desk-btn:focus-visible{
  color:var(--xhs-cream);
  border-color:rgba(255,228,172,.55);
  background:rgba(32,19,11,.54);
  box-shadow:0 0 0 3px rgba(255,212,134,.12), 0 10px 28px rgba(0,0,0,.26);
  outline:none;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  backdrop-filter:blur(4px) saturate(1.08);
}
.xhs-home{left:29.3%;top:4.6%;width:6.8%;height:5%}
.xhs-course-chip{left:65.3%;top:4.5%;width:6.8%;height:5%}
.xhs-ai-chip{left:72.6%;top:4.5%;width:7.3%;height:5%}
.xhs-state-chip{left:80.5%;top:4.5%;width:7.5%;height:5%}
.xhs-course-chip-status{left:88.5%;top:4.5%;width:7.3%;height:5%}
.xhs-start{left:91%;top:23%;width:6.8%;height:5.6%}
.xhs-reset{left:92.2%;top:31.5%;width:5.7%;height:5.6%}
.xhs-room-knob{left:84.3%;top:30.1%;width:4.1%;height:7.8%}
.xhs-calendar-knob{left:89.2%;top:30.3%;width:4.2%;height:7.7%}
.xhs-switch-label{
  position:absolute;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:4.5%;
  padding:5px 7px;
  border:1px solid rgba(255,225,169,.34);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(38,22,13,.91), rgba(21,13,9,.9));
  box-shadow:0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,239,199,.14);
  color:#fff0c0;
  text-align:center;
  text-shadow:0 2px 7px rgba(0,0,0,.82);
  pointer-events:none;
}
.xhs-switch-label:before{
  content:"";
  position:absolute;
  left:50%;
  top:-13px;
  width:1px;
  height:11px;
  background:linear-gradient(180deg, rgba(255,226,170,.74), rgba(255,226,170,.12));
}
.xhs-switch-label:after{
  content:"";
  position:absolute;
  left:calc(50% - 3px);
  top:-16px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffe1a1;
  box-shadow:0 0 12px rgba(255,218,142,.88);
}
.xhs-switch-label b,
.xhs-switch-label span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:uppercase;
}
.xhs-switch-label b{font:900 clamp(8px,.64vw,12px)/1 var(--mono)}
.xhs-switch-label span{color:#e8c987;font:900 clamp(6px,.48vw,9px)/1 var(--mono)}
.xhs-study-group-label{left:82.2%;top:38.65%;width:6.8%}
.xhs-calendar-sync-label{left:89%;top:38.65%;width:7.4%}
.xhs-syllabus-card{left:4.2%;top:61.7%;width:19.5%;height:31%;border-radius:10px}
.xhs-reader-card{left:24.6%;top:60.6%;width:14.7%;height:32.8%;border-radius:18px}
.xhs-cram-card{left:41.2%;top:60.6%;width:29.7%;height:7.4%;border-radius:14px}
.xhs-save-course{left:59.5%;top:69.2%;width:10.4%;height:5.1%}
.xhs-save-card{left:74.4%;top:65.7%;width:23.2%;height:5.8%}
.xhs-reader-ai{left:74.3%;top:73.6%;width:13.4%;height:4.6%}
.xhs-reader-open{left:89.4%;top:73.6%;width:8.2%;height:4.6%}
.xhs-import-cards{left:91.9%;top:87.45%;width:5.8%;height:5.2%;z-index:4}
.xhs-course-status{
  left:87.4%;
  top:4.5%;
  width:8.7%;
  height:5%;
  display:grid;
  place-items:center;
  padding:0 8px;
  border:1px solid rgba(255,226,174,.28);
  border-radius:999px;
  background:rgba(33,19,12,.72);
  color:var(--xhs-cream);
  font:900 clamp(7px, .62vw, 11px)/1.05 var(--mono);
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.78);
  pointer-events:none;
}
.xhs-ai-dot{
  position:absolute;
  left:73.8%;
  top:9.85%;
  z-index:3;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--xhs-gold);
  box-shadow:0 0 14px rgba(232,184,109,.9);
}
.xhs-ai-dot.ready{
  background:var(--xhs-mint);
  box-shadow:0 0 14px rgba(118,208,176,.9);
}
.xhs-metric-live{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:7px 10px;
  border:1px solid rgba(79,49,28,.24);
  border-radius:8px;
  background:linear-gradient(180deg, #eadbb9, #d1b891);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.58), inset 0 -8px 16px rgba(91,52,24,.1);
  pointer-events:none;
  color:#2b160d;
  text-shadow:0 1px 0 rgba(255,243,214,.52);
}
.xhs-metric-live small{
  display:block;
  color:#26140b;
  font:900 clamp(8px,.62vw,11px)/1 var(--mono);
  text-transform:uppercase;
  opacity:.88;
}
.xhs-metric-live b{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff2c9;
  font:900 clamp(17px,1.8vw,31px)/1.02 var(--sans);
  text-shadow:0 2px 8px rgba(55,30,14,.58), 0 0 9px rgba(255,240,185,.26);
}
.xhs-m-course{left:8.2%;top:47.65%;width:12.75%;height:9.15%}
.xhs-m-timeline{left:23.6%;top:47.65%;width:11.65%;height:9.15%}
.xhs-m-cards{left:38.8%;top:47.65%;width:11.65%;height:9.15%}
.xhs-m-next{left:54.2%;top:47.65%;width:12.15%;height:9.15%}
.xhs-input,
.xhs-textarea,
.xhs-select{
  position:absolute;
  z-index:3;
  width:100%;
  min-width:0;
  border:1px solid rgba(255,223,170,.18);
  border-radius:10px;
  background:#110b08;
  color:var(--xhs-cream);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.48);
  outline:none;
  font:800 clamp(10px, .9vw, 15px)/1.16 var(--sans);
}
.xhs-input{padding:0 12px}
.xhs-textarea{padding:9px 12px;resize:none}
.xhs-select{
  appearance:none;
  padding:0 8px;
  background:rgba(35,20,12,.62);
  color:var(--xhs-soft);
  font:900 clamp(8px,.62vw,11px)/1 var(--mono);
  text-transform:uppercase;
  text-align:center;
}
.xhs-input::placeholder,
.xhs-textarea::placeholder{color:rgba(255,232,181,.62)}
.xhs-input:focus,
.xhs-textarea:focus,
.xhs-select:focus{
  border-color:rgba(118,208,176,.72);
  box-shadow:0 0 0 3px rgba(118,208,176,.16), inset 0 2px 9px rgba(0,0,0,.42);
}
#xhs-course{left:43.4%;top:69.2%;width:14.6%;height:5.1%}
#xhs-card-front{left:79.1%;top:48.6%;width:16.8%;height:4.8%}
#xhs-card-back{left:79.1%;top:56.8%;width:16.8%;height:5.1%}
#xhs-card-import{left:74.6%;top:87.45%;width:22.9%;height:5.2%;font-size:clamp(8px,.64vw,11px)}
#xhs-sprint-min{left:85%;top:22.6%;width:4.6%;height:4.1%}
.xhs-drop{
  position:absolute;
  z-index:2;
  left:42.8%;
  top:75.5%;
  width:27.4%;
  height:17.5%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:1.1% 2%;
  border:1px solid rgba(255,225,170,.14);
  border-radius:20px;
  background:rgba(255,240,203,.03);
  color:#351b12;
  cursor:pointer;
  text-shadow:0 1px 0 rgba(255,238,202,.44);
}
.xhs-drop b{
  color:#32180f;
  font:900 clamp(15px,1.35vw,26px)/1.08 var(--sans);
}
.xhs-drop span{
  max-width:92%;
  color:#2d1b12;
  font:800 clamp(9px,.78vw,14px)/1.3 var(--sans);
}
.xhs-drop.xhs-drop-empty b,
.xhs-drop.xhs-drop-empty span{opacity:0}
.xhs-drop.hover,
.xhs-drop:hover,
.xhs-drop:focus-within{
  border-color:rgba(118,208,176,.72);
  background:rgba(255,247,221,.17);
  box-shadow:0 0 0 4px rgba(118,208,176,.13), 0 0 32px rgba(255,229,166,.2);
}
.xhs-ring{
  position:absolute;
  left:75.4%;
  top:21.5%;
  z-index:3;
  width:8.6%;
  height:14.3%;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.xhs-ring.empty{display:none}
.xhs-ring b{
  color:#ffe49b;
  font:900 clamp(18px,2.2vw,39px)/1 var(--mono);
  text-shadow:0 0 12px rgba(255,215,120,.76), 0 4px 12px rgba(0,0,0,.75);
}
.xhs-flashcard-label{
  position:absolute;
  left:78.7%;
  top:43.4%;
  z-index:4;
  width:17.7%;
  min-height:3.4%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 9px;
  border:1px solid rgba(255,226,174,.26);
  border-radius:999px;
  background:rgba(29,17,10,.82);
  color:#ffedb5;
  box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,238,199,.1);
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  pointer-events:none;
}
.xhs-flashcard-label b,
.xhs-flashcard-label span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:uppercase;
}
.xhs-flashcard-label b{
  color:#fff1c9;
  font:900 clamp(8px,.72vw,13px)/1 var(--mono);
}
.xhs-flashcard-label span{
  color:#f0cf8d;
  font:900 clamp(7px,.56vw,10px)/1 var(--mono);
}
.xhs-card-count{
  position:absolute;
  left:93.3%;
  top:41.05%;
  z-index:3;
  width:5.1%;
  padding:6px 6px;
  border:1px solid rgba(255,226,174,.22);
  border-radius:999px;
  background:rgba(28,16,10,.76);
  color:#ffedb5;
  font:900 clamp(8px,.68vw,13px)/1 var(--mono);
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  pointer-events:none;
}
.xhs-ai-warning{
  position:absolute;
  left:32%;
  top:31%;
  z-index:5;
  width:35%;
  padding:12px;
  border:1px solid rgba(255,214,134,.55);
  border-radius:14px;
  background:rgba(36,20,10,.88);
  color:var(--xhs-cream);
  box-shadow:0 22px 60px rgba(0,0,0,.38);
  backdrop-filter:blur(8px) saturate(1.1);
}
.xhs-ai-warning b{display:block;color:#ffe0a0;font:900 clamp(12px,1vw,16px)/1.1 var(--sans)}
.xhs-ai-warning span{display:block;margin-top:6px;color:#f8dca8;font:700 clamp(10px,.78vw,13px)/1.35 var(--sans)}
.xhs-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.xhs-ai-warning .xhs-desk-btn{
  position:static;
  min-height:34px;
  padding:0 12px;
  color:var(--xhs-cream);
  border-color:rgba(255,227,168,.34);
  background:rgba(255,231,178,.12);
}
.xhs-ai-warning .xhs-desk-btn.primary{
  color:#25130b;
  border-color:transparent;
  background:linear-gradient(135deg, #ffe0a0, #83d6b7);
}
.xhs-help-readout{
  position:absolute;
  left:45.8%;
  top:27.8%;
  z-index:4;
  width:27.2%;
  min-height:8.6%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:11px 13px;
  border:1px solid rgba(255,226,174,.26);
  border-radius:12px;
  background:rgba(31,18,10,.7);
  color:#ffe9ad;
  box-shadow:0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,238,199,.1);
  text-shadow:0 2px 8px rgba(0,0,0,.78);
  pointer-events:none;
  backdrop-filter:blur(5px) saturate(1.05);
}
.xhs-help-readout.active{
  border-color:rgba(118,208,176,.62);
  background:rgba(24,18,12,.82);
  box-shadow:0 18px 44px rgba(0,0,0,.3), 0 0 0 3px rgba(118,208,176,.12);
}
.xhs-help-readout b{
  display:block;
  color:#fff1c9;
  font:900 clamp(9px,.75vw,14px)/1.05 var(--mono);
  text-transform:uppercase;
}
.xhs-help-readout span{
  display:block;
  overflow:visible;
  color:#f2d49a;
  font:800 clamp(8px,.58vw,11px)/1.28 var(--sans);
}
.xhs-mobile-actions{display:none}
.xhs-status-strip{
  position:absolute;
  left:8.4%;
  bottom:3.2%;
  z-index:3;
  max-width:54%;
  padding:8px 11px;
  border:1px solid rgba(255,225,169,.18);
  border-radius:999px;
  background:rgba(24,14,8,.44);
  color:#f8d99a;
  font:900 clamp(8px,.68vw,12px)/1 var(--mono);
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
@media (max-width:1080px){
  .xh-student-stage{
    overflow:auto;
    justify-content:flex-start;
    align-items:center;
    -webkit-overflow-scrolling:touch;
  }
  .xhs-shell{
    width:1080px;
    max-width:none;
    min-width:1080px;
    margin:10px;
  }
}
@media (max-width:760px){
  .xh-student-stage{
    inset:calc(58px + env(safe-area-inset-top)) 0 calc(74px + env(safe-area-inset-bottom)) 0;
    padding:0 6px;
    align-items:start;
  }
  .xhs-shell{
    width:1020px;
    min-width:1020px;
    border-radius:14px;
  }
  .xhs-hot:hover:after,
  .xhs-hot:focus-visible:after,
  .xhs-icon-btn:hover:after,
  .xhs-icon-btn:focus-visible:after{display:none}
  .xhs-help-readout{left:43.8%;top:26.8%;width:31%;min-height:10%}
  .xhs-mobile-actions{
    position:fixed;
    left:8px;
    right:8px;
    bottom:calc(86px + env(safe-area-inset-bottom));
    z-index:95;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    padding:6px;
    border:1px solid rgba(255,226,174,.22);
    border-radius:14px;
    background:rgba(18,12,9,.84);
    box-shadow:0 18px 46px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,238,199,.1);
    backdrop-filter:blur(10px) saturate(1.08);
  }
  .xhs-mobile-actions button{
    min-width:0;
    min-height:48px;
    padding:6px 5px;
    border:1px solid rgba(255,226,174,.24);
    border-radius:10px;
    background:linear-gradient(180deg, rgba(255,236,190,.14), rgba(41,24,14,.72));
    color:#ffe9ad;
    text-align:center;
    cursor:pointer;
    text-shadow:0 2px 8px rgba(0,0,0,.78);
    -webkit-tap-highlight-color:transparent;
  }
  .xhs-mobile-actions button:focus-visible,
  .xhs-mobile-actions button:hover{
    outline:none;
    border-color:rgba(118,208,176,.7);
    box-shadow:0 0 0 3px rgba(118,208,176,.16);
  }
  .xhs-mobile-actions b,
  .xhs-mobile-actions span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:0;
  }
  .xhs-mobile-actions b{font:900 10px/1.1 var(--mono);text-transform:uppercase}
  .xhs-mobile-actions span{margin-top:3px;color:#e8c987;font:800 9px/1.1 var(--sans)}
  .xhs-status-strip{left:3.2%;bottom:2.2%;max-width:80%}
}