*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  height: 100%;
}

body {
  min-height: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
    background-color: #000066;
    background-image: url(images/glow.png), url(images/bg.png);
    background-size: 200vh, auto;
    background-position:  center, center;
    background-repeat: no- no-repeat, repeat;
    color: #eee;
    overflow-x: hidden;
}

button {
  min-width: 0;
  margin: 0 0.25vh;
  padding: 0.8vh 1.1vh;
  font: inherit;
  font-size: 2vh;
  font-weight: 800;
  text-align: center;
  color: inherit;
  border-radius: 1vh;
		box-shadow: 0 0.1rem 0.2rem 0 #000000, inset 0 0 0.2rem 0 #ff7af0;
    background: linear-gradient(to bottom, #7f3199 5%, #cf5fe6 100%);
    background-color: #7f3199;
    border: 0.05rem solid #000001;
    cursor: pointer;
    color: #ffffff;
    font-family: 'FontFamm1';
    font-size: 1.3vh;
    padding: 0.5rem 0.6rem;
    text-decoration: none;
    /* text-shadow: 0 0 0.2rem #bc8ab9; */
    position: relative;
    text-align: center;	
}
button:hover{

      border: 0.05rem solid #ffffff;
    background: #f4a3ff;
    color: #ffffff;
    box-shadow: 0 0 0.4rem 0 #ffffff, inset 0 0 0.5rem 0 #ffffff;
    text-shadow: -0.02rem 0.02rem 0px #a700ff;
    position: relative;

}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75vh 1vh;
  gap: 1vh;
	    min-height: 90px;
	    margin-bottom: 8px;
    -webkit-box-shadow: 0px 0px 31px 2px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 31px 2px rgba(255,255,255,1);
    box-shadow: 0px 0px 8px 4px rgb(255 255 255 / 10%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 100%);
}
.logo {
  font-size: 2vh;
  font-weight: 700;
}


.user-area {
  display: flex;
  align-items: center;
  gap: 0.5vh;
  font-weight: 600;
}
.user-area a,
.linklike {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
}
.avatar-header {
    width: 5vh;
    height: 5vh;
  border-radius: 50%;
  object-fit: cover;
	margin-right: 0.5vh;
}

/* Main layout */
.main {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Video column */
.video-wrapper {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.video-area {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: calc(100vh - 220px);
  position: relative;
  margin: 0 auto;
}
.video-area > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
border-radius: 1.5vh;
}

/* Stream info row */
.stream-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75vh;
  flex: 0 0 auto;
    margin: 0.25vh 0;
    text-shadow: 2px 2px 2px black;
}
.stream-meta .live-label {
  font-size: 1.5vh;
  font-weight: 700;
}
.stream-meta .viewer-count {
  font-size: 1.5vh;
  font-weight: 600;
	text-align: right;
}

.video-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  padding: 0.7vh 0;
  align-items: flex-end;
  flex: 1 1 0;
}


.video-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0.25vh;
  padding: 0.8vh 1.1vh;
  font: inherit;
  font-weight: 800;
  text-align: center;
  color: inherit;
  border-radius: 1vh;
		box-shadow: 0 0.1rem 0.2rem 0 #000000, inset 0 0 0.2rem 0 #ff7af0;
    background: linear-gradient(to bottom, #7f3199 5%, #cf5fe6 100%);
    background-color: #7f3199;
    border: 0.05rem solid #000001;
    cursor: pointer;
    color: #ffffff;
    font-family: 'FontFamm1';
    font-size: 1.3vh;
    padding: 0.5rem 0.6rem;
    text-decoration: none;
    /* text-shadow: 0 0 0.2rem #bc8ab9; */
    position: relative;
    text-align: center;	
}

.video-actions .btn:hover{

      border: 0.05rem solid #ffffff;
    background: #f4a3ff;
    color: #ffffff;
    box-shadow: 0 0 0.4rem 0 #ffffff, inset 0 0 0.5rem 0 #ffffff;
    text-shadow: -0.02rem 0.02rem 0px #a700ff;
    position: relative;

}


