/* Login screen */
#loginScreen,#familyScreen{position:fixed;inset:0;background:var(--color-bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:9998;padding:24px}
#loginScreen.show,#familyScreen.show{display:flex}
.loginCard{background:var(--color-surface);border-radius:var(--radius-card);padding:24px;width:100%;max-width:360px;box-shadow:0 4px 20px var(--color-accent-shadow)}
.loginTitle{font-family:'Caveat',var(--ff);font-style:italic;font-size:40px;font-weight:700;color:var(--color-accent-text);text-align:center;margin-bottom:6px;line-height:1}
.loginSub{font-size:13px;color:var(--color-text-muted);text-align:center;margin-bottom:20px}
.loginCard label{display:block;font-size:12px;font-weight:500;margin-bottom:5px;color:var(--color-text-muted)}
.loginCard input{width:100%;border:1px solid var(--color-border-input);border-radius:var(--radius-control);padding:11px 12px;font-size:14px;font-family:var(--ff);color:var(--color-text);background:var(--color-bg);outline:none;margin-bottom:12px}
.loginCard input:focus{border-color:var(--color-accent-text)}
.loginBtn{width:100%;background:var(--color-accent);color:var(--color-text-on-accent);border:none;border-radius:var(--radius-control);padding:12px;font-size:14px;font-weight:600;font-family:var(--ff);cursor:pointer;margin-top:6px}
.loginBtn:disabled{opacity:.5;cursor:not-allowed}
.loginBtn.sec{background:var(--color-surface);color:var(--color-accent-text);border:1.5px solid var(--color-accent)}
.loginErr{background:var(--color-danger-surface-light);border:1px solid var(--color-danger-border-light);color:var(--color-danger-text-dark);padding:8px 10px;border-radius:var(--radius-control);font-size:12px;margin-top:10px;text-align:center}
.logoutBtn{background:none;border:none;color:var(--color-text-muted);font-size:11px;cursor:pointer;padding:4px 8px}
.tabSwitch{display:flex;background:var(--color-bg);border-radius:var(--radius-control);padding:3px;margin-bottom:18px;border:1px solid var(--color-border-input)}
.tabSwitch button{flex:1;background:none;border:none;padding:8px 6px;font-family:var(--ff);font-size:13px;font-weight:500;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-control);transition:all .15s}
.tabSwitch button.active{background:var(--color-accent);color:var(--color-text-on-accent)}
.familyChoice{display:flex;gap:10px;margin-top:18px}
.familyChoice button{flex:1;border:1.5px solid var(--color-border-input);background:var(--color-surface);border-radius:11px;padding:14px 8px;cursor:pointer;font-family:var(--ff);text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .15s}
.familyChoice button:hover{border-color:var(--color-accent-text);background:var(--color-accent-surface-hover)}
.familyChoice button .ico{font-size:22px}
.familyChoice button .lbl{font-size:13px;font-weight:600;color:var(--color-text)}
.familyChoice button .desc{font-size:10.5px;color:var(--color-text-muted)}
.codeBox{font-family:'SF Mono','Consolas',monospace;font-size:22px;letter-spacing:3px;text-align:center;padding:14px;background:var(--color-bg);border:1.5px dashed var(--color-accent);border-radius:var(--radius-control);color:var(--color-accent-text);font-weight:700;margin:8px 0 12px}
.familyList{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.familyOpt{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius-card);background:var(--color-surface);cursor:pointer;transition:all .12s;box-shadow:var(--shadow-card)}
.familyOpt:hover{border-color:var(--color-accent-text);background:var(--color-accent-surface-hover)}
.familyOpt .fname{flex:1;font-size:14px;font-weight:600}
.familyOpt .frole{font-size:10.5px;color:var(--color-text-muted);background:var(--color-surface-muted);padding:1px 6px;border-radius:var(--radius-badge)}

/* Участники семьи в настройках */
.member-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--color-border)}
.member-item:last-child{border-bottom:none}
.member-info{flex:1;min-width:0}
.member-name{font-size:14.5px;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-role{font-size:12px;color:var(--color-text-muted);margin-top:1px}
.member-kick{background:var(--color-surface);border:1px solid var(--color-destructive);color:var(--color-destructive);border-radius:var(--radius-control);padding:6px 10px;font-size:11px;font-weight:500;cursor:pointer;font-family:var(--ff);flex-shrink:0}
.member-kick:hover{background:var(--color-danger-surface-light)}
.member-actions{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.member-perm{background:var(--color-surface);border:1px solid var(--color-accent);color:var(--color-accent-text);border-radius:var(--radius-control);padding:6px 10px;font-size:11px;font-weight:500;cursor:pointer;font-family:var(--ff)}
.member-perm:hover{background:var(--color-accent-surface-hover-strong)}
.member-perm.revoke{border-color:var(--color-warning-border-alt);color:var(--color-warning-text-alt)}
.member-perm.revoke:hover{background:var(--color-warning-surface-hover)}
.member-req-badge{display:inline-block;background:var(--color-readonly-surface);color:var(--color-warning-text-alt);font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--radius-badge);margin-left:6px;vertical-align:middle}

/* Бейдж "Только просмотр" в шапке — постоянная полоска */
.ro-bar{display:none;position:fixed;top:0;left:0;right:0;z-index:120;background:linear-gradient(90deg,var(--color-readonly-surface),var(--color-readonly-surface-end));color:var(--color-readonly-text);font-size:11.5px;font-weight:600;padding:5px 12px;text-align:center;letter-spacing:.2px;border-bottom:1px solid var(--color-readonly-border);font-family:var(--ff)}
body.ro .ro-bar{display:block}
body.ro .page,body.ro .nav{padding-top:0}
body.ro #hMain,body.ro .sphd,body.ro .calhd{margin-top:24px}

/* Скрытие edit-элементов в read-only режиме */
body.ro .ro-hide{display:none !important}

/* Бейдж 🔔 на иконке ⚙️ настроек у owner-а */
.bell-badge{position:absolute;top:-5px;right:-5px;background:var(--color-badge-alert);color:var(--color-text-on-accent);font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:var(--radius-badge);padding:0 4px;display:flex;align-items:center;justify-content:center;line-height:1;border:1.5px solid var(--color-border-on-accent);box-sizing:border-box}

/* Подсветка участника, запросившего доступ */
.member-item.has-req{background:linear-gradient(90deg,var(--color-warning-surface-soft),transparent)}

/* Кнопка "Запросить редактирование" в настройках */
.req-edit-btn{width:100%;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-light));color:var(--color-text-on-accent);border:none;border-radius:var(--radius-control);padding:13px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--ff);margin-top:10px}
.req-edit-btn:hover{filter:brightness(1.05)}
.req-edit-btn:disabled{opacity:.6;cursor:default}
.req-edit-info{background:var(--color-accent-surface-info);border:1px solid var(--color-accent-border-info);border-radius:var(--radius-card);padding:14px;margin-bottom:14px;font-size:13px;color:var(--color-text);line-height:1.5}