/* Roomboard — design tokens + components.
   One layout; themes are token overrides. Cards are square. */

:root{
  --header: 72px;
  --margin: 18px;
  --gap: 10px;
  --card: 186px;
  --radius: 3px;
  --font: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
}
/* default — the house */
[data-theme="default"]{
  --bg1:#FBF9F4; --bg2:#F1ECE2; --ink:#221F1B; --muted:#8B857B; --line:#DCD5C8; --chip:#E9E3D7;
  --off:#E7E1D6; --offink:#5c554a; --icon:#9A9184; --dotoff:#CFC7B8;
  --accent:#2F4C66; --accent-ink:#fff;
  --on1:#33526e; --on2:#2A4359; --onink:#F7F4EE; --onicon:#E7C98F; --ondot:#E7C98F;
}
/* office — bluer blue, darker wood, lighter desk */
[data-theme="office"]{
  --bg1:#F4F6F7; --bg2:#E9EDEF; --ink:#14202A; --muted:#66727C; --line:#CFD9DF; --chip:#DEE6EA;
  --off:#DFE6EA; --offink:#3f4c56; --icon:#7E8C96; --dotoff:#BEC9D0;
  --accent:#1E4E7A; --accent-ink:#fff;
  --on1:#215a8c; --on2:#173f63; --onink:#F0F5F9; --onicon:#C9A15E; --ondot:#C9A15E;
}
[data-theme="casita"]{
  --bg1:#F3F8FA; --bg2:#E6F0F4; --ink:#132630; --muted:#5E7A86; --line:#C9DCE4; --chip:#DCEBF1;
  --off:#DCEAF0; --offink:#3c5763; --icon:#7BA0AE; --dotoff:#B7CEDA;
  --accent:#2E6E8E; --accent-ink:#fff;
  --on1:#3E86A8; --on2:#2E6E8E; --onink:#F0F8FB; --onicon:#BFD8E6; --ondot:#BFD8E6;
}
[data-theme="masterbath"]{
  --bg1:#FAF5EA; --bg2:#F0E7D4; --ink:#241f16; --muted:#847659; --line:#DFD3B9; --chip:#EDE3CE;
  --off:#EDE4D1; --offink:#5c5340; --icon:#9c8f74; --dotoff:#D3C6A9;
  --accent:#A8862F; --accent-ink:#fff;
  --on1:#C9A24A; --on2:#A8862F; --onink:#2b2110; --onicon:#3a2c12; --ondot:#3a2c12;
}
[data-theme="sophia"]{
  --bg1:#FCF2F8; --bg2:#F4E6F2; --ink:#3A2340; --muted:#9A6F93; --line:#E7CFE2; --chip:#F3DFEE;
  --off:#F3E1EE; --offink:#6b4c66; --icon:#B98BB2; --dotoff:#E0BFD8;
  --accent:#A24E9E; --accent-ink:#fff;
  --on1:#B85C9E; --on2:#8E5AC8; --onink:#FFF4FB; --onicon:#FFE3F4; --ondot:#FFE3F4;
  --font:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
}
[data-theme="misha"]{
  --bg1:#F2F2F0; --bg2:#E6E6E3; --ink:#111; --muted:#6b6b6b; --line:#CFCFCB; --chip:#E3E3DF;
  --off:#E4E4E0; --offink:#333; --icon:#8a8a86; --dotoff:#BFBFBA;
  --accent:#111; --accent-ink:#fff;
  --on1:#2b2b2b; --on2:#111; --onink:#fff; --onicon:#dcdcdc; --ondot:#dcdcdc;
}

*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#0b0b0d;font-family:var(--font);overflow:hidden}
.stage{
  width:800px;height:1280px;transform-origin:center center;position:absolute;left:50%;top:50%;
  background:linear-gradient(170deg,var(--bg1),var(--bg2));color:var(--ink);
  padding:var(--margin);display:flex;flex-direction:column;
}

