:root{
  --bg:#0b0f1a;
  --card:#121a2b;
  --muted:#9fb0cf;
  --text:#e8f0ff;
  --brand:#5da9ff;
  --brand-2:#7bf1a8;
  --danger:#ff6b6b;
  --ok:#16d19a;
  --border:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, rgba(93,169,255,.12), transparent 60%),
              radial-gradient(1200px 600px at 110% 0%, rgba(123,241,168,.12), transparent 60%),
              var(--bg);
  color:var(--text);
}

a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

.container{
  max-width:1000px;
  margin:0 auto;
  padding:24px;
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; margin:12px auto 0; max-width:1000px;
  background:rgba(255,255,255,.02); border:1px solid var(--border);
  border-radius:var(--radius); backdrop-filter: blur(6px);
}
.nav .logo{font-weight:800; letter-spacing:.3px}
.nav .actions a{
  display:inline-block; padding:10px 14px; border:1px solid var(--border);
  border-radius:12px; margin-left:8px; background:rgba(255,255,255,.03)
}
.nav .actions a.primary{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001018; border:none; font-weight:700 }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}

.grid{ display:grid; gap:16px }
.grid.cols-2{ grid-template-columns: 1fr 1fr }
@media (max-width: 800px){ .grid.cols-2{ grid-template-columns: 1fr } }

.h1{font-size:28px; font-weight:800; margin:6px 0 16px}
.h2{font-size:18px; font-weight:700; color:var(--muted); margin:0 0 12px}
.muted{ color:var(--muted) }

.input, .select, .textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.02); color:var(--text);
  outline:none; transition:.2s border-color ease;
}
.input:focus, .select:focus, .textarea:focus{ border-color: rgba(123,241,168,.35) }
.textarea{ min-height:120px; resize:vertical }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.03); color:var(--text); cursor:pointer; transition: .2s transform ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn.primary{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001018; border:none; font-weight:800 }
.btn.danger{ background: linear-gradient(135deg, #ff8a8a, #ff6b6b); border:none; color:#1a0000; font-weight:700 }

.list{ display:grid; gap:12px }
.item{ padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02) }

.footer{
  max-width:1000px; margin:24px auto; color:var(--muted); text-align:center; font-size:14px;
  opacity:.8
}

/* Business Card public profile */
.profile{
  display:grid; gap:18px;
}
.profile .head{ display:flex; gap:16px; align-items:center }
.profile .avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; background:#2a3243; border:1px solid var(--border) }
.profile h1{ margin:0 }
.actions a.btn{ width:100% }
.actions{ display:grid; gap:12px; grid-template-columns: repeat(2, 1fr) }
@media(max-width:600px){ .actions{ grid-template-columns: 1fr } }

.hr{ height:1px; background:var(--border); border:0; margin:18px 0 }

/* Auth pages */
.auth-wrap{ max-width:560px; margin:32px auto }
.auth-wrap .logo{ text-align:center; font-weight:800; letter-spacing:.4px; margin-bottom:12px }
.auth-wrap .card{ padding:28px }
.auth-wrap form .grid{ grid-template-columns: 1fr }
.auth-wrap .meta{ text-align:center; margin-top:12px }


:root{
  --bg: #0b1220; --surface: #ffffff; --muted: #64748b; --border: #e5e7eb;
  --brand-900:#0b1220; --brand-700:#111827; --brand-500:#6366f1; --brand-300:#a5b4fc;
  --radius:16px; --shadow-sm:0 4px 12px rgba(2,6,23,.08); --shadow-md:0 8px 28px rgba(2,6,23,.12);
}
*{box-sizing:border-box} body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:#0f172a;background:#f8fafc;line-height:1.45;}
a{color:var(--brand-500);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:20px;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10;box-shadow:var(--shadow-sm);}
.logo{font-weight:900;letter-spacing:-.02em}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.h1{font-size:34px;font-weight:900;letter-spacing:-.02em} .h2{font-size:18px;font-weight:700;margin-bottom:8px} .muted{color:var(--muted)}
.input{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:#fff;outline:none;}
.input:focus{border-color:var(--brand-300);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;color:#0f172a;box-shadow:var(--shadow-sm);cursor:pointer;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn.primary{background:var(--brand-700);color:#fff;border-color:var(--brand-700)} .btn.ghost{background:transparent;border-color:transparent;color:#0f172a;}
.grid{display:grid;gap:12px} .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:32px} @media (max-width:900px){.grid2{grid-template-columns:1fr}}
.profile-banner{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,var(--brand-700),var(--brand-500));color:#fff;min-height:160px;display:flex;align-items:flex-end;box-shadow:var(--shadow-md);}
.profile-banner .banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.profile-avatar{position:absolute;left:20px;bottom:-36px;width:96px;height:96px;border-radius:999px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;border:3px solid white;box-shadow:0 10px 24px rgba(2,6,23,.25);}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:999px} .avatar-fallback{font-size:36px;font-weight:800}
.profile-head{padding:16px 16px 16px 132px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.public-card-preview,.public-card-full{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm)}
.pc-banner{position:relative;background:linear-gradient(135deg,var(--brand-700),var(--brand-500));color:white;padding:24px;min-height:120px;display:flex;align-items:flex-end;justify-content:center;}
.pc-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}
.pc-avatar{position:absolute;bottom:-32px;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:999px;border:3px solid white;background:rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(2,6,23,.25);}
.pc-avatar img{width:100%;height:100%;border-radius:999px;object-fit:cover;} .pc-avatar-fallback{font-size:28px;font-weight:800}
.pc-head{text-align:center;padding-top:16px;text-shadow:0 2px 10px rgba(0,0,0,.35)} .pc-title{font-size:22px;font-weight:800}
.pc-body{padding:48px 16px 16px} .pc-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand-700);color:white;padding:10px 14px;border-radius:999px;text-decoration:none;}
.hero-illustration{width:100%;border-radius:12px;margin:12px 0;box-shadow:0 10px 24px rgba(2,6,23,.25)}
.modal.hidden{display:none} .modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;}
.modal-dialog{width:min(720px,96vw);background:#fff;border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);} .modal-body{padding:16px}
.cropper-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px} .crop-hint{color:var(--muted);font-size:12px} .no-scroll{overflow:hidden}