.chat {
  font-size: 1.375vh;
  flex: 0 0 clamp(300px, 40vw, 420px);
  max-width: clamp(300px, 40vw, 420px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  padding: 0 0.4vh 0 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 128, 0.8) 100%);
}
.chat-bubble {
  display: flex;
  gap: 0.75vh;
  margin-bottom: 0.5vh;
  align-items: flex-start;
  padding: 0.5vh;
  border-radius: 1vh;
    background: rgb(70 71 82 / 30%);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .6);
	    margin-right: 0.5vh;
}
.avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
      border-radius: 40%;
    background-size: contain;
  border-radius: 50%;
}
.msg strong {
  display: block;
  margin-bottom: 0.25vh;
}
.chat-input {
  display: flex;
  gap: 0.5vh;
  padding: 0.75vh 0.75vh 0.75vh 0.75vh;
}
.chat-input textarea {
  flex: 1;
  min-height: 2.25vh;
  padding: 0.5vh;
  border-radius: 4px;
  resize: none;
  font: inherit;
}
.chat-input button {
  

  width: 25%;
  cursor: pointer;
	
	box-shadow: 0 0.1rem 0.2rem 0 #000000, inset 0 0 0.2rem 0 #ff7af0;
    background: linear-gradient(to bottom, #7f3199 5%, #cf5fe6 100%);
    background-color: #7f3199;
    border-radius: 0.2rem;
    border: 0.05rem solid #000001;
    cursor: pointer;
    color: #ffffff;
    font-family: 'FontFamm1';
    font-size: 1.3vh;
    padding: 0.5rem 0.6rem;
    text-decoration: none;
    /* text-shadow: 0 0 0.2rem #bc8ab9; */
    position: relative;
    text-align: center;	
}

.chat-input button:hover {
      border: 0.05rem solid #ffffff;
    background: #f4a3ff;
    color: #ffffff;
    box-shadow: 0 0 0.4rem 0 #ffffff, inset 0 0 0.5rem 0 #ffffff;
    text-shadow: -0.02rem 0.02rem 0px #a700ff;
    position: relative;
}


.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 1.5vh;
  width: min(90%, 420px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.rules-list {
  margin: 1vh 0 1.5vh 1vh;
  line-height: 1.4;
}
.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 0.75vh;
}
.modal-content input {
  padding: 0.5vh;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}

@media (max-width: 800px), (orientation: portrait) {
  .main {
    flex-direction: column;
  }
  .video-wrapper {
    flex: 0 0 auto;
  }
  .video-area {
    width: 100%;
    max-height: none;
  }
  .video-actions {
    flex-direction: row;
    padding: 0 0 1vh;
	  flex: 0 0 auto;
        max-height: calc(100vh - 80px);   /* fallback */
    max-height: calc(100svh - 80px);  /* real fix */
  }
  .chat {
    border-left: none;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    height: auto;
  }
}
/* ─── Chat bottom-snap & scrollbar styling ─── */
.chat-messages {
  /* always show a scrollbar gutter, never disappear */
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;

  /* flex so short content hugs bottom */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* snap each bubble to the bottom edge */
  scroll-snap-type: y mandatory;
}

/* each message snaps to the bottom of the viewport */
.chat-bubble {
  scroll-snap-align: end;
}

/* ─── WebKit / Blink scrollbar ─── */
.chat-messages::-webkit-scrollbar {
  width: 24px;  /* decent thickness */
}

.chat-messages::-webkit-scrollbar-track {
  background: #000;  /* black track */
}

.chat-messages::-webkit-scrollbar-thumb {
  background: purple;    /* purple thumb */
  border-radius: 12px;    /* rounded corners */
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #9400D3;   /* darker purple on hover */
}

/* ─── Firefox scrollbar ─── */
.chat-messages {
  scrollbar-width: auto;
  scrollbar-color: #8f3aa8 #000;
}

/* ─── CHAT SCROLL OVERRIDE & STYLES ─── */

/* 1) Make the chat container a normal block so overflow works properly */
.chat-messages {
  /* keep the flex:1 from earlier so it still grows/shrinks */
  flex: 1 1 auto;

  /* normal stacking of children */
  display: block !important;

  /* always show vertical scrollbar */
  overflow-y: scroll !important;
  scrollbar-gutter: stable both-edges;

  /* enable snapping each bubble to the bottom edge */
  scroll-snap-type: y mandatory;
}

/* 2) Snap each bubble’s end (bottom) to the container’s snapport */
.chat-bubble {
  scroll-snap-align: end;
}

/* 3) WebKit/Blink scrollbar styling */
.chat-messages::-webkit-scrollbar {
  width: 12px;
}
.chat-messages::-webkit-scrollbar-track {
  background: #000;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: purple;
  border-radius: 6px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #8f3aa8;
}

/* 4) Firefox scrollbar styling */
.chat-messages {
  scrollbar-width: auto;
  scrollbar-color: #8f3aa8 #000;
}

/* ─── Imported Modal Styles ─── */

/* 1) Custom font for modal headers */
@font-face {
    font-family: FontFamm1;
    src: url("../fonts/font1.ttf");
}

/* 2) Shake animation for invalid inputs */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.modal-content.shake {
    animation: shake 0.5s ease both;
}

/* 3) Fade-in/fade-out background overlay */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.modal.fade-in {
    display: flex;
    animation: fadeIn 0.5s forwards;
}
.modal.fade-out {
    animation: fadeOut 0.5s forwards;
}

/* 4) Basic modal overlay */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0.1, 0.15, 0.7);
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1000;
    overflow: auto;
}

