/* Layout hardening layer: loaded after the main styles so it can safely fix
   viewport, overflow and stacking edge cases without changing the visual theme. */
:root{
  --ui-layer-sticky:20;
  --ui-layer-nav:40;
  --ui-layer-toast:60;
}
html{min-width:320px;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0}
.layout,.main,.topline,.top-actions,.toolbar,.panel,.panel-head,.panel-head>div,.table-scroll,#view,.field{min-width:0}
.sidebar{height:100dvh;overscroll-behavior:contain}
.top-actions{min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.top-actions button{white-space:nowrap;min-height:40px}
.panel,.schedule-panel{isolation:isolate}
.schedule-panel .schedule-desktop{position:relative;max-width:100%;isolation:isolate;overscroll-behavior:contain}
.schedule-panel table.schedule thead th{z-index:var(--ui-layer-sticky);background-clip:padding-box}
.schedule-panel table.schedule tbody th{z-index:calc(var(--ui-layer-sticky) - 5);background:var(--c-ffffff-bg);background-clip:padding-box}
.schedule-panel table.schedule thead th:first-child{z-index:calc(var(--ui-layer-sticky) + 5)}
.event.is-live{z-index:auto}
.table-scroll{max-width:100%;scrollbar-gutter:stable}
dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:hidden}
dialog .dialog-head{z-index:3;flex:none}
dialog .dialog-body{max-height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain}
.toast{z-index:var(--ui-layer-toast);pointer-events:none}
img,iframe{max-width:100%}

