/* Shared NEXO visual system: public pages, account screens and social workspace. */
:root{--ink:#20233b;--green:#6253df;--muted:#666a80;--line:#e7e8f1;--accent:#6253df;--surface:#fff;--soft:#f0edff;color-scheme:light}
body{background:#f7f8fc;color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:15px;line-height:1.65}
*{box-sizing:border-box}a,button,input,textarea,select{-webkit-tap-highlight-color:transparent}a,button{transition:background .15s,color .15s,box-shadow .15s}button,input,select,textarea{font-family:inherit}button,a,input,textarea,select{touch-action:manipulation}
body>header,body>header.nav,.connected>header{height:80px;max-width:none;padding:0 max(24px,calc((100vw - 1440px)/2));background:#ffffffed;border-bottom:1px solid var(--line);gap:24px;position:sticky;top:0;z-index:30;backdrop-filter:blur(16px)}
.brand{font-size:25px;letter-spacing:-1px;color:#23243c;flex-shrink:0}.brand>b,.brand>span:first-child:not(:last-child),.connected .brand>span{width:42px;height:42px;background:linear-gradient(145deg,#7c6bef,#4d40c7);border-radius:14px;color:#fff;font-size:29px;display:grid;place-items:center;line-height:1;padding:0;box-shadow:0 5px 14px #6253df24}.brand small,.brand>span:last-child:not(:first-child){color:#73738e;font-size:9px;letter-spacing:2px}.brand small{border:0;margin-left:0;padding-left:4px}.brand>span:has(small){background:none;color:var(--ink);font-size:24px;width:auto;height:auto;box-shadow:none;display:block}
h1,h2,h3{color:var(--ink);letter-spacing:-.6px}h1{font-size:32px;line-height:1.4}h2{font-size:21px}p{overflow-wrap:anywhere}.muted,.form-note,.provider-note,.oauth-options small,.footnote,.tagline,.side-note p,.rightbar p{color:var(--muted)}.form-note,.provider-note,.oauth-options small{font-size:12px;line-height:1.8}.eyebrow,.step{font-size:11px;color:var(--accent);letter-spacing:1.6px}.notice{background:#fff5e8;color:#80502d;font-size:14px;border:1px solid #f5e2c7;border-radius:14px}
button,.primary,.button{background:var(--accent);color:#fff;border-radius:12px;border:1px solid transparent;font-size:14px;font-weight:650;min-height:46px;padding:11px 19px;cursor:pointer}.primary:hover,.button:hover,button:hover{background:#5043c4;filter:none;box-shadow:0 4px 12px #6253df20}.quiet{background:#f2f3f8;color:#555970}.quiet:hover{background:#e9e7f9;color:#4f43ba}.provider-button{background:#fff;color:var(--ink);border:1px solid var(--line);text-align:center;font-family:inherit}.provider-button:hover{background:#f4f2ff;color:#5144c5}.line-button,form[action*="provider=line"] .provider-button:not(:disabled){background:#06a94b;color:white;border-color:#06a94b}.provider-button:disabled,button:disabled{background:#f1f2f6;color:#717487;opacity:.65;cursor:not-allowed;box-shadow:none}
input,textarea,select{background:#f9f9fd;border:1px solid #dfe1ec;border-radius:12px;color:var(--ink);font-size:15px;min-height:46px}input::placeholder,textarea::placeholder{color:#85889d}input:focus,textarea:focus,select:focus{outline:2px solid #8f83ed;outline-offset:2px;background:#fff}a:focus-visible,button:focus-visible{outline:3px solid #9589ee;outline-offset:3px}label{font-size:14px}input,textarea{max-width:100%}
.shell,.connected .shell{max-width:1440px;gap:28px;margin:28px auto;padding:0 24px;grid-template-columns:200px minmax(0,720px) minmax(180px,1fr)}.chat-page .shell{grid-template-columns:200px minmax(0,1fr)}.sidebar{top:108px}.sidebar nav{gap:7px}.sidebar nav a{color:#666a82;border-radius:13px;font-size:14px;min-height:49px;gap:12px;font-weight:550}.sidebar nav a:hover{background:#eeedf7;color:#4f43bc}.sidebar nav a[aria-current]{background:#ebe7ff;color:#5142c7;font-weight:750;box-shadow:inset 3px 0 #6b59e7}.side-note{padding:22px 10px;color:#363951;overflow-wrap:anywhere}.side-note b{font-size:14px}.card{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:0 4px 20px #23234704;padding:25px}.heading{min-height:48px;margin-bottom:20px}.heading>a{background:var(--soft);color:#5144c5;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:650}.heading h1{margin:0}.pill,.account{background:#f0edff;border:0;color:#574bb5}.account{min-height:44px;display:flex;align-items:center}
.sidebar nav a::before{content:'';width:22px;height:22px;flex-shrink:0;background:currentColor;mask:center/contain no-repeat var(--nav-icon);-webkit-mask:center/contain no-repeat var(--nav-icon)}
.sidebar nav a[href*="messages"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' d='M20 11a8 8 0 0 1-8 8H4l-2 3V11a9 9 0 0 1 18 0Z'/%3E%3Cpath stroke='black' stroke-width='2' d='M6 9h10M6 13h7'/%3E%3C/svg%3E")}
.sidebar nav a[href*="friends"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2 21v-3a7 7 0 0 1 14 0v3M17 4a3 3 0 0 1 0 6m1 4a5 5 0 0 1 4 5v2'/%3E%3C/g%3E%3C/svg%3E")}
.sidebar nav a[href*="profile"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 22v-3a8 8 0 0 1 16 0v3'/%3E%3C/g%3E%3C/svg%3E")}
.sidebar nav a[href*="feed"],.sidebar nav a[href='/social/']{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' d='M3 10 12 3l9 7v11h-7v-7h-4v7H3Z'/%3E%3C/svg%3E")}.sidebar nav a>span{display:none}
.chat-workspace{height:calc(100dvh - 196px);min-height:480px;grid-template-columns:310px minmax(0,1fr);border-radius:23px;border:1px solid var(--line);box-shadow:0 12px 40px #24233f06}.chat-directory{padding:24px 16px;background:#fff}.chat-directory>b{font-size:14px;color:#6d7086}.chat-directory>input{background:#f3f4f9;border-color:transparent;border-radius:12px;font-size:14px}.contact-row{padding:15px 10px;border-radius:14px}.contact-row:hover,.contact-row[aria-current]{background:#f0edff}.contact-row i,.conversation-heading i,.person i,.author i{background:#eae5ff;color:#6253cc;border-radius:16px}.contact-copy b{font-size:14px}.contact-copy small{font-size:12px;color:#777a8e}.unread-count{background:#6b58df}.conversation-pane{background:radial-gradient(ellipse at 80% 0%,#f0edff 0,transparent 60%),#f9f9fd}.conversation-heading{padding:20px 24px;min-height:84px;background:#ffffffed}.conversation-heading small{color:#77798e;font-size:12px}.conversation-pane #messages{padding:26px;gap:17px}.bubble{background:white;border:1px solid #e9e8f1;box-shadow:0 3px 8px #23234304;line-height:1.8;font-size:15px;padding:13px 17px;max-width:78%;border-radius:18px 18px 18px 5px}.bubble.mine{background:#6756dc;border-color:#6756dc;border-radius:18px 18px 5px 18px;color:white}.bubble small{font-size:10px;opacity:.8}.message-composer{padding:16px 20px 5px;align-items:end;border-top:1px solid var(--line)}.message-composer textarea{background:#f4f4fa;border:0;border-radius:16px}.message-composer button{min-width:65px}.composer-hint{font-size:11px;color:#777b91;padding:5px 24px 15px}.chat-welcome{max-width:390px}.chat-welcome::before{content:'N';display:grid;place-items:center;width:90px;height:90px;border-radius:28px;margin:0 auto 26px;background:linear-gradient(140deg,#8a76f1,#5848cf);box-shadow:0 20px 50px #6253df22;color:#fff;font-size:53px;font-weight:750;transform:rotate(-8deg)}.chat-welcome h2{font-size:27px}.empty p{color:#777a91}.empty a{color:var(--accent)}
.profile-form{max-width:720px}.profile-form label:first-child{margin-top:0}.profile-form button{margin-top:12px}.people-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.person{padding:24px}.person::before{content:'N';width:60px;height:60px;margin:0 auto 15px;display:grid;place-items:center;background:#f0edff;color:#7b69d5;border-radius:50%;font-size:25px}.person:has(i)::before{display:none}.person h2{font-size:17px}.person p{font-size:13px}.safety-menu{border-color:var(--line)}.safety-menu summary{font-size:12px;color:#777b8b}.post-body{line-height:1.9}.comments p{background:#f5f4fb}.composer textarea{background:white}.profile-cover{background:linear-gradient(115deg,#ded5ff,#a899ef 60%,#6d60cf)}.mini-art{background:#f0edff;color:#a496e4}.liked{color:#6253df;background:#f0edff}
.signup{max-width:1140px;grid-template-columns:minmax(0,1fr) 440px;gap:90px;margin:60px auto 80px}.signup .intro{padding-top:35px}.signup h1{font-size:50px;line-height:1.4;letter-spacing:-1.8px}.signup h1 span{color:#7967df}.signup .intro>p{font-size:17px;color:#72738b}.form-card{border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:0 16px 60px #34305c08}.form-card h2{font-size:27px}.form-card .muted{font-size:14px}.form-card .primary{width:100%;margin-top:23px}.form-card label{font-size:13px}.oauth-options h3{font-size:14px}.footnote{font-size:13px}.art-bubble{color:#5c577b;font-size:16px}.art-bubble.reply{background:#7160df}.art-person{background:#e6e0fc;color:#7460d4}.conversation-art{background:radial-gradient(ellipse,#e7e1ff,transparent 70%)}.signup-steps{color:#71758d;font-size:13px;line-height:2.2}.preview,.nav-login{font-size:13px;color:#5c50bc;background:#eeebff;border:0;border-radius:12px;padding:12px 18px}.provider-avatar{border-radius:50%;border:4px solid white;box-shadow:0 3px 20px #6253df1a}
/* Public landing page uses the same palette with an editorial, spacious hero. */
body:has(.hero){background:#fbfbff}.nav nav{font-size:14px;color:#686780}.hero{padding-top:55px;padding-bottom:60px;gap:55px}.hero h1{font-size:clamp(40px,4.5vw,65px);line-height:1.3;color:#25233e;letter-spacing:-2px}.hero h1>span{color:#7863dd}.hero-copy>p{font-size:17px;color:#72718a}.caption{color:#76758c;font-size:12px}.visual-orbit{background:radial-gradient(ellipse,#e3dcff 15%,#f2edff 60%,transparent 71%)}.story-card{border-color:#e7e3f4;box-shadow:0 25px 65px #40377b14;transform:rotate(-6deg);border-radius:24px}.landscape{background:#e7deff}.sun{background:#ffcf9a}.hill.back{background:#b7a0db}.hill.front{background:#7770b5}.landscape-text{color:#49406d}.avatar{background:#ede6fc;color:#7b64bc}.chat-float{box-shadow:0 20px 55px #44367b12;border-color:#ebe6f4}.message{background:#f0edfa;color:#57506c}.message.own{background:#7562d6;color:white}.floating-note{color:#8776b0}.illustration-label{color:#858098;font-size:10px}.feature{background:#f1eeff;border-color:#e7e1f5;border-radius:24px;padding:30px}.feature.chat{background:#eef4ff}.feature.friends{background:#fff3ed}.feature-icon{color:#7864c8}.feature>p,.intro>p{color:#777187;font-size:14px}.feature-link{color:#6651ad;font-size:13px}.feature h3{font-size:22px}.join{background:linear-gradient(120deg,#32275e,#6550b0);border:0;border-radius:28px;padding:50px}.join h2{color:#fff}.join p,.join .eyebrow{color:#d5cbe9}.button.light{background:#eee8ff;color:#58418d}.release-note{font-size:12px;color:#7b768c}footer{border-color:var(--line)}footer>span,footer>a:last-child{font-size:12px;color:#777187}
@media(min-width:901px){.connected main:has(.profile-form){max-width:900px}.connected main:has(.profile-form)>h1{margin-bottom:24px}}
@media(max-width:1150px){.shell,.connected .shell{grid-template-columns:170px minmax(0,1fr);gap:20px}.rightbar{display:none}.chat-page .shell{grid-template-columns:150px minmax(0,1fr)}.chat-workspace{grid-template-columns:250px minmax(0,1fr)}.signup{gap:40px;padding:0 28px;grid-template-columns:minmax(0,1fr) 400px}.signup h1{font-size:40px}}
@media(max-width:900px){.hero{gap:20px}.chat-page .shell{grid-template-columns:115px minmax(0,1fr);gap:16px}.sidebar nav a{padding:12px 10px;gap:9px}.chat-workspace{grid-template-columns:210px minmax(0,1fr)}.signup{gap:25px;grid-template-columns:minmax(0,1fr) 370px}.signup h1{font-size:35px}}
@media(max-width:650px){body>header,body>header.nav,.connected>header{height:68px;padding:0 16px;gap:12px}.brand{font-size:22px}.brand small,.connected .brand small,.brand>span:last-child:not(:first-child){display:none}.brand>b,.brand>span:first-child:not(:last-child),.connected .brand>span{width:36px;height:36px;font-size:26px;border-radius:12px}.brand>span:has(small){display:block;background:none;width:auto;color:var(--ink);font-size:21px;box-shadow:none}.shell,.connected .shell,.chat-page .shell{display:block;padding:0 14px;margin:20px auto 100px}.sidebar nav{position:fixed;inset:auto 0 0;display:flex;justify-content:space-around;padding:9px 8px max(10px,env(safe-area-inset-bottom));background:#fffffff5;backdrop-filter:blur(15px);border-top:1px solid var(--line);z-index:40}.sidebar nav a{font-size:11px;min-height:52px;padding:5px 13px;gap:4px;flex-direction:column}.sidebar nav a[aria-current]{box-shadow:none;background:#f0edff}.sidebar nav a::before{width:22px;height:22px}.sidebar .side-note{display:none}h1{font-size:26px}.heading{margin-bottom:15px}.heading>a{font-size:12px;padding:10px 12px}.card{padding:20px;border-radius:18px}.chat-workspace{display:block;height:calc(100dvh - 235px);min-height:340px;border-radius:20px}.chat-directory{padding:20px 14px}.conversation-heading{min-height:75px;padding:13px}.conversation-pane #messages{padding:16px}.bubble{font-size:15px;max-width:89%}.message-composer{padding:12px 10px 5px;gap:8px}.message-composer button{min-width:54px;padding:10px}.composer-hint{padding-left:14px;font-size:10px}.people-grid{grid-template-columns:1fr}.signup{display:flex;flex-direction:column;margin:20px auto 40px;padding:0 18px;gap:24px}.signup .intro{padding:6px 5px}.signup h1{font-size:34px;letter-spacing:-1px;margin:15px 0}.signup .intro>p{font-size:15px}.form-card{padding:25px 22px;border-radius:22px}.form-card h2{font-size:25px}input,textarea,select{font-size:16px}.hero h1{font-size:40px;letter-spacing:-1.5px}.hero-copy>p{font-size:16px}.hero{padding-top:32px;gap:28px}.hero-visual{max-width:100%;overflow:hidden}.join{padding:30px 24px;border-radius:22px}.join h2{font-size:30px}.nav nav{display:none}.nav-login{font-size:12px;padding:10px 12px}.feature{padding:24px}.account{max-width:150px;font-size:12px}.provider-button{overflow-wrap:anywhere}.inline-form{flex-wrap:wrap}.inline-form input{flex:1 1 160px;min-width:0}}
.profile-banner{display:flex;align-items:center;gap:20px;padding:28px;margin-bottom:24px;border-radius:22px;background:linear-gradient(110deg,#ece7ff,#f6f3ff);border:1px solid #e4def8}.profile-banner h1{margin:0}.profile-banner p{margin:6px 0 0;color:#77708e;font-size:13px;overflow-wrap:anywhere}.profile-banner>div{min-width:0}.profile-monogram{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;background:white;color:#7160c8;border-radius:20px;font-size:28px;box-shadow:0 5px 20px #6253df12}@media(max-width:650px){.profile-banner{padding:20px;gap:14px}.profile-banner h1{font-size:23px}.profile-monogram{width:48px;height:48px;font-size:23px;border-radius:16px}}
.brand>span:last-child:has(small){display:block;font-size:24px;letter-spacing:-1px;line-height:1.1;color:var(--ink)}.brand>span:last-child:has(small) small{font-size:9px;letter-spacing:2px;line-height:1.2}@media(max-width:650px){.brand>span:last-child:has(small){display:block;font-size:21px}.brand>span:last-child:has(small) small{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}