/* 5) Slide-in content and base content styling */
@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.modal-content {
    margin: 10% auto;
    padding: 1.25rem;
    font-family: sans-serif;
    border: 0.2rem solid #3e8a97;
    width: 22rem;
    max-height: 90vh;
    position: relative;
    border-radius: 1rem;
    box-shadow:
      inset 0 0 1rem 0 #3e9793,
      0 0.2rem 1rem 0.2rem #00000066;
    background: url('https://i.imgur.com/xV1wsSN.png');
    color: #ffffff;
    text-shadow: 0.05rem 0.05rem black;
}
.modal-content.slide-in {
    animation: slideIn 0.5s forwards;
}

/* 6) Close button (“X”) */
#close-modal {
    position: absolute;
    top: -0.5ch;
    right: -0.5ch;
    width: 2ch;
    font-size: 1.6rem;
    cursor: pointer;
    text-align: center;
    background-color: #bb0000;
    border: 0.15rem solid #ffffff;
    border-radius: 1rem;
    box-shadow:
      0 0 0.2rem 0.02rem black,
      inset 0 0 0.2rem 0.02rem #ffffff;
}
#close-modal:hover {
    background-color: black;
    border-color: red;
    color: red;
    box-shadow: 0 0 0.5rem 0.2rem red;
}

/* 7) Modal title styling */
#wintitle {
    font-family: FontFamm1, sans-serif;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    background-image: url(https://i.imgur.com/Mj7CYMG.png);
    background-size: auto 90%;
    background-repeat: no-repeat;
    background-position: top left;
    color: #fff;
    font-weight: 100;
    text-shadow: 0.05rem 0.05rem #000;
    border-bottom: 0.05rem solid #3e8a9755;
}

/* 8) Header within modal (if used) */
#header {
    display: flex;
    justify-content: flex-end;
    padding: 0.625rem;
    height: 11.475rem;
}
#user-info img {
    height: 8rem;
    width: auto;
    border-radius: 50%;
}

/* 9) Fancy login/register buttons */
#logButton {
    position: relative;
    width: 50%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-family: 'FontFamm1';
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(to bottom, #7f3199 5%, #cf5fe6 100%);
    border: 0.05rem solid #000001;
    border-radius: 0.2rem;
    box-shadow: 0 0.1rem 0.2rem 0 #000, inset 0 0 0.2rem 0 #ff7af0;
    text-shadow: 0 0 0.2rem #bc8ab9;
    cursor: pointer;
}
#logButton:hover {
    background: #f4a3ff;
    border-color: #fff;
    box-shadow: 0 0 0.4rem 0 #fff, inset 0 0 0.5rem 0 #fff;
    text-shadow: -0.02rem 0.02rem #a700ff;
}
#logButton:active {
    top: 0.1rem;
}

/* 10) Form wrappers */
#login-form,
#register-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 11) Text inputs */
#login-form input,
#register-form input[type="text"],
#register-form input[type="password"],
#register-form input[type="email"] {
    width: calc(90% - 1.5rem);
    margin: 0.3rem 0;
    padding: 0.5rem;
    font-size: 1rem;
    border: 0.15rem solid #fff;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0.2rem #3e9793;
    text-align: center;
}