@media(max-width:900px),(max-height:480px) and (orientation:landscape){
  body{overflow-wrap:anywhere}
  .sidebar{height:auto;overflow:visible}
  .nav-list{z-index:var(--ui-layer-nav)}
  .topline{flex-wrap:wrap;align-items:flex-start}
  .topline>div:first-child{flex:1 1 13rem;min-width:0}
  .top-actions{flex:0 1 auto;max-width:100%;gap:6px}
  .toolbar,.filter-fields,.week-control,.weekstrip,.stats{min-width:0}
  .day-btn{min-width:0}
  .panel-head{align-items:flex-start}
  .panel-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .mobile-room-header,.room-label-stack,.mobile-agenda,.mobile-day-details{min-width:0}
  .mobile-room-header>*{min-width:0}
  dialog{width:min(710px,calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  dialog .dialog-body{max-height:calc(100dvh - 74px)}
}

@media(max-width:520px){
  .main{padding-left:10px;padding-right:10px}
  .topline>div:first-child{flex-basis:100%}
  .top-actions{width:100%;justify-content:flex-start}
  .top-actions button{flex:1 1 auto;min-width:0}
  .weekstrip{gap:1px}
  .day-btn{padding-left:0;padding-right:0}
  .stats{gap:7px}
  .panel{border-radius:12px}
  .panel-head,.legend{padding-left:12px;padding-right:12px}
  .mobile-schedule{padding-left:10px;padding-right:10px}
}

@media(max-width:360px){
  html{min-width:280px}
  .top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-actions button{width:100%;padding-left:5px;padding-right:5px}
  .stat{min-width:0}
  .stat strong{font-size:1.3rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

@media print{
  html{min-width:0;scrollbar-gutter:auto}
  .sidebar{height:auto}
  .schedule-panel .schedule-desktop{overflow:visible;max-height:none}
}

/* Software install styling */
.event.software{background:var(--c-f5f0ff-bg);color:var(--c-581c87-text);border-left-color:var(--c-a855f7-border)}
.event.software:hover{background:var(--c-ede5fd-bg)}
.tag.purple{background:var(--c-f3e8ff-bg);color:var(--c-7e22ce-text)}
.swatch.software{background:var(--c-ede9fe-bg);border-color:var(--c-c4b5fd-border)}
.mini-block.software{background:var(--c-a855f7-bg)}

/* Software install schedule reminder for Today view */
.software-reminder-bar{
  padding:12px 18px;
  border-bottom:1px solid var(--line-border);
  background:var(--c-faf7fc-bg);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.software-reminder-bar.active{
  background:linear-gradient(180deg, var(--c-fdfaff-bg) 0%, var(--c-faf5ff-bg) 100%);
  border-bottom:1px solid var(--c-e9d5ff-border);
}
.software-reminder-bar.empty{
  background:var(--c-fafafd-bg);
  padding:9px 18px;
}
.software-reminder-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.software-reminder-title-group{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.software-reminder-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:0.8125rem;
  font-weight:650;
  padding:2px 8px;
  border-radius:6px;
}
.software-reminder-badge.active{
  background:var(--c-7c3aed-bg);
  color:#ffffff;
  box-shadow:0 1px 3px rgba(124,58,237,.25);
}
.software-reminder-badge.empty{
  background:var(--c-ede9fe-bg);
  color:var(--c-6b21a8-text);
}
.software-reminder-counts{
  font-size:0.875rem;
  color:var(--c-581c87-text);
  font-weight:500;
}
.software-reminder-counts strong{
  font-weight:700;
  color:var(--c-6b21a8-text);
}
.software-reminder-tip{
  font-size:0.75rem;
  color:var(--c-7e22ce-text);
  background:var(--c-f3e8ff-bg);
  padding:2px 8px;
  border-radius:4px;
  font-weight:500;
}
.software-reminder-text{
  font-size:0.875rem;
  color:var(--muted-text);
}
.software-reminder-text strong{
  color:var(--ink-text);
}
.software-reminder-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.software-reminder-pane{
  border:1px solid var(--c-ede9fe-border);
  background:var(--c-ffffff-bg);
  border-radius:9px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.software-reminder-pane.has-events{
  border-color:var(--c-d8b4fe-border);
  background:var(--c-ffffff-bg);
  box-shadow:0 1px 4px rgba(124,58,237,.06);
}
.pane-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.8125rem;
  font-weight:650;
  color:var(--c-4c1d95-text);
  padding-bottom:5px;
  border-bottom:1px dashed var(--c-f3e8ff-border);
}
.pane-count{
  font-size:0.75rem;
  font-weight:600;
  color:var(--c-7c3aed-text);
}
.pane-empty{
  font-size:0.8125rem;
  color:var(--muted-text);
  padding:6px 2px;
}
.software-reminder-items{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.software-reminder-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--c-e9d5ff-border);
  background:var(--c-fbf8ff-bg);
  border-radius:7px;
  cursor:pointer;
  text-align:left;
  transition:all .15s ease;
  width:100%;
}
.software-reminder-item:hover{
  background:var(--c-f3e8ff-bg);
  border-color:var(--c-a855f7-border);
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(124,58,237,.12);
}
.item-room-slot{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:75px;
  flex-shrink:0;
}
.item-room-pill{
  font-size:0.75rem;
  font-weight:700;
  color:var(--c-6b21a8-text);
  background:var(--c-ede9fe-bg);
  padding:1px 6px;
  border-radius:4px;
  display:inline-block;
  width:fit-content;
}
.item-time{
  font-size:0.75rem;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--c-4c1d95-text);
}
.item-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex-grow:1;
  min-width:0;
}
.item-title{
  font-size:0.875rem;
  color:var(--c-1e1b4b-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.item-person{
  font-size:0.75rem;
  color:var(--c-6b21a8-text);
}
.item-btn-arrow{
  font-size:0.75rem;
  color:var(--c-7c3aed-text);
  font-weight:600;
  white-space:nowrap;
  padding-left:4px;
}

@media(max-width:768px){
  .software-reminder-grid{
    grid-template-columns:1fr;
  }
}

/* ========================================================
   Refactored Reference / Calendar Page Styles
   ======================================================== */
.ref-hero{
  padding:22px 24px;
  background:linear-gradient(135deg, var(--c-f8fafd-bg) 0%, var(--c-edf3fc-bg) 100%);
  border-bottom:1px solid var(--line-border);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.ref-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.ref-hero-title h2{
  font-size:1.3125rem;
  font-weight:750;
  color:var(--ink-text);
  letter-spacing:-0.01em;
}
.ref-hero-title p{
  font-size:0.875rem;
  color:var(--muted-text);
  margin-top:3px;
}
.ref-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--c-ffffff-bg);
  border:1px solid var(--c-bfdbfe-border);
  border-radius:999px;
  padding:6px 14px;
  box-shadow:0 1px 3px rgba(37,99,235,.08);
}
.ref-live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--c-10b981-bg);
  box-shadow:0 0 0 3px rgba(16,185,129,.2);
}
.ref-live-pill strong{
  font-size:0.875rem;
  color:var(--c-1e40af-text);
  font-weight:650;
}
.ref-milestones-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.ref-milestone-card{
  background:var(--c-ffffff-bg);
  border:1px solid var(--line-border);
  border-radius:10px;
  padding:11px 13px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ref-milestone-card:hover{
  border-color:var(--c-93c5fd-border);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.ref-milestone-icon{
  font-size:1.375rem;
  line-height:1;
  flex-shrink:0;
}
.ref-milestone-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ref-milestone-body strong{
  font-size:0.8125rem;
  color:var(--ink-text);
}
.ref-milestone-body span{
  font-size:0.75rem;
  color:var(--muted-text);
}

/* Sections in Reference */
.ref-section{
  padding:20px 24px;
  border-bottom:1px solid var(--line-border);
}
.ref-section:last-child{
  border-bottom:0;
}
.ref-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:8px;
}
.ref-section-title h3{
  font-size:1.0625rem;
  font-weight:700;
  color:var(--ink-text);
  display:flex;
  align-items:center;
  gap:8px;
}
.ref-section-title span{
  font-size:0.8125rem;
  color:var(--muted-text);
}

/* Bell Schedule 3-Column Layout */
.ref-schedule-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.ref-period-block{
  border:1px solid var(--line-border);
  background:var(--c-ffffff-bg);
  border-radius:10px;
  overflow:hidden;
}
.ref-period-block-head{
  padding:10px 14px;
  background:var(--c-f8fafd-bg);
  border-bottom:1px solid var(--line-border);
  font-weight:700;
  font-size:0.875rem;
  color:var(--ink-text);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ref-period-list{
  display:flex;
  flex-direction:column;
}
.ref-period-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 14px;
  border-bottom:1px solid var(--c-f1f4f9-border);
  font-size:0.8125rem;
}
.ref-period-row:last-child{
  border-bottom:0;
}
.ref-period-row .period-tag{
  font-weight:600;
  color:var(--c-374151-text);
}
.ref-period-row .period-time{
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  color:var(--c-1e40af-text);
  font-weight:650;
}
.ref-period-row .period-sub{
  font-size:0.75rem;
  color:var(--muted-text);
}
.ref-period-intermission{
  padding:6px 14px;
  background:var(--c-fafbfc-bg);
  font-size:0.75rem;
  color:var(--c-6b7280-text);
  text-align:center;
  border-bottom:1px dashed var(--c-e5e7eb-border);
  font-weight:500;
}

/* Room & Rules Grid */
.ref-rooms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:14px;
}
.ref-room-card{
  border:1px solid var(--line-border);
  border-radius:10px;
  padding:15px;
  background:var(--c-ffffff-bg);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ref-room-card h4{
  margin:0;
  font-size:0.9375rem;
  font-weight:700;
  color:var(--ink-text);
  display:flex;
  align-items:center;
  gap:6px;
}
.ref-room-pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.ref-room-chip{
  font-size:0.75rem;
  padding:3px 8px;
  background:var(--c-f1f5f9-bg);
  border-radius:6px;
  color:var(--c-334155-text);
  font-weight:500;
}
.ref-rules-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.ref-rule-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:0.875rem;
  line-height:1.55;
}
.ref-rule-tag{
  padding:2px 7px;
  border-radius:5px;
  font-size:0.75rem;
  font-weight:650;
  flex-shrink:0;
  margin-top:1px;
}

/* Calendar Table Enhancement */
.ref-calendar-wrapper{
  overflow:auto;
  border:1px solid var(--line-border);
  border-radius:10px;
  background:var(--c-ffffff-bg);
}
.ref-calendar-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:0.875rem;
}
.ref-calendar-table th{
  background:var(--c-f8fafd-bg);
  padding:10px 14px;
  font-weight:650;
  color:var(--muted-text);
  border-bottom:1px solid var(--line-border);
  text-align:left;
}
.ref-calendar-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--c-f0f3f8-border);
  vertical-align:middle;
}
.ref-calendar-table tr:last-child td{
  border-bottom:0;
}
.ref-calendar-table tr:hover td{
  background:var(--c-fcfdff-bg);
}
.ref-calendar-table tr.current-week td{
  background:var(--c-eff6ff-bg) !important;
  font-weight:550;
}
.ref-calendar-table tr.phase-split td{
  background:var(--c-f8fafd-bg);
  font-size:0.75rem;
  font-weight:700;
  color:var(--c-475569-text);
  letter-spacing:0.04em;
  padding:7px 14px;
  border-top:1px solid var(--line-border);
  border-bottom:1px solid var(--line-border);
}
.ref-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:5px;
  font-size:0.75rem;
  font-weight:600;
  background:var(--c-f1f5f9-bg);
  color:var(--c-334155-text);
}
.ref-badge.active{
  background:var(--c-2563eb-bg);
  color:#ffffff;
}
.ref-badge.holiday{
  background:var(--c-fee2e2-bg);
  color:var(--c-b91c1c-text);
}
.ref-badge.event{
  background:var(--c-fef3c7-bg);
  color:var(--c-b45309-text);
}
.ref-badge.vacation{
  background:var(--c-e0e7ff-bg);
  color:var(--c-4338ca-text);
}

