/* NoriPlay Accounts & Community */
.auth-slot{display:flex;align-items:center;gap:6px}
.auth-link-button,.auth-register-button,.account-pill{
  min-height:34px;border-radius:9px;font-size:9px;font-weight:850
}
.auth-link-button{
  padding:7px 9px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)
}
.auth-link-button:hover{color:var(--text);background:var(--surface-3)}
.auth-register-button{
  padding:7px 10px;border:1px solid rgba(229,9,20,.36);background:rgba(229,9,20,.12);color:#ea7077
}
.account-menu-wrap{position:relative}
.account-pill{
  display:flex;align-items:center;gap:7px;padding:4px 8px 4px 5px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text)
}
.account-avatar{
  width:25px;height:25px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#481419,var(--red));color:#fff;font-size:9px;font-weight:900
}
.account-avatar.large{width:38px;height:38px;font-size:13px}
.account-name{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.account-chevron{color:var(--muted)}
.account-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);z-index:120;
  width:220px;padding:6px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);box-shadow:0 18px 48px rgba(0,0,0,.24)
}
.account-dropdown-head{
  display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;
  padding:8px;border-bottom:1px solid var(--line-soft);margin-bottom:4px
}
.account-dropdown-head div{min-width:0}
.account-dropdown-head b,.account-dropdown-head span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-dropdown-head b{font-size:10px}.account-dropdown-head span{margin-top:2px;color:var(--muted);font-size:8px}
.account-dropdown>a,.account-dropdown>button{
  width:100%;display:block;padding:8px 9px;border:0;border-radius:7px;background:transparent;
  color:var(--muted);text-align:left;font-size:9px
}
.account-dropdown>a:hover,.account-dropdown>button:hover{background:var(--surface-2);color:var(--text)}

html.modal-open{overflow:hidden}
.auth-modal,.save-modal{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px
}
.auth-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px)}
.auth-dialog,.save-dialog{
  position:relative;z-index:1;width:min(100%,430px);max-height:min(90vh,760px);overflow:auto;
  border:1px solid var(--line);border-radius:18px;background:var(--surface);
  box-shadow:0 28px 90px rgba(0,0,0,.48);padding:18px
}
.auth-close{
  position:absolute;right:11px;top:10px;width:31px;height:31px;border:1px solid var(--line);
  border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:18px
}
.auth-dialog-brand{display:flex;align-items:center;gap:10px;padding-right:42px;margin-bottom:17px}
.auth-dialog-brand img{width:40px;height:40px;border-radius:10px}
.auth-dialog-brand span,.auth-dialog-brand b{display:block}
.auth-dialog-brand span{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.auth-dialog-brand b{margin-top:2px;font-size:18px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--surface-2);border-radius:10px}
.auth-tabs button{
  padding:8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:9px;font-weight:850
}
.auth-tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.auth-form{display:grid;gap:10px;margin-top:15px}
.auth-form label{display:grid;gap:5px}
.auth-form label>span{font-size:9px;font-weight:800}
.auth-form small{color:var(--muted);font-size:7px}
.auth-form input{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--input);color:var(--text);outline:0;font-size:10px
}
.auth-form input:focus{border-color:#666}
.adult-check{grid-template-columns:18px 1fr!important;align-items:start!important}
.adult-check input{width:16px;height:16px;padding:0;accent-color:var(--red)}
.adult-check span{font-weight:600!important;color:var(--muted)}
.auth-submit{
  margin-top:2px;padding:11px 13px;border:0;border-radius:9px;background:var(--red);color:#fff;
  font-size:10px;font-weight:900
}
.auth-submit:disabled{opacity:.55}
.auth-error{padding:8px 9px;border:1px solid rgba(229,9,20,.28);border-radius:8px;background:rgba(229,9,20,.08);color:#e9777e;font-size:8px}
.auth-footnote{margin:13px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:8px;line-height:1.5}

.save-dialog{width:min(100%,470px)}
.save-dialog-head{padding-right:38px}
.save-dialog-head h2{margin:3px 0 4px;font-size:19px}.save-dialog-head p{margin:0;color:var(--muted);font-size:9px;line-height:1.4}
.save-playlist-list{display:grid;gap:6px;margin-top:15px;max-height:310px;overflow:auto}
.save-playlist-item{
  display:grid;grid-template-columns:32px 1fr;gap:9px;align-items:center;width:100%;padding:9px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);text-align:left
}
.save-playlist-item:hover{background:var(--surface-3)}
.save-playlist-item.saved{border-color:rgba(80,185,110,.36);background:rgba(80,185,110,.08)}
.save-playlist-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface-3);font-size:15px}
.save-playlist-item b,.save-playlist-item small{display:block}.save-playlist-item b{font-size:10px}.save-playlist-item small{margin-top:2px;color:var(--muted);font-size:8px}
.save-loading{padding:18px;text-align:center;color:var(--muted);font-size:9px}
.save-create-form{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.save-create-form input{min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--input);color:var(--text)}
.save-create-form button{padding:8px 10px;border:0;border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:850}

