:root{
  --bg:#fff0f6;
  --card:#fff2f8;
  --accent:#ff66a3;
  --muted:#333;
  --text:#111;
  --glass: rgba(255,255,255,0.0);
  --shadow: 0 4px 8px rgba(0,0,0,0.25);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent}
html,body,#app{height:100%;width:100%;margin:0;background:#ffe6f0}
main{display:flex;flex-direction:column;height:100vh;padding:14px;gap:12px}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:700}
.logo img{width:260px;height:auto;border-radius:8px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,0.12)}
.weird-logo{
  transform:skewX(-8deg) rotate(-6deg) scaleX(1.18);
  filter:hue-rotate(250deg) saturate(140%) contrast(110%) drop-shadow(6px 8px 6px rgba(0,0,0,0.18));
  border-radius:6px;
  outline:3px dashed rgba(255,102,163,0.6);
}
.brand{font-size:20px;letter-spacing:0; color:#ff0077}
.icon-btn{background:#fff;padding:10px;border:3px dashed #ff66a3;color:var(--text);border-radius:6px;font-size:16px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}

/* Main card */
.main-card{flex:1;background:var(--card);border:3px dashed #ff66a3;border-radius:8px;padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.status-row{display:flex;align-items:center;gap:8px}
.status-dot{width:14px;height:14px;border-radius:2px;background:#ff4d4f;box-shadow:0 0 0 #ff4d4f}
.status-text{color:var(--muted);font-size:13px}

/* Big toggle */
.big-toggle{margin:8px auto 0; width:360px; height:88px; border-radius:12px;background:#fff0f6; display:flex;align-items:center;justify-content:center;border:4px solid #ff66a3}
.toggle-inner{position:relative;width:320px;height:68px;background:#fff;border-radius:8px;padding:8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border:3px dotted #ff99c2}
.toggle-label{color:#ff0077;font-weight:800;padding-left:12px;font-size:20px}
.toggle-circle{width:56px;height:56px;border-radius:6px;background:#ff66a3;box-shadow:0 6px 0 rgba(0,0,0,0.25);margin-right:8px;transform:translateX(-8px);transition:transform .18s linear}

/* When connected */
.big-toggle.connected .toggle-inner{background:#fff6f9}
.big-toggle.connected .toggle-label{color:#00aa00}
.big-toggle.connected .toggle-circle{transform:translateX(160px);background:#00cc66}

/* Selection row */
.selection-row{display:flex;gap:10px;align-items:center}
.selection-row label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.server-select, .protocol-select{flex:1}
select{width:100%;appearance:none;background:#fff;border:2px solid #ff99c2;color:var(--text);padding:12px;border-radius:6px;font-size:14px}

/* Stats */
.stats{display:flex;gap:8px;justify-content:space-between;margin-top:6px}
.stat{flex:1;background:transparent;padding:8px;border-radius:6px;text-align:center;border:2px dashed #ff99c2}
.stat-value{color:var(--text);font-weight:900}
.stat-label{color:var(--muted);font-size:12px;margin-top:4px}

/* Canvas */
canvas{width:100%;height:110px;border-radius:6px;background:#fff0f6;display:block;border:2px dashed #ff99c2}

/* Bottom nav */
.bottom-bar{display:flex;gap:8px;justify-content:space-around;align-items:center}
.nav-btn{flex:1;background:#fff;border:3px dashed #ff99c2;color:#ff0077;padding:10px;border-radius:8px;font-weight:800}
.nav-btn.active{background:#ff66a3;color:#fff}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:#ff66a3;padding:10px 14px;border-radius:10px;color:#fff;opacity:0;pointer-events:none;transition:opacity .25s}

/* Responsive touches */
@media (max-width:420px){
  .brand{font-size:16px}
  .big-toggle{width:320px;height:76px}
  .toggle-inner{width:280px;height:56px}
}