/* Shared styles for Robo demo */
:root{ --bg1:#0f172a; --bg2:#071024; --card:#071026; --muted:#9aa4b2; --accent:#6ee7b7; --accent2:#60a5fa; }
*{box-sizing:border-box}
body{ margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; background:linear-gradient(180deg,var(--bg1),var(--bg2)); color:#e6eef8; }
.site-header{ display:flex; align-items:center; padding:18px 28px; gap:18px; }
.brand{ font-weight:800; font-size:18px; }
.site-header nav a{ color:var(--muted); margin-right:10px; text-decoration:none }
.site-header nav a.active{ color:#fff; }
.hero{ display:flex; gap:24px; max-width:1200px; margin:28px auto; padding:0 20px; }
.hero-card{ flex:1; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:28px; border-radius:12px; }
.features{ width:300px; display:flex; flex-direction:column; gap:12px }
.feature{ background:rgba(255,255,255,0.02); padding:12px; border-radius:10px }
.lead{ color:var(--muted) }
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700 }
.btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#071129 }
.btn.ghost{ border:1px solid rgba(255,255,255,0.03); color:var(--muted); padding:8px 12px }
.auth-shell{ display:flex; align-items:center; justify-content:center; min-height:70vh }
.auth-card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:24px; border-radius:12px; width:420px }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; }
.container{ max-width:1200px; margin:18px auto; display:grid; grid-template-columns:1fr 360px; gap:18px; padding:0 20px }
.sidebar{ position:sticky; top:20px }
.row{ display:flex; gap:8px }
input,textarea,select{ width:100%; padding:10px; margin-top:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:inherit }
.items{ max-height:420px; overflow:auto; margin-top:10px }
.item{ padding:12px; border-radius:8px; margin-bottom:10px; border:1px solid rgba(255,255,255,0.02) }
.log{ margin-top:12px; height:200px; overflow:auto; padding:10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; color:#bfeece }
.muted{ color:var(--muted) }
.link{ color:var(--muted); text-decoration:none }
@media (max-width:980px){ .container{ grid-template-columns:1fr } .hero{ flex-direction:column } }