/* Community on video page */
.action-save .action-icon{font-size:16px}
.comment-login-note{padding:10px;border:1px dashed var(--line);border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:9px;text-align:center}
.comment-login-note button{border:0;background:transparent;color:#e86a71;font-weight:850}
.comment-owner-actions{display:flex;gap:6px;margin-top:6px}
.comment-owner-actions button{padding:3px 6px;border:0;border-radius:5px;background:var(--surface-2);color:var(--muted);font-size:7px}
.comment-owner-actions button:hover{color:#e76e75}
.community-loading{padding:14px 2px;color:var(--muted);font-size:9px}
.comment-copy .comment-user{display:flex;align-items:center;gap:6px}
.comment-copy .comment-user span{color:var(--muted);font-size:8px}

/* Account page */
.account-page{padding:28px 0 48px}
.account-hero{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface)
}
.account-profile{display:flex;align-items:center;gap:13px}.account-profile .account-avatar{width:52px;height:52px;font-size:17px}
.account-profile h1{margin:0;font-size:24px}.account-profile p{margin:4px 0 0;color:var(--muted);font-size:9px}
.account-logout{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:9px}
.account-section{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.account-section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:12px}
.account-section-head h2{margin:3px 0 0;font-size:19px}
.playlist-create-inline{display:flex;gap:6px}
.playlist-create-inline input{padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--input);color:var(--text)}
.playlist-create-inline button{padding:8px 10px;border:0;border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:850}
.account-playlists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.account-playlist-card{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.account-playlist-card h3{margin:0;font-size:12px}.account-playlist-card p{margin:4px 0 10px;color:var(--muted);font-size:8px}
.account-playlist-actions{display:flex;gap:5px}.account-playlist-actions button{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font-size:8px}
.account-playlist-videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.playlist-video{position:relative}
.playlist-video .remove-saved{
  position:absolute;right:5px;top:5px;z-index:3;width:25px;height:25px;border:0;border-radius:50%;
  background:rgba(0,0,0,.72);color:#fff;font-size:13px
}
@media(max-width:900px){
  .account-playlists{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-playlist-videos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .auth-slot{margin-left:auto}
  .account-name{display:none}
  .auth-link-button{display:none}
  .auth-register-button{padding:7px 8px;font-size:8px}
  .account-hero{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .account-playlists{grid-template-columns:1fr}
  .playlist-create-inline{width:100%;display:grid;grid-template-columns:1fr auto}
  .account-section-head{align-items:stretch;flex-direction:column}
}

[data-playlist-detail]:empty{display:none}


/* V22 — threaded comments and reactions */
.comment-form.is-replying{
  position:relative;
  padding-top:42px;
}
.comment-reply-banner{
  position:absolute;
  left:9px;right:9px;top:8px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:27px;padding:5px 8px;
  border:1px solid var(--line-soft);border-radius:7px;
  background:var(--surface);color:var(--muted);font-size:8px
}
.comment-reply-banner b{color:var(--text)}
.comment-reply-banner button{
  width:22px;height:22px;border:0;border-radius:50%;
  background:var(--surface-3);color:var(--muted);font-size:13px
}
.comment-thread{
  border-bottom:1px solid var(--line-soft)
}
.comment-thread:last-child{border-bottom:0}
.comment-thread>.comment{border-bottom:0}
.comment-reply{
  margin-left:40px;
  padding-top:9px;padding-bottom:10px;
  border-top:1px dashed var(--line-soft)!important;
  border-bottom:0!important
}
.comment-reply .comment-mini-avatar{
  width:28px;height:28px;
  font-size:8px
}
.comment-actions{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin-top:7px
}
.comment-actions button{
  min-height:25px;display:inline-flex;align-items:center;gap:4px;
  padding:4px 7px;border:1px solid transparent;border-radius:6px;
  background:transparent;color:var(--muted);font-size:7px;font-weight:750
}
.comment-actions button:hover{
  background:var(--surface-2);color:var(--text)
}
.comment-actions button.active{
  border-color:rgba(229,9,20,.25);
  background:rgba(229,9,20,.08);color:#e96c74
}
.comment-actions button span{font-size:10px}
.comment-actions button b{font-size:7px}
.comment-copy>p{
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

/* V22 — account activity */
.account-activity-section .account-section-head p{
  margin:4px 0 0;color:var(--muted);font-size:8px
}
.account-activity-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.account-activity-stats article{
  min-height:84px;display:flex;flex-direction:column;
  padding:11px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2)
}
.account-activity-stats span{
  color:var(--muted);font-size:8px
}
.account-activity-stats b{
  margin-top:auto;font-size:24px;letter-spacing:-.04em
}
.account-recent-comments{
  margin-top:12px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--surface-2)
}
.account-recent-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 11px;border-bottom:1px solid var(--line-soft)
}
.account-recent-head b{font-size:9px}
.account-recent-head span{color:var(--muted);font-size:7px}
.account-activity-comment{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:10px 11px;border-bottom:1px solid var(--line-soft)
}
.account-activity-comment:last-child{border-bottom:0}
.account-activity-comment:hover{background:var(--surface-3)}
.account-activity-comment div{min-width:0}
.account-activity-comment b{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;color:var(--text)
}
.account-activity-comment p{
  margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:8px
}
.account-activity-comment>span{
  color:var(--muted);font-size:7px;white-space:nowrap
}
@media(max-width:700px){
  .comment-reply{margin-left:24px}
  .account-activity-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.comment-deleted-text{font-style:italic;color:var(--muted)!important}