:root {
  --mk-blue: #004b91;
  --mk-green: #10b981;
  --mk-yellow: #f59e0b;
  --mk-red: #ef4444;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--mk-blue);
  font-family: system-ui, sans-serif;
  color: #fff;
  overflow: hidden;
}

.app{
  position: fixed;
  inset: 0;
  display:flex;
  flex-direction:column;
}

.header{
  display:flex;
  gap:10px;
  padding:14px 16px 8px;
  align-items:center;
}

.header img{ width:38px; height:38px; }

.headText{ display:flex; flex-direction:column; gap:2px; }

.header h1{
  font-size:.95rem;
  font-weight:650;
  margin:0;
  opacity:.92;
}

.netline{ display:flex; align-items:center; gap:8px; }

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.14em;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
}
.pill.online{ background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.45); }
.pill.offline{ background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.40); }

.netmeta{
  font-size:.68rem;
  opacity:.85;
}

.syncbar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 12px 10px;
}

.syncinfo{ flex:1; }
.synctitle{ font-size:.72rem; font-weight:800; letter-spacing:.08em; opacity:.92; }
.syncmeta{ font-size:.68rem; opacity:.85; }

button.send{
  width:120px;
  height:44px;
  border:none;
  border-radius:14px;
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
  background: rgba(255,255,255,.22);
  color:#fff;
}

.core{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.circle{
  width:150px;
  height:150px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(255, 255, 255, .22);
  transition: background .08s linear, border-color .08s linear, transform .08s linear;
}

.circle span{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.16em;
}

.led{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#9ca3af;
}

.clock{
  font-family: ui-monospace, monospace;
  font-size:.95rem;
}

.hint{
  font-size:.68rem;
  opacity:.85;
  padding:0 14px;
  text-align:center;
  line-height:1.25rem;
}

.sessions{
  flex:1;
  overflow:auto;
  padding:8px 12px;
}

.session{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 10px;
  margin-bottom:8px;
  border-radius:12px;
  font-size:.78rem;
  background: rgba(255,255,255,.14);
  cursor:pointer;
}

.sessionTop{
  display:flex;
  align-items:center;
  gap:8px;
}

.session .title{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:750;
}

.badges{
  display:flex;
  gap:6px;
  align-items:center;
}

.badge{
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.10em;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
}
.badge.rec{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.45); }
.badge.unsent{ background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.40); }

.session .meta{
  font-size:.65rem;
  opacity:.85;
}

.controls{
  display:flex;
  gap:10px;
  padding:10px 12px;
}

button{
  flex:1;
  height:50px;
  border:none;
  border-radius:14px;
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
}

.start{ background: var(--mk-green); color:#043a2e; }
.stop{ background: rgba(255,255,255,.2); color:#fff; }

button:disabled{ opacity:.5; cursor:not-allowed; }