/* ===== CYBER HACKED — sign-in, sign-up and account pages =====
   Same tokens, fonts, topbar and buttons as index.html and room.css. */
:root{
  --bg:#0c1220; --bg2:#080d18; --nav:#151d2e; --panel:#172034; --panel2:#202b42; --panel3:#2c3a57;
  --line:rgba(148,178,220,.14); --line-strong:rgba(148,178,220,.28);
  --red:#ff4433; --red-t:#ff6a5c; --red-btn:#e02d1c; --red-hover:#f23f2d; --red-dim:rgba(255,68,51,.15);
  --blue:#4fc3ff; --blue-dim:rgba(79,195,255,.13); --green:#3fe08a; --green-dim:rgba(63,224,138,.13); --amber:#ffc23c; --amber-dim:rgba(255,194,60,.13);
  --text:#f2f5fa; --text-dim:#b4c1d4; --text-faint:#8797af;
  --ar:'IBM Plex Sans Arabic',sans-serif; --head:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; --mono:'JetBrains Mono',monospace;
  --r:12px; --gutter:clamp(16px,3vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg); color:var(--text); font-family:var(--ar); font-size:17px; line-height:1.8; direction:rtl; text-align:right; min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head); line-height:1.3; color:#fff}
a{color:var(--blue)}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input{font:inherit}
::selection{background:var(--red); color:#fff}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}
.en{font-family:var(--mono); direction:ltr; unicode-bidi:isolate}

/* topbar: the same brand block as the rest of the site */
.topbar{position:sticky; top:0; z-index:50; background:var(--nav); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:16px; min-height:74px; max-width:1400px; margin:0 auto; padding-inline:var(--gutter)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; color:inherit}
.mark{position:relative; display:block; width:48px; height:39px; overflow:hidden; flex-shrink:0}
.mark img{position:absolute; width:65px; height:65px; max-width:none; left:-10px; top:-14px; mix-blend-mode:screen}
.brand-name{display:block; font-family:var(--head); font-weight:700; font-size:1.2rem; line-height:1.1; direction:ltr}
.brand-name b{color:#e8ecf2} .brand-name i{color:var(--red); font-style:normal}
.brand-tag{display:block; font-family:var(--mono); direction:ltr; font-size:.54rem; color:var(--text-faint); margin-top:4px; white-space:nowrap}
.top-link{margin-inline-start:auto; color:var(--text-dim); text-decoration:none; font-size:.9rem}
.top-link:hover{color:#fff}
@media(max-width:600px){ .brand-tag{display:none} }

/* buttons, as in index.html */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 24px; border-radius:7px; font-family:var(--ar); font-weight:700; font-size:.97rem; text-decoration:none; transition:transform .15s, background .15s, box-shadow .15s, border-color .15s}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red-btn); color:#fff}
.btn-red:hover{background:var(--red-hover); box-shadow:0 6px 22px rgba(255,68,51,.35); transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--line-strong); color:var(--text)}
.btn-ghost:hover{border-color:var(--text-dim); background:rgba(255,255,255,.04)}
.btn-sm{padding:7px 16px; font-size:.88rem}
.btn[disabled]{background:var(--panel3); color:var(--text-faint); cursor:not-allowed; box-shadow:none; transform:none; border-color:transparent}
.btn-block{width:100%}

/* auth card */
.auth{flex:1; display:flex; align-items:flex-start; justify-content:center; padding:clamp(28px,7vh,72px) var(--gutter) 48px}
.auth-card{width:min(440px,100%); background:var(--panel); border:1px solid var(--line-strong); border-radius:16px; padding:32px clamp(20px,5vw,34px)}
.auth-ico{width:62px; height:62px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; background:var(--red-dim); border:1px solid rgba(255,68,51,.4)}
.auth-card h1{font-size:1.45rem; text-align:center}
.auth-sub{color:var(--text-dim); text-align:center; font-size:.95rem; margin-top:6px}
.form{display:flex; flex-direction:column; gap:14px; margin-top:22px}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:.88rem; color:var(--text-dim); font-weight:500}
.field input{background:var(--bg2); border:1px solid var(--line-strong); border-radius:7px; padding:10px 13px; color:#fff; font-size:.98rem; outline:0; width:100%}
.field input:focus{border-color:var(--blue)}
.field input[dir="ltr"]{text-align:left}
.field .hint{font-size:.78rem; color:var(--text-faint)}
.otp-input{font-family:var(--mono) !important; letter-spacing:.5em; text-align:center !important; font-size:1.4rem !important}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.88rem}
.alt{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); text-align:center; font-size:.92rem; color:var(--text-dim)}
.linkbtn{color:var(--blue); text-decoration:underline; font-size:.88rem}

/* messages: same look as .note in room.css */
.note{padding:11px 15px; border-radius:5px; font-size:.92rem; line-height:1.75; color:var(--text-dim); border-right:3px solid var(--c,var(--blue)); background:var(--d,var(--blue-dim))}
.note b{color:#fff}
.note.err{--c:var(--red); --d:var(--red-dim); color:#ffd9d4}
.note.ok{--c:var(--green); --d:var(--green-dim)}
.note.warn{--c:var(--amber); --d:var(--amber-dim)}

/* account page */
.page{flex:1; width:min(860px,100%); margin:0 auto; padding:34px var(--gutter) 60px; display:flex; flex-direction:column; gap:18px}
.page-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.page-head .big-av{width:64px; height:64px; border-radius:50%; background:var(--bg2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:2rem}
.page-head h1{font-size:1.5rem}
.page-head p{color:var(--text-dim); font-size:.9rem}
.box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px clamp(16px,4vw,26px)}
.box h2{font-size:1.1rem; margin-bottom:4px}
.box > p{color:var(--text-dim); font-size:.9rem}
.box .form{margin-top:14px; max-width:460px}
.avatars{display:flex; gap:6px; flex-wrap:wrap}
.avatars button{width:44px; height:44px; border-radius:50%; background:var(--bg2); border:1.5px solid var(--line); font-size:1.3rem; transition:transform .15s, border-color .15s}
.avatars button:hover{transform:scale(1.08)}
.avatars button[aria-pressed="true"]{border-color:var(--red); box-shadow:0 0 0 3px var(--red-dim)}
.switch{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:12px}
.pill{display:inline-block; font-size:.78rem; font-weight:700; padding:2px 10px; border-radius:20px}
.pill.on{background:var(--green-dim); color:var(--green)}
.pill.off{background:var(--panel3); color:var(--text-dim)}
.devices{list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:12px}
.devices li{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:10px 14px}
.devices .d-main{min-width:0; flex:1}
.devices .d-name{font-weight:600; font-size:.92rem; overflow-wrap:anywhere}
.devices .d-meta{font-size:.78rem; color:var(--text-faint)}
.devices .here{color:var(--green); font-size:.78rem; font-weight:700}
.reauth{border:1px solid rgba(255,194,60,.35); background:var(--panel2)}

footer{border-top:1px solid var(--line); padding:18px var(--gutter); font-family:var(--mono); font-size:.66rem; color:var(--text-faint); text-align:center; direction:ltr}