/* additions for the live app */
.screen{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px))}
.authcard{width:min(420px,100%);padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.authcard .logo i{width:44px;height:44px}
.authcard h1{margin:4px 0 0;font-size:26px;font-weight:500;letter-spacing:-.03em}
.authcard p{margin:0;color:var(--muted);font-size:13.5px}
.authcard form{display:flex;flex-direction:column;gap:12px}
.authcard .btn{justify-content:center;padding:12px 16px}
.authcard .alt{font-size:13px;color:var(--muted);text-align:center}
.authcard .err{font-size:13px;color:var(--danger);background:color-mix(in srgb, var(--danger) 9%, transparent);border-radius:12px;padding:9px 12px}
.authcard .ok{font-size:13px;color:var(--st-cikti);background:color-mix(in srgb, var(--st-cikti) 10%, transparent);border-radius:12px;padding:9px 12px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-strong);background:var(--glass-solid);border-radius:14px;padding:11px 16px;font-size:13.5px;font-weight:500}
.divider{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--faint)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--accent);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.savestate{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.savestate i{width:7px;height:7px;border-radius:50%;background:var(--st-cikti)}
.savestate.saving i{background:var(--st-cekim);animation:pulse 1s ease-in-out infinite}
.savestate.error{color:var(--danger)}
.savestate.error i{background:var(--danger)}
@keyframes pulse{50%{opacity:.3}}
.acctrow{display:flex;align-items:center;gap:6px}
.mini{border:1px solid var(--line);background:var(--tint);border-radius:99px;padding:4px 10px;font-size:12px;color:var(--text)}
.mini:hover{border-color:var(--accent)}

.mlist{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) 130px 34px;gap:8px;align-items:center;padding:8px 8px 8px 12px;border:1px solid var(--line);border-radius:14px}
.mrow .em{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .em small{display:block;font-size:11.5px;color:var(--faint)}
.mrow select,.madd select,.madd input{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:7px 9px;background:var(--field);font-size:13px;min-width:0}
.mrow select option,.madd select option{background:var(--page);color:var(--text)}
.madd{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:8px;align-items:center}
.roles{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.roles b{color:var(--text);font-weight:500}

.ro .ronly-hide{display:none!important}
.ro .skuin input{pointer-events:none}
.rotag{font-size:11.5px;background:var(--tint);border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--muted)}
.upl.off{opacity:.45;cursor:not-allowed}
.uploading{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 12px;font-size:12.5px;color:var(--muted)}
.uploading .spin{width:16px;height:16px;border-width:2px}
@media (max-width:640px){
  .mrow{grid-template-columns:minmax(0,1fr) 110px 34px}
  .madd{grid-template-columns:minmax(0,1fr) 110px}
  .madd .btn{grid-column:1 / -1;justify-content:center}
  .savestate span{display:none}
}

/* login code + profile + team */
.codein{font-family:var(--f-mono);font-size:24px!important;letter-spacing:.5em;text-align:center;padding:12px 10px!important}
button.who{border:0;background:transparent;padding:2px;border-radius:14px;cursor:pointer;color:inherit;font:inherit}
button.who:hover .av{box-shadow:0 0 0 2px var(--accent)}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:13px;flex:none;overflow:hidden;transition:box-shadow .15s}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.lg{width:96px;height:96px;font-size:34px}
.av.md{width:36px;height:36px;font-size:14px}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:99px;background:var(--danger);color:#fff;font-size:11px;font-weight:600;margin-left:6px;padding:0 5px}
.mini{display:inline-flex;align-items:center}
.notices{display:flex;flex-direction:column;gap:6px}
.notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:color-mix(in srgb, var(--danger) 9%, transparent);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);font-size:13px}
.notice span{flex:1;min-width:180px}
.notice .btn{padding:7px 12px;font-size:12.5px}
.mrow{grid-template-columns:36px minmax(0,1fr) 130px auto 34px!important;padding:8px!important}
.mrow .st{font-size:11.5px;color:var(--faint)}
.mrow .st.warn{color:var(--danger)}
.mrow .btn{padding:6px 10px;font-size:12px}
.madd{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 120px auto!important}
.prof{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.prof .acts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){
  .mrow{grid-template-columns:36px minmax(0,1fr) 34px!important}
  .mrow select,.mrow .btn{grid-column:2 / -1}
  .madd{grid-template-columns:1fr 1fr!important}
  .madd input[type=email]{grid-column:1 / -1}
}