:root{--bg:#0d1117;--panel:#151c28;--panel2:#1b2433;--line:#2d3a4f;--text:#eef4ff;--muted:#9aa8bc;--accent:#78a6ff;--accent2:#6be7ff;--danger:#ff7373;--shadow:0 24px 80px rgba(0,0,0,.4)}

*{box-sizing:border-box}

html,body{
height:100%;
margin:0;
overflow:hidden;
}

body{
min-height:100vh;
color:var(--text);
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
background:
radial-gradient(circle at 20% 0%,rgba(120,166,255,.28),transparent 30%),
radial-gradient(circle at 80% 10%,rgba(107,231,255,.15),transparent 25%),
linear-gradient(180deg,#0d1117,#090d13);
}

a{
color:inherit;
text-decoration:none;
}

button,input,textarea{
font:inherit;
}

.landing-shell{
height:100vh;
display:grid;
grid-template-columns:minmax(280px,520px) minmax(340px,1fr);
gap:20px;
padding:22px;
overflow:hidden;
}

.hero-card,
.preview-card{
background:rgba(21,28,40,.88);
border:1px solid rgba(255,255,255,.07);
border-radius:28px;
padding:24px;
box-shadow:var(--shadow);
backdrop-filter:blur(16px);
}

.hero-card{
display:flex;
flex-direction:column;
justify-content:center;
overflow:auto;
}

.brand-pill{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.06);
border-radius:999px;
padding:9px 12px;
color:#dce9ff;
font-weight:800;
}

.hero-card h1{
font-size:clamp(42px,7vw,76px);
line-height:.95;
margin:26px 0 14px;
}

.sub{
color:var(--muted);
font-size:18px;
line-height:1.55;
max-width:760px;
}

.actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin:24px 0;
}

.actions a,
.inline-row button,
.send-row button{
border:0;
border-radius:15px;
padding:13px 16px;
font-weight:850;
cursor:pointer;
}

.primary,
.send-row button{
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#06111f;
}

.ghost,
.inline-row button{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1)!important;
color:var(--text);
}

.guest-box{
margin-top:20px;
border-top:1px solid rgba(255,255,255,.08);
padding-top:18px;
}

.guest-box label,
.eyebrow{
display:block;
color:var(--muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
margin-bottom:8px;
}

.inline-row{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
}

.preview-card{
display:flex;
flex-direction:column;
height:calc(100vh - 44px);
max-height:calc(100vh - 44px);
overflow:hidden;
}

.preview-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:14px;
}

.preview-head h2{
margin:2px 0 0;
font-size:30px;
}

.status{
border-radius:999px;
padding:9px 12px;
background:rgba(66,211,146,.13);
border:1px solid rgba(66,211,146,.25);
color:#cbffe4;
font-weight:800;
}

.preview-messages{
flex:1;
overflow-y:auto;
overflow-x:hidden;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:14px;
background:rgba(4,8,14,.42);
max-height:100%;
}

.preview-msg{
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.06);
margin-bottom:10px;
}

.preview-meta{
font-size:12px;
color:var(--accent);
margin-bottom:5px;
font-weight:800;
}

input,
textarea{
width:100%;
border:1px solid rgba(255,255,255,.09);
border-radius:15px;
background:#0f1623;
color:var(--text);
outline:none;
padding:13px 14px;
}

input:focus,
textarea:focus{
border-color:rgba(120,166,255,.55);
box-shadow:0 0 0 4px rgba(120,166,255,.12);
}

.send-row{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
margin-top:12px;
}

textarea{
min-height:76px;
resize:vertical;
}

.auth-shell{
min-height:100vh;
display:grid;
place-items:center;
padding:22px;
}

.auth-card{
width:min(980px,100%);
background:rgba(21,28,40,.9);
border:1px solid rgba(255,255,255,.07);
border-radius:28px;
padding:24px;
box-shadow:var(--shadow);
}

.auth-card h1{
font-size:42px;
margin:8px 0 10px;
}

.auth-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin:22px 0;
}

.auth-box{
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:16px;
background:rgba(255,255,255,.04);
}

.auth-box h2{
margin:0 0 12px;
}

.auth-box input{
margin-bottom:10px;
}

.auth-box button{
width:100%;
border:0;
border-radius:15px;
padding:13px 16px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#06111f;
font-weight:900;
cursor:pointer;
}

.status-line{
min-height:22px;
color:#ffdca8;
}

@media(max-width:850px){

html,
body{
overflow:auto;
}

.landing-shell{
grid-template-columns:1fr;
height:auto;
overflow:visible;
}

.preview-card{
height:auto;
max-height:none;
min-height:560px;
}

.auth-grid{
grid-template-columns:1fr;
}

}

@media(max-width:560px){

.landing-shell{
padding:12px;
}

.hero-card,
.preview-card,
.auth-card{
border-radius:22px;
padding:18px;
}

.send-row,
.inline-row{
grid-template-columns:1fr;
}

.hero-card h1{
font-size:42px;
}

}