/* Downloads & Resource Cards */
.ref-assets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.ref-asset-card{
  border:1px solid var(--line-border);
  border-radius:10px;
  padding:14px 16px;
  background:var(--c-ffffff-bg);
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:all .15s ease;
}
.ref-asset-card:hover{
  border-color:var(--c-93c5fd-border);
  box-shadow:0 3px 10px rgba(37,99,235,.07);
}
.ref-asset-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ref-asset-icon{
  font-size:1.5rem;
  line-height:1;
}
.ref-asset-type{
  font-size:0.6875rem;
  font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  background:var(--c-f1f5f9-bg);
  color:var(--c-475569-text);
}
.ref-asset-name{
  font-size:0.9375rem;
  font-weight:650;
  color:var(--ink-text);
}
.ref-asset-desc{
  font-size:0.75rem;
  color:var(--muted-text);
  line-height:1.45;
}
.ref-asset-actions{
  display:flex;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
}
.ref-asset-btn{
  flex:1;
  font-size:0.8125rem;
  padding:6px 10px;
  text-align:center;
  border-radius:6px;
  border:1px solid var(--line-border);
  background:var(--c-f8fafc-bg);
  color:var(--c-2563eb-text);
  font-weight:550;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:background .12s, border-color .12s;
}
.ref-asset-btn:hover{
  background:var(--c-eff6ff-bg);
  border-color:var(--c-bfdbfe-border);
}

