@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

:root{
  color-scheme:dark;
  --bg:#070b14;--panel:rgba(13,20,34,.78);--line:rgba(154,181,218,.14);
  --text:#edf4ff;--muted:#8493aa;--cyan:#70d9e8;--blue:#6c9fff;
  --gold:#d5b77a;--human:#86c6d0;--robot:#8caeff;
  font-family:"Vazirmatn",Tahoma,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{min-height:100vh;overflow-x:hidden;position:relative;background:
 radial-gradient(ellipse at 50% 43%,rgba(31,61,93,.30),transparent 37%),
 radial-gradient(ellipse at 12% 80%,rgba(18,93,108,.11),transparent 34%),
 radial-gradient(ellipse at 88% 20%,rgba(52,73,130,.12),transparent 33%),#070b14}
button,input{font:inherit}
button{color:inherit}
#network-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ambient{position:fixed;pointer-events:none;filter:blur(90px);opacity:.14;z-index:0;border-radius:50%}
.ambient-a{width:260px;height:260px;background:#2d8caa;top:23%;left:5%}
.ambient-b{width:300px;height:300px;background:#4d5eb7;right:2%;bottom:7%}
.topbar,.footerbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,4vw,64px)}
.topbar{height:88px;border-bottom:1px solid rgba(166,191,224,.08)}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(112,217,232,.5);border-radius:12px;color:var(--cyan);font-size:21px;font-weight:800;box-shadow:0 0 22px rgba(112,217,232,.1);transform:rotate(-8deg)}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}
.brand-copy strong{font-size:14px;letter-spacing:2px}
.brand-copy small{font-size:8px;letter-spacing:2px;color:#72849c;margin-top:5px;direction:ltr}
.topbar-right{display:flex;align-items:center;gap:17px;color:#8796ad;font-size:11px}
.network-status{display:flex;align-items:center;gap:8px;color:#b7d7d8}
.network-status i,.portrait-tag i{width:6px;height:6px;background:#5fe0b4;border-radius:50%;box-shadow:0 0 12px #5fe0b4;display:inline-block}
.topbar-divider{height:18px;width:1px;background:var(--line)}
.universe{position:relative;z-index:1;min-height:calc(100vh - 154px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.94fr) minmax(0,1fr);align-items:center;gap:clamp(12px,2.2vw,34px);padding:28px clamp(14px,3vw,46px) 20px;max-width:1700px;margin:0 auto}
.side{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.side-heading{width:min(100%,410px);display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid rgba(155,184,222,.12);padding:0 4px 13px}
.heading-kicker{font-size:8px;letter-spacing:1.8px;color:#71849d;direction:ltr;display:block;text-align:right}
.side-heading h2{font-size:18px;font-weight:500;margin:6px 0 0;letter-spacing:-.4px}
.side-count{font-size:8px;letter-spacing:1px;color:#61758e;direction:ltr}
.avatar-cloud{width:min(100%,440px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;align-items:center;gap:clamp(13px,2vw,25px) 9px;padding:10px 2px}
.avatar-node{position:relative;width:clamp(62px,6.1vw,86px);aspect-ratio:1;border:1px solid rgba(164,193,226,.18);border-radius:23px;background:linear-gradient(145deg,rgba(23,36,55,.95),rgba(10,17,29,.94));display:grid;place-items:center;cursor:default;box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);animation:node-float var(--float-time,5s) ease-in-out infinite;animation-delay:var(--delay,0s);transition:border-color .3s,box-shadow .3s,transform .3s}
.avatar-node:nth-child(3n){border-radius:50%}
.avatar-node:nth-child(4n){border-radius:29px 18px 27px 18px}
.avatar-node:hover{z-index:5;border-color:rgba(112,217,232,.65);box-shadow:0 0 25px rgba(112,217,232,.13),0 16px 32px rgba(0,0,0,.3);transform:translateY(-5px) scale(1.05)}
.avatar-art{width:83%;height:83%;overflow:visible}
.node-ring{position:absolute;inset:-5px;border:1px solid rgba(112,217,232,.12);border-radius:inherit;pointer-events:none}
.side-robots .node-ring{border-color:rgba(130,162,255,.14)}
.node-bubble{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translate(-50%,5px);padding:7px 10px;border:1px solid rgba(135,173,211,.2);border-radius:9px;background:rgba(7,13,24,.96);color:#dce9f6;font-size:9px;line-height:1.6;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none}
.node-bubble:after{content:"";position:absolute;top:100%;left:50%;border:5px solid transparent;border-top-color:rgba(135,173,211,.2);transform:translateX(-50%)}
.avatar-node.show-bubble .node-bubble,.avatar-node:hover .node-bubble{opacity:1;visibility:visible;transform:translate(-50%,0)}
.side-note{font-size:10px;color:#71829a;margin:0;letter-spacing:.2px}
.core{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative}
.core:before{content:"";position:absolute;width:min(34vw,430px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(121,173,208,.09);box-shadow:0 0 0 26px rgba(111,166,202,.018),0 0 0 62px rgba(111,166,202,.012);pointer-events:none}
.core-label{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin-bottom:15px;color:#92a8bf;font-size:8px;letter-spacing:2px;direction:ltr}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:#6de0c1;box-shadow:0 0 12px #6de0c1;display:inline-block;animation:pulse 2s infinite}
.profile-card{position:relative;z-index:1;width:min(100%,330px);padding:11px;border:1px solid rgba(152,187,225,.22);border-radius:25px;background:linear-gradient(150deg,rgba(23,35,54,.94),rgba(9,15,26,.96));box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 70px rgba(77,142,182,.1),inset 0 1px 0 rgba(255,255,255,.08);text-align:right;cursor:pointer;transform-style:preserve-3d;transition:border-color .3s,box-shadow .3s}
.profile-card:hover{border-color:rgba(112,217,232,.55);box-shadow:0 35px 100px rgba(0,0,0,.56),0 0 80px rgba(77,142,182,.18)}
.portrait-wrap{position:relative;width:100%;height:clamp(260px,34vh,365px);overflow:hidden;border-radius:17px;background:#121b2a}
.portrait{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 24%;filter:saturate(.88) contrast(1.04);transition:transform .7s}
.profile-card:hover .portrait{transform:scale(1.025)}
.portrait-shade{position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(5,10,18,.55))}
.portrait-tag{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(5,10,18,.56);backdrop-filter:blur(8px);font-size:8px;letter-spacing:1px;direction:ltr}
.portrait-corner{position:absolute;width:19px;height:19px;border-color:rgba(112,217,232,.7);border-style:solid;opacity:.8}
.corner-tl{top:9px;left:9px;border-width:1px 0 0 1px;border-radius:4px 0 0}
.corner-br{bottom:9px;right:9px;border-width:0 1px 1px 0;border-radius:0 0 4px}
.profile-details{padding:14px 9px 9px}
.profile-overline{font-size:8px;color:#8399b4;letter-spacing:2px;direction:ltr;text-align:right}
.profile-details h1{font-size:29px;line-height:1.1;letter-spacing:2px;margin:6px 0 3px;direction:ltr;text-align:right}
.profile-details h1 em{font-style:normal;color:var(--cyan)}
.profile-details p{font-size:14px;color:#dce6f2;margin:0}
.profile-role{font-size:8px;color:#8496ae;letter-spacing:1.3px;direction:ltr;text-align:right;margin-top:8px}
.profile-role b{color:var(--gold);padding:0 5px}
.profile-action{border-top:1px solid rgba(150,180,216,.12);margin-top:5px;padding:12px 9px 4px;display:flex;align-items:center;justify-content:space-between;color:#a8bbd0;font-size:10px}
.profile-action b{font-size:17px;color:var(--cyan);font-weight:400;transition:transform .2s}
.profile-card:hover .profile-action b{transform:translateX(-4px)}
.core-footnote{display:flex;align-items:center;gap:9px;margin-top:18px;color:#657991;font-size:7px;letter-spacing:1.5px;direction:ltr}
.foot-line{height:1px;width:24px;background:linear-gradient(90deg,transparent,rgba(112,217,232,.5))}
.footerbar{min-height:66px;border-top:1px solid rgba(166,191,224,.07);color:#5e7088;font-size:8px;letter-spacing:1.5px}
.footer-left,.footer-right{display:flex;align-items:center;gap:9px;direction:ltr}
.footer-symbol{font-size:17px;color:#7bd2df}
.footer-line{width:27px;height:1px;background:#5f819b}
.modal-backdrop{position:fixed;inset:0;z-index:20;background:rgba(2,6,13,.76);backdrop-filter:blur(12px);display:grid;place-items:center;padding:18px}
.modal-backdrop[hidden]{display:none}
.modal-panel{position:relative;width:min(100%,470px);max-height:min(92vh,800px);overflow:auto;padding:30px;border:1px solid rgba(143,184,219,.22);border-radius:22px;background:linear-gradient(145deg,#111d2d,#09111e);box-shadow:0 30px 100px rgba(0,0,0,.6)}
.modal-close{position:absolute;left:17px;top:15px;width:34px;height:34px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.04);font-size:22px;line-height:1;cursor:pointer;color:#c5d4e5}
.modal-eyebrow{display:flex;align-items:center;gap:8px;color:#8ca5bf;font-size:8px;letter-spacing:1.8px;direction:ltr}
.modal-panel h2{font-size:22px;font-weight:600;margin:13px 0 5px}
.modal-intro{font-size:12px;color:#8b9bb0;margin:0 0 22px}
.registration-form{display:flex;flex-direction:column;gap:13px}
.registration-form label,.otp-preview label{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#c1cfdf}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.registration-form input,.otp-preview input{width:100%;height:45px;padding:0 13px;border:1px solid rgba(150,180,216,.17);border-radius:10px;background:rgba(4,10,19,.65);color:#f2f6fb;outline:none;font-size:12px}
.registration-form input:focus{border-color:rgba(112,217,232,.65);box-shadow:0 0 0 3px rgba(112,217,232,.08)}
.registration-form input::placeholder{color:#65758b}
.primary-button{height:47px;border:1px solid rgba(122,218,229,.45);border-radius:11px;background:linear-gradient(110deg,#1b6172,#286b8a);color:#f5fbff;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(23,111,135,.17);transition:filter .2s,transform .2s}
.primary-button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
.primary-button span{font-size:17px;margin-right:8px}
.form-privacy{font-size:9px;color:#6f8096;text-align:center;margin:0}
.otp-preview{display:flex;flex-direction:column;gap:14px}
.otp-preview[hidden]{display:none}
.otp-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(112,217,232,.1);color:var(--cyan);font-size:21px}
.otp-preview h3{margin:0;font-size:18px}
.otp-preview p{font-size:11px;line-height:1.9;color:#91a3b9;margin:0}
.primary-button:disabled{opacity:.45;cursor:not-allowed}
.text-button{border:0;background:transparent;color:#9db6cb;font-size:11px;cursor:pointer;padding:8px}
.toast{position:fixed;z-index:30;bottom:24px;left:50%;transform:translate(-50%,15px);padding:11px 16px;border:1px solid rgba(112,217,232,.25);border-radius:10px;background:#101d2b;color:#d8eaf4;font-size:11px;opacity:0;visibility:hidden;transition:.25s;box-shadow:0 12px 35px rgba(0,0,0,.35);max-width:calc(100% - 30px);text-align:center}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes node-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 10px #6de0c1}50%{opacity:.45;box-shadow:0 0 3px #6de0c1}}
@media(max-width:1100px){
 .universe{grid-template-columns:minmax(0,1fr) minmax(250px,.9fr) minmax(0,1fr);gap:8px;padding-inline:16px}
 .avatar-cloud{grid-template-columns:repeat(2,minmax(0,1fr));max-width:260px}
 .avatar-node{width:clamp(64px,7vw,78px)}
 .side-heading{max-width:270px}
 .side-heading h2{font-size:16px}
 .side-count{font-size:7px}
}
@media(max-width:760px){
 .topbar{height:70px;padding:14px 18px}
 .topbar-caption,.topbar-divider{display:none}
 .topbar-right{font-size:10px}
 .universe{min-height:auto;display:flex;flex-direction:column;gap:24px;padding:28px 15px 35px}
 .core{order:0;width:100%}
 .core:before{width:75vw;max-width:340px}
 .profile-card{width:min(82vw,330px)}
 .portrait-wrap{height:clamp(260px,42vh,340px)}
 .side{width:100%;gap:13px}
 .side-humans{order:1}
 .side-robots{order:2}
 .side-heading{width:100%;max-width:480px;padding-bottom:9px}
 .avatar-cloud{width:100%;max-width:480px;display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:visible;padding:13px 7px 18px;gap:14px;scrollbar-width:thin;scrollbar-color:#314a60 transparent}
 .avatar-node{flex:0 0 68px;width:68px}
 .node-bubble{font-size:8px}
 .side-note{font-size:9px}
 .footerbar{padding:15px 18px;min-height:55px}
 .footer-right{display:none}
 .footerbar{justify-content:center}
}
@media(max-width:390px){
 .field-row{grid-template-columns:1fr}
 .modal-panel{padding:25px 19px}
 .profile-card{width:min(88vw,320px)}
 .footerbar{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Stage 2: authenticated account and real OTP form */
.otp-preview[hidden],.signed-in-view[hidden]{display:none!important}
.account-summary{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid rgba(150,180,216,.16);border-radius:13px;background:rgba(4,10,19,.42)}
.account-avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,#286b82,#344b70);font-size:20px;color:#fff}
.account-summary div{display:flex;flex-direction:column;gap:5px}
.account-summary strong{font-size:14px;color:#edf6ff}
.account-summary small{font-size:10px;color:#8da1b8}
.account-mobile{font-size:11px;color:#90a3b9;margin:13px 0 3px}
.account-mobile b{color:#d8e9f4;direction:ltr;display:inline-block}
.otp-preview .primary-button{margin-top:3px}
.otp-preview label{margin-top:2px}
.otp-preview input{text-align:center;letter-spacing:8px;font-size:19px;font-weight:700;direction:ltr}
.registration-form .primary-button:disabled,.otp-preview .primary-button:disabled{opacity:.55}
@media(max-width:760px){.modal-panel{max-height:calc(100dvh - 28px)}}

.account-chat-link{display:flex;align-items:center;justify-content:center;text-decoration:none;margin:14px 0 8px}

/* Stage 6 — home 3D avatar, authentication tabs and Persian calendar */
.portrait-wrap{background:radial-gradient(ellipse at 50% 38%,rgba(66,114,140,.36),transparent 53%),linear-gradient(150deg,#152337,#080f19)}
.home-avatar-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;outline:0}
.home-avatar-canvas.avatar-webgl-failed{opacity:0}
.portrait-shade{z-index:2;pointer-events:none;inset:55% 0 0;background:linear-gradient(transparent,rgba(5,10,18,.66))}
.portrait-tag{z-index:3}
.topbar-auth{border:1px solid rgba(112,217,232,.34);background:rgba(29,69,87,.25);color:#c8eef2;border-radius:9px;padding:8px 13px;font-size:10px;cursor:pointer;white-space:nowrap;transition:.2s}
.topbar-auth:hover{background:rgba(52,117,139,.36);border-color:rgba(112,217,232,.65)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;margin:15px 0 17px;border:1px solid rgba(143,184,219,.15);border-radius:11px;background:rgba(5,12,22,.55)}
.auth-tab{border:0;border-radius:8px;padding:10px 8px;background:transparent;color:#8297ad;font-size:11px;cursor:pointer}
.auth-tab.active{background:linear-gradient(110deg,rgba(40,107,126,.55),rgba(45,72,111,.5));color:#e6faff;box-shadow:inset 0 0 0 1px rgba(116,213,224,.18)}
.remember-row{display:flex!important;flex-direction:row!important;align-items:center;gap:9px!important;margin:5px 0 12px!important;color:#a9bacd!important;font-size:10px!important;line-height:1.8}
.remember-row input{width:15px!important;height:15px!important;accent-color:#75d5df;margin:0;flex:0 0 auto}
.jalali-picker{position:relative;width:100%}
.jalali-picker>input:first-child{padding-left:48px;cursor:pointer}
.jalali-picker-trigger{position:absolute;left:7px;top:7px;width:34px;height:34px;border:1px solid rgba(112,217,232,.22);border-radius:8px;background:rgba(42,91,112,.24);color:#a7e8ed;cursor:pointer}
.jalali-calendar{position:absolute;z-index:30;top:calc(100% + 7px);right:0;width:min(100%,330px);padding:12px;border:1px solid rgba(126,190,213,.25);border-radius:13px;background:#0b1625;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.jalali-calendar-head{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;text-align:center;margin-bottom:10px}
.jalali-calendar-head strong{font-size:12px;color:#e6f6fb}
.jalali-calendar-head button,.jalali-calendar-foot button{height:31px;border:1px solid rgba(140,180,211,.16);border-radius:7px;background:rgba(27,49,69,.7);color:#cce9ef;cursor:pointer}
.jalali-calendar-head button{font-size:20px;line-height:1}
.jalali-weekdays,.jalali-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.jalali-weekdays{margin-bottom:5px;color:#7794aa;font-size:9px}
.jalali-day{height:34px;border:1px solid transparent;border-radius:8px;background:rgba(27,45,65,.55);color:#d7e6f1;font-size:10px;cursor:pointer}
.jalali-day:hover:not(:disabled){border-color:rgba(112,217,232,.5);background:rgba(51,109,129,.4)}
.jalali-day.today{border-color:rgba(117,218,225,.42);color:#9de8e8}
.jalali-day.selected{background:linear-gradient(120deg,#2d7788,#3a668d);border-color:#8de5e9;color:#fff}
.jalali-day:disabled{opacity:.22;cursor:not-allowed}
.jalali-day.blank{background:transparent;border:0}
.jalali-calendar-foot{display:flex;justify-content:space-between;margin-top:10px}
.jalali-calendar-foot button{padding:0 12px;font-size:9px}
@media(max-width:760px){
 .topbar{gap:8px;padding-inline:13px}.topbar-right{gap:8px}.topbar-caption,.topbar-divider{display:none}
 .topbar-auth{padding:7px 9px;font-size:9px}
 .jalali-calendar{width:min(100%,310px)}
}
/* MR XYZ v6.3 — compact, instantly selectable Jalali birthdate */
.birthdate-field{display:flex;flex-direction:column;gap:9px}
.birthdate-label{font-size:12px;color:#d2e1ec;font-weight:500}
.jalali-direct-selects{display:grid;grid-template-columns:1.13fr 1.24fr .84fr;gap:9px;direction:rtl}
.jalali-select-label{display:flex!important;flex-direction:column;gap:6px;font-size:11px;color:#a4b9ce}
.registration-form .jalali-direct-selects select{width:100%;height:49px;min-width:0;padding:0 10px 0 24px;border:1px solid rgba(150,180,216,.22);border-radius:11px;background:#0d1b2b;color:#f2f6fc;outline:none;font:inherit;font-size:12px;cursor:pointer;appearance:auto;color-scheme:dark}
.registration-form .jalali-direct-selects select:focus{border-color:#70d9ea;box-shadow:0 0 0 3px rgba(112,217,232,.11)}
.registration-form .jalali-direct-selects select:disabled{opacity:.42;cursor:not-allowed}
.jalali-date-preview{padding:9px 11px;border:1px dashed rgba(134,178,210,.24);border-radius:10px;color:#8faec2;background:rgba(23,51,70,.20);font-size:11px;line-height:1.8}
.jalali-date-preview.selected{border-style:solid;border-color:rgba(99,211,182,.3);background:rgba(24,96,80,.16);color:#a7efd9}
.auth-feedback{padding:11px 13px;margin:8px 0 12px;border:1px solid rgba(232,140,128,.3);border-radius:10px;background:rgba(110,37,42,.2);color:#ffd7cd;font-size:11px;line-height:1.9;white-space:pre-line}
.modal-panel{width:min(100%,520px)}
@media(max-width:430px){.jalali-direct-selects{gap:6px;grid-template-columns:1.12fr 1.20fr .8fr}.registration-form .jalali-direct-selects select{padding:0 5px;font-size:11px;height:47px}.jalali-select-label{font-size:10px}}

/* Stage 6.6 — editable home character portraits and phrase bubbles */
.avatar-art.avatar-photo,.avatar-photo{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;overflow:hidden}
.node-bubble{width:max-content;max-width:min(230px,72vw);white-space:normal;text-align:center}
.node-bubble .node-job,.node-bubble .node-specialty,.node-bubble .node-phrase{display:block}
.node-bubble .node-job{color:#9fc4d8;font-size:8px}
.node-bubble .node-specialty{margin-top:2px;color:#7f9bb3;font-size:7px}
.node-bubble .node-phrase{margin-top:5px;padding-top:4px;border-top:1px solid rgba(135,173,211,.14);color:#e0f3f5;font-size:8px;font-style:normal;line-height:1.7}