.login-required>aside,.login-required>main{display:none}.login-required{display:grid;place-items:center;min-height:100vh}.login-card{width:min(420px,90vw);background:#fff;border:1px solid #dce5e0;border-radius:12px;padding:30px}.login-card label{margin:18px 0}.login-card button{margin-top:14px;width:100%}.connection-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#eef6f2;padding:8px 20px;font-size:12px}.connection-bar button{padding:5px 8px;font-size:11px}

.login-required{background:#eef4f8}.authenticated{padding-top:42px;height:100vh;box-sizing:border-box}.authTopBar{z-index:10000}.authCard button{cursor:pointer}.authCard input{background:white;color:#15324a}.login-required #loginGate{width:min(420px,90vw)}.login-required .authCard{width:100%}.authCard dialog{border:0}dialog::backdrop{background:#15324a80}

.accessPermissionFloating {
  position: fixed;
  top: 58px;
  right: 10px;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: min(340px, calc(100vw - 20px));
  pointer-events: auto;
}

.accessPermissionButton {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
  cursor: pointer;
}

.accessPermissionPanel {
  width: min(340px, calc(100vw - 20px));
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.38);
  padding: 10px;
  box-sizing: border-box;
}

.accessPermissionPanelTitle {
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}

.accessPermissionCurrent {
  font-size: 11px;
  opacity: 0.86;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accessPermissionList {
  display: grid;
  gap: 6px;
}

.accessPermissionOption {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.9);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.accessPermissionOptionActive {
  border-color: rgba(96, 165, 250, 0.88);
  background: rgba(37, 99, 235, 0.82);
}


[hidden]{display:none!important}body{color:#15324a;background:#eef4f8;--green:#15324a}aside{background:#15324a}nav button.active{background:#294c69;box-shadow:inset 3px 0 #60a5fa}nav button:hover{background:#29445a}.brand span{color:#93c5fd}.brand small{color:#cbd5e1}.primary{background:#15324a!important}.connection-bar{background:#e5edf4}.card{border:1px solid #dbeafe;border-radius:12px;box-shadow:0 1px 5px rgba(15,23,42,.12)}.card h3{color:#0f172a}.card label{color:#374151}.card input,.card textarea,.card select{border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc}.accessPermissionButton:hover{background:#29445a}.accessPermissionOption:hover{background:#334155}

.owner-open .context,.owner-open #syncNow,.owner-open #savePending,.owner-open #reloadRemote{display:none}