@media(max-width:900px),(max-height:480px) and (orientation:landscape){
  .ref-hero{padding:16px}
  .ref-section{padding:16px}
  .ref-schedule-grid{grid-template-columns:1fr}
}


/* ========================================================
   PWA & Add to Desktop / Home Screen Styles
   ======================================================== */
.install-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--c-eff6ff-bg);
  border:1px solid var(--c-bfdbfe-border);
  color:var(--c-1d4ed8-text);
  font-weight:600;
  transition:all .15s ease;
}
.install-btn:hover{
  background:var(--c-dbeafe-bg);
  border-color:var(--c-93c5fd-border);
  color:var(--c-1e40af-text);
}
.install-btn svg{
  flex-shrink:0;
  stroke:var(--c-2563eb-text);
}
.install-btn.installed{
  background:var(--c-f1f5f9-bg);
  border-color:var(--c-cbd5e1-border);
  color:var(--c-64748b-text);
  cursor:default;
}
.install-btn.installed svg{
  stroke:var(--c-10b981-text);
}

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

.install-guide-box{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.install-guide-app{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-border);
}
.install-guide-app-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.install-guide-app-info strong{
  font-size:1.0625rem;
  color:var(--ink-text);
}
.install-pwa-badge{
  font-size:0.75rem;
  color:var(--c-2563eb-text);
  background:var(--c-eff6ff-bg);
  border:1px solid var(--c-bfdbfe-border);
  padding:2px 8px;
  border-radius:999px;
  width:fit-content;
  font-weight:550;
}
.install-tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
}
.install-tab-btn{
  padding:7px 4px;
  font-size:0.78rem;
  font-weight:600;
  border:1px solid var(--line-border);
  background:var(--c-f8fafc-bg);
  color:var(--muted-text);
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  transition:all .12s;
}
.install-tab-btn.active{
  background:var(--c-2563eb-bg);
  color:#ffffff;
  border-color:var(--c-2563eb-border);
  box-shadow:0 1px 3px rgba(37,99,235,.2);
}
.install-steps-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.install-step-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  background:var(--c-f8fafc-bg);
  border-radius:8px;
  border:1px solid var(--c-e2e8f0-border);
  font-size:0.875rem;
  line-height:1.55;
  color:var(--ink-text);
}
.install-step-num{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--c-2563eb-bg);
  color:#ffffff;
  font-size:0.75rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}
