/* ===== М.Круг 3.1 «Бета» — стили новых элементов (значки, админка, приглашения, новости) ===== */

/* Значки ролей */
.message-head .role-badges{margin-left:2px;margin-right:2px}
.nav-item>span:not(.avatar):not(.nav-badges),.friend-row>span:not(.avatar){display:inline-flex;align-items:center;min-width:0}
.profile-view h3{display:flex;align-items:center;justify-content:center;gap:2px}
.call-person{position:relative}

/* Приглашение на экране входа */
#inviteRow input{text-transform:uppercase;letter-spacing:.08em}

/* Админка */
dialog#modal[data-kind="admin"] .modal-card{width:min(860px,calc(100vw - 32px))}
.admin-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.admin-head h3{margin:0}
.admin-head .icon-btn{font-size:18px;width:34px;height:34px;border-radius:8px;background:var(--raised)}
.admin-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.admin-tabs button{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:var(--raised);color:var(--muted);font-weight:650;font-size:13.5px}
.admin-tabs button.active{background:var(--accent);color:var(--on-accent,#fff)}
.admin-summary{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:13px;margin-bottom:10px}
.admin-summary b{color:var(--text)}
.admin-search{width:100%;height:40px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);padding:0 12px;margin-bottom:10px;outline:none}
.admin-search:focus{border-color:var(--accent)}
.admin-list{display:grid;gap:6px}
.admin-user,.admin-invite{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--raised)}
.admin-user.is-banned{opacity:.75;border-style:dashed}
.admin-user-main{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.admin-user-main>.status-dot{position:absolute;left:22px;top:22px;border:2px solid var(--raised)}
.admin-user-info{display:grid;min-width:0}
.admin-user-info b{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.admin-user-info b em{color:var(--muted);font-weight:500;font-style:normal;margin-left:4px}
.admin-user-info small,.admin-invite small{color:var(--muted);font-size:12.5px}
.admin-meta{font-size:12px!important;opacity:.9}
.admin-user-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.admin-user-acts select{height:34px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:0 8px;font:inherit;font-size:13px}
.secondary.sm,.danger.sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:8px}
.danger-text{color:var(--red)!important}
.admin-invite{grid-template-columns:1fr}
.admin-invite-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-invite code,.temp-pass code{font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;word-break:break-all}
.admin-invite .admin-user-acts{justify-content:flex-start}
.tag.danger{background:rgba(239,107,112,.15);color:var(--red)}
.admin-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:12px}
.admin-form .field{margin-top:0}
.admin-form .field input,.admin-form .field select{height:44px}
.admin-form .primary{margin-top:0;width:auto;padding:0 18px;min-height:44px}
.admin-audit{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:8px 10px;border-radius:8px;background:var(--raised);font-size:13.5px}
.admin-audit time{color:var(--muted);font-size:12.5px;white-space:nowrap}
.admin-note{font-size:13px;margin:8px 0 10px!important}
.admin-empty{color:var(--muted);text-align:center;padding:24px 8px}
.admin-radios{display:grid;gap:6px}
.admin-radio{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--raised);cursor:pointer}
.admin-radio input{margin-top:3px;accent-color:var(--accent)}
.admin-radio span{display:grid}
.admin-radio small{color:var(--muted)}
.admin-body{min-height:200px}
.temp-pass{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;margin:4px 0 12px;border-radius:10px;border:1px dashed var(--accent);background:var(--raised)}
.temp-pass code{flex:1 1 180px}
.temp-pass.fresh{display:grid;grid-template-columns:1fr auto}
.temp-pass.fresh span{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.storage-meter{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--raised);font-size:13px}
.storage-meter div{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:var(--muted)}
.storage-meter b{color:var(--text);font-weight:650}
.storage-meter i{display:block;height:6px;border-radius:99px;background:var(--hover);overflow:hidden;position:relative}
.storage-meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--accent);border-radius:inherit}
.storage-meter.full i::after{background:var(--red)}

/* Новости и обратная связь */
.news-note{display:flex;align-items:center;gap:10px;justify-content:center;padding:12px 16px;margin:0 16px 14px;border:1px solid var(--border);border-radius:12px;background:var(--raised);color:var(--muted);font-size:13.5px;text-align:center}
.bug-meta{color:var(--muted);font-size:12px;margin:6px 0 0}
#bugText{width:100%;min-height:120px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);padding:10px 12px;resize:vertical;outline:none}
#bugText:focus{border-color:var(--accent)}

@media(max-width:560px){
  .admin-user{grid-template-columns:1fr}
  .admin-user-acts{justify-content:flex-start}
  .admin-form{grid-template-columns:1fr 1fr}
  .admin-form .primary{grid-column:1/-1;width:100%}
  .admin-audit{grid-template-columns:1fr;gap:2px}
  .temp-pass.fresh{grid-template-columns:1fr}
  .news-note{margin:0 10px 10px}
}

