:root {
  --step--2: clamp(10px, 0.5vw, 14px);
  --step--1: clamp(12px, 0.7vw, 16px);
  --step-0:  clamp(14px, 0.9vw, 18px);
  --step-1:  clamp(18px, 1.2vw, 24px);
  --step-2:  clamp(22px, 1.5vw, 28px);
  --step-3:  clamp(28px, 2vw,   36px);
  --step-4:  clamp(36px, 3vw,   48px);
  --step-5:  clamp(48px, 4vw,   64px);
  --safe: max(24px, 2.5vmin);
  --g: max(16px, 1.6vmin);
  --radius: 12px;
  --elev: 0 10px 30px rgba(0,0,0,0.35);

  --bg: #0b0d10;        /* Dark default */
  --panel: #13171c;
  --muted: #9aa6b2;
  --text: #e6edf3;
  --accent: #4cc9f0;
  --ok: #2ecc71;
  --warn: #ffd166;
  --bad: #ef476f;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans Thai, "Noto Sans", Helvetica, Arial;
  font-size: var(--step-0);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shell { position: fixed; inset: 0; padding: var(--safe); display: grid; grid-template-rows: auto 1fr auto; gap: var(--g); }
.topbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--g); }
.brand { font-size: var(--step-3); font-weight: 800; }
.brand small { font-size: var(--step--1); color: var(--muted); }
.clock { padding: .5em .9em; background: var(--panel); border-radius: var(--radius); box-shadow: var(--elev); font-size: var(--step-1); display:flex;gap:.6em; }
.clock .big { font-size: var(--step-3); font-weight: 700; }

.status-chip { display:inline-flex; align-items:center; gap:.6em; background: rgba(255,255,255,.06); padding:.6em 1em; border-radius:999px; font-size:var(--step-0); color:var(--muted); }
.dot { width:.9em; height:.9em; border-radius:50%; background:var(--ok); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); gap: var(--g); }
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--elev); padding: calc(var(--g) * 1.1); overflow: hidden; display:flex; flex-direction:column; min-height:160px; }

.span-3 { grid-column: span 3; }
.span-12 { grid-column: 1 / -1; }

iframe { width:100%; height:100%; border:none; border-radius: var(--radius); background: #000; }

.bottombar { display:flex; justify-content:space-between; align-items:center; font-size:var(--step-0); color:var(--muted); }
.kbd { background: rgba(255,255,255,.06); padding:.4em .6em; border-radius:8px; }

.fullpage { position:fixed; inset:0; background:var(--bg); display:none; z-index:1000; }
.fullpage iframe { width:100%; height:100%; border:none; border-radius:0; }

.quadpage { display:flex; height:100%; gap:0; }
.quadpage iframe { flex:1; height:100%; border:none; border-radius:0; }

.fade-enter { animation: fadeIn .35s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* Remote UI */
.remote-shell { 
  position: fixed; 
  inset: 0; 
  padding: min(5vmin, 16px); 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
  background: #0b0d10; 
  color: var(--text); 
  overflow: hidden;
}

.remote-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.remote-title { font-size: clamp(18px, 4vw, 24px); font-weight: 800; }
.remote-room { 
  color: var(--muted); 
  font-size: clamp(12px, 3vw, 14px); 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

/* Touch Pad Section */
.touchpad-section {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--muted);
}

.touch-pad {
  width: 100%;
  height: 180px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  touch-action: none;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.touch-indicator {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.touch-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  gap: 8px;
}

.touch-btn {
  flex: 1;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius);
  color: var(--text);
  font-size: clamp(12px, 3vw, 14px);
  cursor: pointer;
}

.touch-btn:active {
  background: var(--accent);
}

/* Remote Buttons Section */
.remote-section {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.remote-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  flex: 1;
  margin-bottom: 12px;
}

.remote-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.remote-grid {
  display: flex;
  gap: 12px;
  width: max-content;
  padding-bottom: 8px;
}

.remote-btn {
  scroll-snap-align: start;
  min-width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  box-shadow: var(--elev);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

.remote-btn:active {
  transform: scale(0.95);
  background: var(--accent);
}

.scroll-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s;
}

.scroll-dot.active {
  background: var(--accent);
  transform: scale(1.2);
}

/* Room change button */
.room-change-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
}

.room-change-btn:active {
  opacity: 0.8;
}

/* Error states */
.error-message {
  color: var(--bad);
  padding: 1em;
  background: rgba(239, 71, 111, 0.1);
  border-radius: var(--radius);
  margin: 1em 0;
  font-size: var(--step--1);
}

.qr-placeholder {
  width: 128px;
  height: 128px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
  text-align: center;
}

html, body, button, a { cursor: none; }

/* Responsive adjustments */
@media (max-height: 700px) {
  .touch-pad {
    height: 140px;
  }
  
  .remote-btn {
    min-width: 70px;
    height: 70px;
    font-size: clamp(14px, 3.5vw, 18px);
  }
}

@media (max-height: 600px) {
  .touch-pad {
    height: 120px;
  }
  
  .touchpad-section,
  .remote-section {
    padding: 12px;
  }
}