.install-alert{
  padding:10px 12px;
  border-radius:8px;
  background:var(--c-fef3c7-bg);
  border:1px solid var(--c-fde68a-border);
  color:var(--c-92400e-text);
  font-size:0.8125rem;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:10px;
}
@media(max-width:600px){
  .install-tabs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.install-guide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-border);
}

.install-guide-footer-tip {
  font-size: 0.8125rem;
  color: var(--muted-text);
  line-height: 1.45;
  flex: 1;
}

.install-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 42px;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 9px;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--c-2563eb-bg) 0%, var(--c-1d4ed8-bg) 100%);
  border: 1px solid var(--c-1d4ed8-border);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
  transition: all 0.15s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.install-close-btn:hover {
  background: var(--c-1d4ed8-bg);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.install-close-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

@media(max-width:600px){
  .install-guide-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
  }
  .install-guide-footer-tip {
    text-align: center;
    font-size: 0.75rem;
  }
  .install-close-btn {
    width: 100%;
    height: 44px;
    font-size: 1rem;
  }
}


/* ========================================================
   Relocation to Sanjiao (润杰迁三教) Styles
   ======================================================== */
.top-action-btn.relocation-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--c-f5f3ff-bg);
  border:1px solid var(--c-ddd6fe-border);
  color:var(--c-6d28d9-text);
  font-weight:600;
  transition:all .15s ease;
}
.top-action-btn.relocation-btn:hover{
  background:var(--c-ede9fe-bg);
  border-color:var(--c-c4b5fd-border);
  color:var(--c-5b21b6-text);
}
.top-action-btn.relocation-btn svg{
  flex-shrink:0;
  stroke:var(--c-7c3aed-text);
}

.tag.orange{
  background:var(--c-ffedd5-bg);
  color:var(--c-c2410c-text);
  border:1px solid var(--c-fed7aa-border);
}

.inline-notice-btn{
  background:var(--c-ffffff-bg);
  border:1px solid var(--c-f59e0b-border);
  color:var(--c-b45309-text);
  font-weight:600;
  font-size:0.75rem;
  padding:2px 8px;
  border-radius:5px;
  cursor:pointer;
  margin-left:6px;
}
.inline-notice-btn:hover{
  background:var(--c-fef3c7-bg);
}