/* header */
.head{height:var(--header);flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.head .left{display:flex;align-items:baseline;gap:16px}
.head .time{font-size:48px;font-weight:600;letter-spacing:-2px}
.head .room{font-size:22px;color:var(--muted);font-weight:500}
.head .right{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:19px}
.iconbtn{width:46px;height:46px;border-radius:var(--radius);background:var(--chip);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
.lang{display:inline-flex;background:var(--chip);border-radius:999px;padding:3px}
.lang span{padding:7px 15px;border-radius:999px;font-size:16px;color:var(--muted);cursor:pointer}
.lang span.a{background:var(--accent);color:var(--accent-ink)}

/* grid */
.grid{flex:1;display:grid;gap:var(--gap);justify-content:center;align-content:center}
.slot{width:var(--card);height:var(--card)}

/* cards */
.card{
  width:100%;height:100%;border-radius:var(--radius);background:var(--off);border:1px solid var(--line);
  padding:16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;
  overflow:hidden;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.05);user-select:none;
}
.card .dot{position:absolute;top:14px;right:14px;width:13px;height:13px;border-radius:50%;background:var(--dotoff)}
.card .ic{color:var(--icon)}
.card .ic svg{width:34px;height:34px;display:block}
.card.media .chip svg{width:18px;height:18px}
.iconbtn svg{width:24px;height:24px;display:block}
.card .nm{font-size:24px;font-weight:650;color:var(--offink);line-height:1.04;overflow-wrap:anywhere;hyphens:auto}
.card .nm.long{font-size:19px}
.card .st{font-size:16px;color:var(--icon);margin-top:4px}
.card.on{background:linear-gradient(155deg,var(--on1),var(--on2));border-color:var(--on2)}
.card.on .ic{color:var(--onicon)}
.card.on .nm{color:var(--onink)}
.card.on .st{color:var(--onicon)}
.card.on .dot{background:var(--ondot)}
.card.sensor{background:var(--off);border-color:var(--line)}
.card.sensor .val{font-size:30px;font-weight:700;color:var(--accent)}
.card.sensor .nm{color:var(--muted)}

/* media / combined musica + volume */
.card.media{background:linear-gradient(160deg,var(--accent),var(--on1));border-color:var(--accent);padding:14px;cursor:default}
.card.media .top{display:flex;align-items:center;justify-content:space-between}
.card.media .chip{display:inline-flex;align-items:center;gap:7px;background:#ffffff22;color:#F2EFE8;border-radius:999px;padding:6px 12px;font-size:15px;font-weight:600;cursor:pointer}
.card.media .title{font-size:22px;font-weight:650;color:#fff;line-height:1.05}
.card.media .src{font-size:14px;color:#ffffffb0}
.card.media .row{display:flex;gap:6px}
.card.media .row button{flex:1;height:42px;border:none;border-radius:var(--radius);background:#ffffff1f;color:#F2EFE8;font-size:22px;font-weight:700;cursor:pointer}
.card.media .row.vol button{background:var(--chip);color:var(--accent)}
.card.media .row button:active{filter:brightness(.9)}

/* action / nav */
.card.action{background:var(--accent);border-color:var(--accent)}
.card.action .nm{color:var(--accent-ink)}
.card.action .ic{color:var(--accent-ink)}

/* sheet (source picker etc.) */
.sheet-wrap{position:absolute;inset:0;display:none;align-items:flex-end;background:#0007;z-index:10}
.sheet-wrap.open{display:flex}
.sheet{width:100%;background:linear-gradient(180deg,var(--bg1),var(--bg2));border-radius:10px 10px 0 0;padding:20px;box-shadow:0 -20px 60px #0006}
.sheet h3{font-size:20px;margin-bottom:12px;color:var(--ink)}
.sheet .opt{padding:16px;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:8px;font-size:19px;color:var(--ink);cursor:pointer}
.sheet .opt.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}