:root{
  --bg:#0b0d14; --panel:#141826; --panel2:#1b2030; --line:#272d40;
  --ink:#e8ebf5; --muted:#9aa3b8; --brand:#6c7bff; --brand2:#8a5cff;
  --ok:#34d399; --err:#fb7185; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:980px; margin:0 auto; padding:0 20px}
.narrow{max-width:560px}

/* header */
.nav{display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line); background:rgba(20,24,38,.6); backdrop-filter:blur(8px)}
.brand{font-weight:800; letter-spacing:-.02em; font-size:18px; color:var(--ink)}
.brand b{background:linear-gradient(90deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-links a{color:var(--muted); margin-left:18px; font-size:14px}
.nav-links a:hover{color:var(--ink); text-decoration:none}

/* hero */
.hero{padding:64px 0 32px; text-align:center}
.hero h1{font-size:40px; line-height:1.15; letter-spacing:-.03em; margin:0 0 14px}
.hero p{color:var(--muted); font-size:18px; max-width:560px; margin:0 auto}
.badge{display:inline-block; font-size:12px; color:var(--brand);
  border:1px solid var(--line); padding:5px 12px; border-radius:999px; margin-bottom:20px; background:var(--panel)}

/* cards / forms */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin:18px 0}
.grid{display:grid; gap:14px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
label{display:block; font-size:13px; color:var(--muted); margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=date],textarea{
  width:100%; padding:12px 14px; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; color:var(--ink); font-size:15px; font-family:inherit}
input:focus,textarea:focus{outline:none; border-color:var(--brand)}
textarea{min-height:120px; resize:vertical}
.suffix{display:flex; align-items:center; gap:0}
.suffix input{border-radius:10px 0 0 10px}
.suffix .tag{padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-left:none;
  border-radius:0 10px 10px 0; color:var(--muted); font-size:14px; white-space:nowrap}
.check{display:flex; align-items:center; gap:10px; color:var(--ink); font-size:14px; margin:8px 0}
.check input{width:18px; height:18px; accent-color:var(--brand)}

/* buttons */
.btn{display:inline-block; padding:12px 20px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--ink); font-size:15px; font-weight:600; cursor:pointer; text-align:center}
.btn:hover{text-decoration:none; border-color:var(--brand)}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand2)); border:none; color:#fff}
.btn-primary:hover{opacity:.92}
.btn-block{width:100%}
.btn-google{display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1f2330; border:none}
.btn-danger{background:transparent; color:var(--err); border-color:var(--line)}
.btn-sm{padding:7px 12px; font-size:13px}

/* misc */
.muted{color:var(--muted)}
.center{text-align:center}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:18px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.alert{padding:12px 16px; border-radius:10px; font-size:14px; margin:0 0 16px}
.alert-err{background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); color:#fda4af}
.alert-ok{background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); color:#6ee7b7}
.alert ul{margin:6px 0 0; padding-left:18px}
.site-list{list-style:none; padding:0; margin:0}
.site-item{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:var(--panel2); flex-wrap:wrap}
.site-item h3{margin:0; font-size:16px}
.site-item .url{font-size:13px; color:var(--brand)}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.foot{border-top:1px solid var(--line); margin-top:40px; padding:24px 0; color:var(--muted); font-size:13px; text-align:center}

/* public site */
.site-wrap{max-width:760px}
.site-nav{display:flex; gap:6px; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid var(--line); margin-bottom:8px}
.site-nav a{padding:8px 14px; border-radius:8px; color:var(--muted); font-size:14px}
.site-nav a.active,.site-nav a:hover{background:var(--panel); color:var(--ink); text-decoration:none}
.doc h1{font-size:30px; letter-spacing:-.02em}
.doc h2{font-size:19px; margin-top:30px}
.doc p,.doc li{color:#cdd3e3}
.doc .updated{color:var(--muted); font-size:13px}
.feature{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0}
@media(max-width:560px){.feature{grid-template-columns:1fr}}
.feature .f{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px}
.feature .f h4{margin:0 0 6px; font-size:15px}
.feature .f p{margin:0; font-size:13px; color:var(--muted)}

/* folder-style URL input (domain prefix + slug) */
.joined{display:flex; align-items:stretch}
.joined .pre{display:flex; align-items:center; padding:12px 6px 12px 14px;
  background:var(--panel); border:1px solid var(--line); border-right:none;
  border-radius:10px 0 0 10px; color:var(--muted); font-size:14px; white-space:nowrap}
.joined input{border-radius:0 10px 10px 0}