/* Detail modal relocation banner */
.relo-alert-box{
  background:linear-gradient(135deg, var(--c-f5f3ff-bg) 0%, var(--c-eff6ff-bg) 100%);
  border:1px solid var(--c-c4b5fd-border);
  border-left:4px solid var(--c-7c3aed-border);
  border-radius:9px;
  padding:13px 15px;
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.relo-alert-head{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.relo-badge{
  font-size:0.75rem;
  font-weight:700;
  background:var(--c-7c3aed-bg);
  color:#ffffff;
  padding:2px 8px;
  border-radius:4px;
}
.relo-alert-title{
  font-size:0.9375rem;
  color:var(--c-1e1b4b-text);
}
.relo-room-dest{
  color:var(--c-6d28d9-text);
  font-weight:750;
  background:var(--c-ede9fe-bg);
  padding:1px 7px;
  border-radius:5px;
  border:1px solid var(--c-ddd6fe-border);
}
.relo-alert-desc{
  margin:0;
  font-size:0.8125rem;
  color:var(--c-4c1d95-text);
  line-height:1.55;
}
.relo-quick-btn{
  font-size:0.78125rem;
  font-weight:600;
  color:var(--c-4338ca-text);
  background:var(--c-ffffff-bg);
  border:1px solid var(--c-c7d2fe-border);
  border-radius:6px;
  padding:5px 11px;
  cursor:pointer;
  width:fit-content;
  transition:all .12s;
}
.relo-quick-btn:hover{
  background:var(--c-eef2ff-bg);
  border-color:var(--c-818cf8-border);
}

/* Relocation Dialog Modal */
dialog.relocation-modal{
  width:min(1100px, calc(100vw - 20px));
  max-width:calc(100vw - 20px);
}
.relo-modal-body{
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.relo-info-card{
  background:var(--c-fcfaff-bg);
  border:1px solid var(--c-e9d5ff-border);
  border-radius:10px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.relo-info-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.relo-info-head strong{
  font-size:0.9375rem;
  color:var(--c-2e1065-text);
}
.relo-info-badge{
  font-size:0.75rem;
  font-weight:700;
  color:var(--c-6b21a8-text);
  background:var(--c-f3e8ff-bg);
  border:1px solid var(--c-d8b4fe-border);
  padding:2px 8px;
  border-radius:999px;
}
.relo-info-desc{
  margin:0;
  font-size:0.8125rem;
  color:var(--c-4c1d95-text);
  line-height:1.6;
}
.relo-info-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding-top:6px;
  border-top:1px dashed var(--c-e9d5ff-border);
}
.relo-download-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.8125rem;
  font-weight:600;
  color:var(--c-15803d-text);
  background:var(--c-f0fdf4-bg);
  border:1px solid var(--c-bbf7d0-border);
  padding:5px 12px;
  border-radius:6px;
  text-decoration:none;
  transition:all .12s;
}
.relo-download-btn:hover{
  background:var(--c-dcfce7-bg);
  border-color:var(--c-86efac-border);
}
.relo-count-indicator{
  font-size:0.8125rem;
  color:var(--muted-text);
  font-weight:550;
}

/* Toolbar & Filter Chips */
.relo-toolbar{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.relo-search-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.relo-search-wrapper svg{
  position:absolute;
  left:12px;
  stroke:var(--muted-text);
  pointer-events:none;
}
.relo-search-wrapper input{
  width:100%;
  height:40px;
  padding:6px 12px 6px 36px;
  font-size:0.875rem;
  border:1px solid var(--line-border);
  border-radius:8px;
  background:var(--c-ffffff-bg);
}
.relo-search-wrapper input:focus{
  border-color:var(--c-7c3aed-border);
  outline:2px solid var(--c-ddd6fe-border);
}
.relo-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.relo-chip{
  font-size:0.78125rem;
  font-weight:600;
  padding:5px 11px;
  border-radius:6px;
  border:1px solid var(--line-border);
  background:var(--c-f8fafc-bg);
  color:var(--muted-text);
  cursor:pointer;
  transition:all .12s;
}
.relo-chip:hover{
  background:var(--c-f1f5f9-bg);
  color:var(--ink-text);
}
.relo-chip.active{
  background:var(--c-7c3aed-bg);
  color:#ffffff;
  border-color:var(--c-7c3aed-border);
  box-shadow:0 1px 3px rgba(124,58,237,.2);
}

/* Relocation Table */
.relo-table-wrap{
  max-height:50vh;
  overflow:auto;
  border:1px solid var(--line-border);
  border-radius:9px;
  background:var(--c-ffffff-bg);
}
.relo-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:0.8125rem;
}
.relo-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--c-f8fafd-bg);
  padding:10px 12px;
  font-weight:650;
  color:var(--ink-text);
  border-bottom:1px solid var(--line-border);
  white-space:nowrap;
}
.relo-table td{
  padding:9px 12px;
  border-bottom:1px solid var(--c-f0f3f8-border);
  vertical-align:middle;
}
.relo-table tr:hover td{
  background:var(--c-faf8ff-bg);
}
.relo-course-name{
  display:block;
  font-size:0.875rem;
  color:var(--ink-text);
}
.relo-course-code{
  display:block;
  font-size:0.71875rem;
  color:var(--muted-text);
}
.relo-orig-pill{
  display:inline-block;
  font-size:0.75rem;
  padding:2px 7px;
  border-radius:4px;
  background:var(--c-f1f5f9-bg);
  color:var(--c-475569-text);
  border:1px solid var(--c-e2e8f0-border);
  white-space:nowrap;
}
.relo-dest-pill{
  display:inline-block;
  font-size:0.8125rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:5px;
  white-space:nowrap;
}
.relo-dest-pill.room-blue{
  background:var(--c-eff6ff-bg);
  color:var(--c-1d4ed8-text);
  border:1px solid var(--c-bfdbfe-border);
}
.relo-dest-pill.room-purple{
  background:var(--c-f5f3ff-bg);
  color:var(--c-6d28d9-text);
  border:1px solid var(--c-ddd6fe-border);
}
.relo-week-pill{
  font-size:0.75rem;
  font-weight:600;
  color:var(--c-374151-text);
  background:var(--c-f3f4f6-bg);
  padding:2px 6px;
  border-radius:4px;
  white-space:nowrap;
}

