:root{
  --bg:#f3eae4; --panel:#f1e6df; --card:#f6ede8; --text:#6b7280; --muted:#9ca3af; --accent:#6b7280;
  --shadow:0 18px 40px rgba(0,0,0,.15);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{
  height:100vh;
  width:100vw;
  overflow:hidden;
}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; align-items:center; justify-content:center; 
  padding:clamp(8px, 1.5vh, 16px) clamp(8px, 1.5vw, 16px);
  height:100vh;
  overflow:hidden;
}
.container{ 
  width:min(1400px,95vw); 
  max-width:100%;
  max-height:100vh;
  overflow:hidden;
}
.shell{
  background:var(--panel);
  border-radius:clamp(24px, 3vw, 40px);
  padding:clamp(16px, 2.5vh, 24px) clamp(20px, 2.5vw, 28px) clamp(12px, 2vh, 20px);
  box-shadow:var(--shadow);
  width:100%;
  max-height:calc(100vh - clamp(16px, 3vh, 32px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.brand{ text-align:center; margin-bottom:clamp(10px, 1.5vw, 14px); position:relative }
.brand-img{ max-width:min(420px, 30vw); width:clamp(50%, 65%, 70%); height:auto; display:inline-block }
.clock-top-right{
  position:absolute; top:0; right:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:clamp(4px, 0.8vw, 8px);
  padding:clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 20px);
}
.content-grid{
  margin-top:clamp(8px, 1.2vh, 12px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.5vw, 28px);
  flex:1;
  min-height:0;
  overflow:hidden;
}
.left-column{ 
  display:flex; 
  flex-direction:column; 
  gap:clamp(20px, 3vh, 35px); 
  padding:clamp(8px, 1.5vh, 12px) clamp(8px, 1.2vw, 12px);
  overflow:hidden;
  min-height:0;
}
.dept-title{ 
  font-size:clamp(28px, 3.5vw, 45px); 
  font-weight:600; 
  color:var(--accent); 
  line-height:1.1;
  margin-bottom:clamp(4px, 0.8vh, 8px);
}
.count-card{
  margin-top:clamp(8px, 1.5vh, 12px);
  background:var(--card);
  border-radius:clamp(20px, 2.5vw, 28px);
  padding:clamp(16px, 2.5vh, 24px) clamp(18px, 2.5vw, 28px);
  width:min(450px, 100%);
  max-width:100%;
  box-shadow:var(--shadow);
  flex-shrink:0;
}
.count-row{
  display:flex;
  align-items:center;
  gap:clamp(20px, 3vw, 36px);
  flex-wrap:wrap;
}
.count-metric{
  display:flex;
  align-items:baseline;
  gap:clamp(10px, 1.5vw, 16px);
  min-width:clamp(120px, 15vw, 180px);
}
.count-current{
  font-size:clamp(50px, 7vw, 95px);
  font-weight:800;
  color:#2f3c4e;
  line-height:0.85;
}
.count-total{
  font-size:clamp(24px, 3.5vw, 42px);
  color:#9ca3af;
  font-weight:600;
}
.count-meter{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 1.2vw, 12px);
  min-width:200px;
}
.progress{
  position:relative;
  width:100%;
  height:clamp(20px, 2.5vw, 32px);
  border-radius:clamp(18px, 2.5vw, 26px);
  background:#e8f5ec;
  overflow:hidden;
}
.progress-fill{
  position:absolute;
  inset:0;
  width:0;
  border-radius:clamp(18px, 2.5vw, 26px);
  background:linear-gradient(90deg,#2fb773,#a8f0c1);
  transition:width .3s ease-in-out;
}
.count-percent{
  font-size:clamp(22px, 3vw, 36px);
  font-weight:600;
  color:#2f3c4e;
  text-align:right;
}
.right-column{ padding:clamp(8px, 1.2vw, 12px) }
.clock-time{
  font-size:clamp(32px, 4.5vw, 52px); font-weight:700; color:var(--accent); letter-spacing:clamp(1px, 0.2vw, 2px);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.clock-date{
  font-size:clamp(18px, 2.5vw, 28px); font-weight:600; color:var(--muted);
  line-height:1.2;
}
.lux-container{ 
  display:flex; 
  flex-direction:column; 
  gap:clamp(10px, 1.8vh, 16px);
  height:100%;
  min-height:0;
  overflow:hidden;
}
.lux-title{ 
  font-size:clamp(28px, 3.5vw, 45px); 
  font-weight:700; 
  color:var(--accent);
  flex-shrink:0;
}
.lux-card-surface{
  background:var(--card); 
  border-radius:clamp(20px, 2.5vw, 28px); 
  padding:clamp(12px, 2vh, 18px); 
  box-shadow:var(--shadow);
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
.label{ color:var(--muted); font-size:14px; margin-bottom:8px }
.value{ font-size:48px; font-weight:800; color:var(--accent) }
.meta{ margin-top:16px; display:flex; gap:12px; align-items:center }
#refresh{ cursor:pointer; padding:8px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.06); background:#efe6e0; color:#6b7280 }
#refresh:hover{ filter:brightness(1.03) }
#updated,#lux-updated{ display:none }
.error{ margin-top:12px; color:#fecaca }
.lux-card{ margin-top:20px }
.lux-list{
  list-style:none; 
  padding:0; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
  gap:clamp(8px, 1.2vh, 12px);
}
.lux-list li{
  padding:clamp(10px, 1.8vh, 16px) clamp(14px, 2.2vw, 20px); 
  border-radius:clamp(16px, 2.2vw, 22px);
  border:1px solid rgba(0,0,0,.06);
  background:#efe7e2;
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  color:var(--text); 
  font-weight:600; 
  letter-spacing:.35px;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
  gap:clamp(6px, 1vw, 10px);
  flex-shrink:0;
}
.lux-name{ font-weight:600; font-size:clamp(20px, 3vw, 30px) }
.lux-status{ font-weight:700; font-size:clamp(18px, 2.8vw, 28px) }
.lux-free{ border-color:rgba(8,185,140,.18); background:#e8f7f1 }
.lux-free .lux-status{ color:#10b981 }
.lux-occupied{ border-color:rgba(248,113,113,.18); background:#faeeed }
.lux-occupied .lux-status{ color:#f87171 }
.lux-empty{ margin-top:8px; color:var(--muted) }
.lux-meta{ margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); justify-content:space-between }
/* Phone/Tablet breakpoints - only affect smaller screens */
@media (max-width:768px){
  body{ 
    padding:clamp(4px, 1vh, 8px) clamp(4px, 1vw, 8px);
    overflow-x:hidden;
    overflow-y:auto;
    align-items:flex-start;
  }
  .container{ 
    width:100vw; 
    max-height:none;
    overflow:visible;
  }
  .shell{ 
    padding:clamp(10px, 1.8vh, 14px) clamp(10px, 1.8vw, 14px);
    max-height:none;
    min-height:auto;
    border-radius:clamp(20px, 3vw, 32px);
    overflow:visible;
  }
  .brand{ 
    margin-bottom:clamp(8px, 1.2vh, 12px);
    position:relative;
  }
  .brand-img{ 
    width:clamp(50%, 65%, 75%); 
    max-width:min(320px, 70vw);
    height:auto;
  }
  .clock-top-right{ 
    position:static; 
    align-items:center; 
    padding:clamp(6px, 1vh, 10px) 0;
    margin-bottom:clamp(4px, 0.8vh, 8px);
    width:100%;
  }
  .clock-time{ 
    font-size:clamp(32px, 5vw, 48px);
  }
  .clock-date{ 
    font-size:clamp(16px, 2.5vw, 24px);
  }
  .content-grid{ 
    grid-template-columns:1fr; 
    gap:clamp(16px, 2.5vh, 24px);
    margin-top:clamp(8px, 1.2vh, 12px);
    overflow:visible;
    min-height:auto;
  }
  .left-column{ 
    gap:clamp(16px, 2.5vh, 28px);
    padding:clamp(6px, 1.2vh, 10px) clamp(6px, 1.2vw, 10px);
    overflow:visible;
    min-height:auto;
    order:1;
  }
  .right-column{ 
    padding:clamp(6px, 1vh, 10px);
    order:2;
  }
  .dept-title{ 
    font-size:clamp(24px, 3.5vw, 36px); 
    margin-bottom:clamp(4px, 0.8vh, 8px);
  }
  .count-card{ 
    width:100%; 
    max-width:100%;
    padding:clamp(14px, 2.2vh, 20px) clamp(16px, 2.5vw, 24px);
    margin-top:clamp(8px, 1.2vh, 12px);
  }
  .count-row{ 
    flex-direction:column; 
    align-items:stretch; 
    gap:clamp(14px, 2vh, 20px);
  }
  .count-metric{ 
    min-width:auto; 
    justify-content:center;
    width:100%;
  }
  .count-current{ 
    font-size:clamp(42px, 6.5vw, 72px);
  }
  .count-total{ 
    font-size:clamp(22px, 3.5vw, 38px);
  }
  .count-meter{ 
    min-width:auto;
    width:100%;
  }
  .count-percent{ 
    font-size:clamp(20px, 3vw, 32px);
    text-align:center;
  }
  .progress{ 
    height:clamp(20px, 2.8vw, 30px);
  }
  .lux-container{ 
    gap:clamp(10px, 1.8vh, 16px);
  }
  .lux-title{ 
    font-size:clamp(24px, 3.5vw, 36px);
  }
  .lux-card-surface{ 
    padding:clamp(12px, 2vh, 16px);
  }
  .lux-name{ 
    font-size:clamp(20px, 3vw, 28px);
  }
  .lux-status{ 
    font-size:clamp(18px, 2.8vw, 26px);
  }
  .lux-list li{ 
    padding:clamp(12px, 2vh, 16px) clamp(14px, 2.5vw, 20px);
    min-height:clamp(48px, 7vh, 60px);
  }
}

/* Small phones */
@media (max-width:480px){
  body{ 
    padding:clamp(2px, 0.5vh, 4px);
  }
  .container{ 
    width:100vw;
  }
  .shell{ 
    padding:clamp(8px, 1.5vh, 12px) clamp(8px, 1.5vw, 12px);
    border-radius:clamp(16px, 2.5vw, 24px);
    max-height:calc(100vh - clamp(4px, 1vh, 8px));
  }
  .brand-img{ 
    width:clamp(55%, 70%, 80%); 
    max-width:min(280px, 75vw);
  }
  .content-grid{ 
    gap:clamp(12px, 2vh, 20px); 
    margin-top:clamp(6px, 1vh, 10px);
  }
  .left-column{ 
    gap:clamp(14px, 2.2vh, 24px);
    padding:clamp(4px, 1vh, 8px) clamp(4px, 1vw, 8px);
  }
  .dept-title{ 
    font-size:clamp(22px, 3vw, 32px);
  }
  .count-card{ 
    padding:clamp(12px, 2vh, 18px) clamp(14px, 2.2vw, 20px);
  }
  .count-current{ 
    font-size:clamp(36px, 5.5vw, 64px);
  }
  .count-total{ 
    font-size:clamp(20px, 3vw, 34px);
  }
  .count-percent{ 
    font-size:clamp(18px, 2.8vw, 28px);
  }
  .progress{ 
    height:clamp(18px, 2.5vw, 26px);
  }
  .lux-title{ 
    font-size:clamp(22px, 3vw, 32px);
  }
  .lux-card-surface{ 
    padding:clamp(10px, 1.8vh, 14px);
  }
  .lux-name{ 
    font-size:clamp(18px, 2.8vw, 26px);
  }
  .lux-status{ 
    font-size:clamp(16px, 2.5vw, 24px);
  }
  .lux-list li{ 
    flex-direction:column; 
    align-items:flex-start; 
    gap:clamp(8px, 1.2vh, 12px);
    padding:clamp(10px, 1.8vh, 14px) clamp(12px, 2vw, 16px);
    min-height:auto;
  }
}

/* Very small phones */
@media (max-width:360px){
  .count-current{ 
    font-size:clamp(32px, 5vw, 56px);
  }
  .dept-title{ 
    font-size:clamp(20px, 2.8vw, 28px);
  }
  .lux-title{ 
    font-size:clamp(20px, 2.8vw, 28px);
  }
}

/* Fullscreen/4K displays */
@media (min-width:1920px){
  .container{ width:min(1600px,90vw) }
}

@media (min-width:2560px){
  .container{ width:min(1800px,85vw) }
}

/* Chrome fullscreen optimization */
@media (display-mode: fullscreen){
  body{ 
    padding:clamp(12px, 2vh, 20px) clamp(12px, 2vw, 24px);
    overflow:hidden;
  }
  .container{ 
    width:min(1600px,92vw);
    max-height:100vh;
  }
  .shell{
    max-height:calc(100vh - clamp(24px, 4vh, 40px));
  }
}

/* Ensure proper scaling in Chrome */
@supports (-webkit-appearance: none){
  html{ -webkit-text-size-adjust:100%; }
  body{ -webkit-font-smoothing:antialiased; }
}