/* 12) Register submit button */
#login-register-button {
    padding: 0.625rem 1.25rem;
    font-size: 1.3rem;
    cursor: pointer;
}

/* 13) “Already have an account?” text */
#rega {
    padding-top: 1rem;
    font-size: 1rem;
    color: #AAC;
    font-style: italic;
    text-align: center;
}

/* 14) Error & success messages */
.error-message {
    margin-top: 1.5rem;
    padding: 0.5rem;
    color: #ff0004;
    background-color: #000;
    border: 0.15rem solid red;
    border-radius: 2rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    box-shadow: 0 0 1rem red;
}
.success-message {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: green;
    text-align: center;
}

/* 15) Swap‐form links */
#show-register-form,
#show-login-form {
    color: #FFBE00;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 0 #000099;
}
#show-register-form:hover,
#show-login-form:hover {
    color: #fff5d6;
    text-shadow: 0 0 0.5rem #ffbe00;
}

/* 16) g-recaptcha spacing */
.g-recaptcha {
    display: inline-block;
    padding-top: 0.5rem;
}

/* 17) Modal form selects */
.modal input[type='text'],
.modal input[type='password'],
.modal select {
    box-shadow: inset 0.1rem 0.1rem 0.4rem #3e8a97, 0 0 0.5rem 0 #000;
    font-weight: 600;
}
.modal select {
    margin: 0.3rem 0;
    padding: 0.5rem;
    font-size: 1rem;
    border: 0.15rem solid #fff;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0.2rem #3e9793, 0 0 0.5rem #000;
    text-align: center;
    background-color: #fff;
    color: #000;
    font-weight: 600;
}
.modal select:invalid,
.modal select option[value=""] {
    color: #999;
    font-weight: 100;
    font-style: italic;
}
.modal select option {
    background-color: #fff;
    color: #000;
    font-weight: 600;
}

/* 18) Placeholder styling */
input::placeholder {
    color: #999;
    font-style: italic;
    font-weight: 100;
}

.s-bubble {
  border: 2px dashed #c00;
  background-color: rgba(255,0,0,0.05);
	    display: flex
;
    gap: 0.75vh;
    margin-bottom: 0.5vh;
    align-items: flex-start;
    padding: 0.5vh;
    border-radius: 1vh;
    background: rgb(255 0 0 / 30%);
    box-shadow: 0 2px 2px rgb(0 0 0 / 60%);
    margin-right: 0.5vh;
}
/* container for username + the two tiny buttons */
/* stack “identity row” over the two buttons */
/* stack ident row + buttons and keep everything centred */
.user-info{
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontally centre both rows */
  gap: 0.4vh;
}

/* centre the “Signed in as : username” line */
.user-ident{
  display: flex;
  align-items: baseline;      /* keeps cap‐height alignment */
  justify-content: center;    /* centres as a group */
  gap: 8px;                   /* <= your minimum separation */
  font-size: 1.3vh;
}

/* style tweaks */
.signed-label{
  font-weight: 500;           /* normal weight, inherit colour */
}

.username{
  font-weight: 700;           /* bolder */
  color: #ffec66;             /* warm yellow tint – tweak as needed */
  overflow: hidden;           /* long names won’t break things */
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profileBtn {
	    font-size: 1.25vh;
	
}


#logoutBtn {
	    font-size: 1.25vh;
	
}


#loginModal.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}


@keyframes loginOverlayIn  { from {opacity:0} to {opacity:1} }
@keyframes loginOverlayOut { from {opacity:1} to {opacity:0} }
#loginModal.fade-in  { display:flex; animation: loginOverlayIn  .45s ease-out forwards; }
#loginModal.fade-out { animation: loginOverlayOut .30s ease-in  forwards; }


#loginModal .login-panel {
  width: 22rem;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;

  margin: 10% auto;
  padding: 1.25rem;
  position: relative;
  border-radius: 1rem;

  border: 0.2rem solid #3e8a97;
  box-shadow:
    inset 0 0 1rem 0 #3e9793,
    0 0.2rem 1rem 0.2rem #00000066;

  background-color: #0b1225;
  background-image: url('https://i.imgur.com/xV1wsSN.png');
  background-size: cover;
  background-position: center;

  color: #fff;
  text-shadow: 0.05rem 0.05rem #000;
  font-family: sans-serif;
}