/* Reference page relocation section */
.ref-relo-card{
  border:1px solid var(--c-e9d5ff-border);
  border-radius:10px;
  background:var(--c-ffffff-bg);
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ref-relo-summary-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.relo-mapping-card{
  background:var(--c-fbf9ff-bg);
  border:1px solid var(--c-ede9fe-border);
  border-radius:8px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.relo-mapping-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.relo-from-tag{
  font-size:0.75rem;
  padding:2px 7px;
  border-radius:4px;
  background:var(--c-e2e8f0-bg);
  color:var(--c-334155-text);
  font-weight:600;
}
.relo-arrow{
  font-size:0.875rem;
  color:var(--c-7c3aed-text);
  font-weight:700;
}
.relo-to-tag{
  font-size:0.8125rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:5px;
  background:var(--c-7c3aed-bg);
  color:#ffffff;
}
.relo-mapping-desc{
  margin:0;
  font-size:0.75rem;
  color:var(--muted-text);
  line-height:1.45;
}
.ref-relo-notice-bar{
  margin-top:10px;
  padding:10px 12px;
  border-radius:7px;
  background:var(--c-f5f3ff-bg);
  border:1px solid var(--c-ddd6fe-border);
  font-size:0.8125rem;
  color:var(--c-4c1d95-text);
  line-height:1.55;
}
.ref-relo-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-top:4px;
}

@media(max-width:768px){
  .ref-relo-summary-grid{
    grid-template-columns:1fr;
  }
}