/* G1: заявки в друзья */
.friend-requests .section-title{padding-left:2px}
.friend-requests .friend-card{margin-bottom:10px}
.request-card{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.request-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.friend-card .request-actions button.req-accept{background:var(--accent);color:#fff}
.friend-card .request-actions button.req-decline{background:var(--raised);border:1px solid var(--border)}
.req-nav{color:var(--text)}
.req-count{min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 6px}
.rail-btn{position:relative}
.rail-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px #0b0d11}
@media(max-width:560px){.request-card{grid-template-columns:40px 1fr}.request-card .request-actions{grid-column:1/-1;justify-content:stretch}.request-card .request-actions button{flex:1}}
/* G3: удаление аккаунта */
.link-danger{display:block;margin:10px auto 0;background:transparent;color:var(--red);font-size:13px;min-height:32px;padding:4px 10px;border-radius:7px;opacity:.85}
.link-danger:hover{opacity:1;background:color-mix(in srgb,var(--red) 12%,transparent)}
.form-error{color:var(--red);font-size:13px;min-height:18px;margin-top:8px}

/* ===== 3.1: значки ролей — SVG, ровно в строку с именем ===== */
/* !important: в старых стилях есть общие правила для span (напр. .profile-strip span{display:block}) */
.role-badges{display:inline-flex!important;align-items:center;gap:3px;margin:0 0 0 5px!important;padding:0!important;vertical-align:-2px;flex:0 0 auto;overflow:visible!important;max-width:none!important;white-space:nowrap;line-height:0!important}
.role-badges .role-badge{display:inline-grid!important;place-items:center;width:15px;height:15px;max-width:none!important;overflow:visible!important;margin:0!important;padding:0!important;font-size:0!important;line-height:0!important;cursor:help}
.rb-ico{width:15px;height:15px;flex:0 0 auto;display:block;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.role-badges .rb-owner,.badge-chip.rb-owner,.call-role.rb-owner{color:#f4b740}
.role-badges .rb-dev,.badge-chip.rb-dev,.call-role.rb-dev{color:#3fa9f5}
.role-badges .rb-mod,.badge-chip.rb-mod,.call-role.rb-mod{color:#36b37e}
.role-badges .rb-verified,.badge-chip.rb-verified,.call-role.rb-verified,.admin-user-acts [data-verify] .rb-ico{color:#4f8dff}
.message-head .role-badges{margin:0 3px 0 4px!important;vertical-align:-2px;align-self:center}
.message-head .role-badges .role-badge,.message-head .rb-ico{width:14px;height:14px}
h3 .role-badges .role-badge,h3 .rb-ico{width:18px;height:18px}
h3 .role-badges{gap:4px;margin-left:7px!important;vertical-align:-1px}
.call-role .rb-ico{width:15px;height:15px}
.call-role{position:absolute;left:-4px;top:-4px;width:15px;height:15px;font-style:normal;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.profile-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 12px}
.badge-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:999px;background:color-mix(in srgb,currentColor 13%,transparent);border:1px solid color-mix(in srgb,currentColor 30%,transparent);font-size:12px;font-weight:700}
.badge-chip .rb-ico{width:15px;height:15px;filter:none}
.badge-chip>span{color:var(--text)}
.admin-user-acts [data-verify]{display:inline-flex;align-items:center;gap:6px}
.admin-user-acts [data-verify] .rb-ico{width:15px;height:15px;filter:none}
/* Своё имя внизу слева: ник обрезается многоточием, значки всегда видны */
#myName{display:flex!important;align-items:center;min-width:0;overflow:visible!important}
#myName mk-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#myName .role-badges{margin-left:5px!important}

/* ===== Цвет ника ===== */
mk-nick{font:inherit}
mk-nick.nick-solid{color:var(--nick)}
mk-nick.nick-g{color:transparent;-webkit-background-clip:text;background-clip:text;background-size:200% 100%;animation:nick-shift 6s linear infinite}
.nick-g-fire{background-image:linear-gradient(90deg,#ff5f45,#ffb547,#ffe27a,#ffb547,#ff5f45)}
.nick-g-aurora{background-image:linear-gradient(90deg,#4dffb5,#4dc9ff,#a77bff,#4dc9ff,#4dffb5)}
.nick-g-sunset{background-image:linear-gradient(90deg,#ff7a9e,#ffa25f,#ffd36e,#ffa25f,#ff7a9e)}
.nick-g-gold{background-image:linear-gradient(90deg,#c8902e,#ffe08a,#fff3c4,#ffe08a,#c8902e)}
.nick-g-ocean{background-image:linear-gradient(90deg,#3fd4ff,#5f8bff,#7af0e4,#5f8bff,#3fd4ff)}
.nick-g-rainbow{background-image:linear-gradient(90deg,#ff6b6b,#ffd166,#7bd88f,#5fb3ff,#d97cff,#ff6b6b)}
@keyframes nick-shift{to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){mk-nick.nick-g{animation:none}}
.nick-picker{margin:4px 0 14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--raised)}
.nick-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:13px;color:var(--muted);font-weight:650}
.nick-picker-head b{font-size:15px;color:var(--text);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick-swatches{display:flex;flex-wrap:wrap;gap:7px}
.nick-swatches.grads{margin-top:8px}
.nick-sw{position:relative;width:28px;height:28px;padding:0;border-radius:50%;background:transparent;border:2px solid transparent;display:grid;place-items:center;cursor:pointer}
.nick-sw i{display:block;width:20px;height:20px;border-radius:50%}
.nick-sw:hover{border-color:var(--border)}
.nick-sw.active{border-color:var(--text)}
.nick-none{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);position:relative;overflow:hidden}
.nick-none:after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--red);transform:rotate(45deg)}
.nick-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
.nick-sw.wide{width:auto;height:30px;border-radius:999px;padding:0 10px 0 4px;display:inline-flex;gap:6px;background:var(--surface);border:1px solid var(--border);font-size:12px;font-weight:650;color:var(--text)}
.nick-sw.wide.active{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.nick-sw.wide i{width:20px;height:20px}
.nick-hint{display:block;margin-top:9px;color:var(--muted);font-size:12px}