@keyframes loginPanelIn  { from {opacity:0; transform: translateY(-10px) scale(.985)} to {opacity:1; transform: translateY(0) scale(1)} }
@keyframes loginPanelOut { from {opacity:1; transform: translateY(0)      scale(1)}    to {opacity:0; transform: translateY(-10px) scale(.985)} }
#loginModal .login-panel.fade-in  { animation: loginPanelIn  .35s ease-out both; }
#loginModal .login-panel.fade-out { animation: loginPanelOut .25s ease-in  both; }

#loginModal .login-panel.shake { animation: shake .5s ease both; }

#loginTitle {
  font-family: FontFamm1, system-ui, sans-serif;
  font-size: 1.8rem;
  font-weight: 100;
  margin: 0 0 .8rem;
  padding-bottom: .4rem;

  background-image: url(https://i.imgur.com/Mj7CYMG.png);
  background-size: auto 90%;
  background-position: top left;
  background-repeat: no-repeat;

  color: #fff;
  text-shadow: 0.05rem 0.05rem #000;
  border-bottom: 0.05rem solid #3e8a9755;
}

#close-modal {
  position: absolute;
  top: -0.5ch;
  right: -0.5ch;
  width: 2ch;
  height: 2ch;
  line-height: 2ch;
  font-size: 1.6rem;
  cursor: pointer;
  text-align: center;

  background-color: #bb0000;
  color: #fff;
  border: .15rem solid #fff;
  border-radius: 1rem;
  box-shadow: 0 0 .2rem .02rem #000, inset 0 0 .2rem .02rem #fff;
}
#close-modal:hover {
  background: #000;
  border-color: #f00;
  color: #f00;
  box-shadow: 0 0 .5rem .2rem #f00;
}

#loginForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
#loginForm input[type="text"],
#loginForm input[type="password"] {
  width: calc(90% - 1.5rem);
  margin: .3rem 0;
  padding: .5rem;
  font-size: 1rem;
  border: .15rem solid #fff;
  border-radius: .5rem;
  box-shadow: inset 0 0 .2rem #3e9793;
  text-align: center;
}

#loginButton.btn { width: 50%; }

/* Error message: reuse your style */
#loginError.error-message { display:none; }

@media (prefers-reduced-motion: reduce) {
  #loginModal.fade-in, #loginModal.fade-out,
  #loginModal .login-panel.fade-in, #loginModal .login-panel.fade-out {
    animation: none !important;
  }
}

/* ── Profile modal (scoped) ─────────────────────────────────── */
#profileModal .login-panel { width: 28rem; max-width: 92vw; }

#profileModal .profile-preview {
  display: grid;
  place-items: center;
  padding: .75rem 0 1rem;
}
#profileModal #profilePreview {
  width: 120px; height: 120px;
  border-radius: 50%;
  box-shadow: 0 0 .6rem rgba(0,0,0,.7), inset 0 0 .4rem rgba(255,255,255,.2);
  image-rendering: auto;
}

#profileModal .avatar-chooser { border: 0; margin: 0; padding: 0; }
#profileModal .avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  gap: .5rem;
  margin: .25rem 0 1rem;
}
#profileModal .avatar-tile {
  position: relative;
  border-radius: 12px;
  padding: 6px;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.15);
  cursor: pointer;
  outline: none;
}
#profileModal .avatar-tile[aria-selected="true"] {
  border-color: #3e8a97;
  box-shadow: 0 0 0 .12rem #3e8a97, inset 0 0 .5rem rgba(62,151,147,.6);
}
#profileModal .avatar-tile img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px;
}

#profileModal .hue-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem;
  margin: .25rem 0 1rem;
}
#profileModal #hueSlider { width: 100%; }
#profileModal #hueValue  { min-width: 2ch; display: inline-block; text-align: right; }

#profileModal .actions {
  display: grid;
  grid-auto-flow: column;
  gap: .6rem;
  margin-top: .25rem;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #profileModal .login-panel { animation: none !important; }
}