:root{
  --black-100:#111211;
  --black-200:#1a1c1a;
  --black-300:#232523;
  --black-400:#2f312f;
  --black-500:#454745;
  --gray-300:#b8bdb8;
  --gray-500:#7d827d;
  --white:#ffffff;
  --green-500:#8cff12;
  --glass:rgba(20,22,20,0.55);
  --glass-border:rgba(255,255,255,0.08);
  --font:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--black-100);
  color:var(--white);
}
a{color:inherit;text-decoration:none;}
input,textarea,select,button{font-family:var(--font);}

.page-gradient{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,255,255,0.07), transparent),
    radial-gradient(ellipse 60% 40% at 15% 30%, rgba(255,255,255,0.05), transparent),
    linear-gradient(160deg, var(--black-500), var(--black-100) 70%);
  min-height:100vh;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px;}

.navbar{
  position:sticky;top:16px;z-index:20;display:flex;justify-content:center;padding:0 20px;margin-bottom:20px;
}
.navbar-inner{
  display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1100px;
  background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-border);
  border-radius:999px;padding:10px 10px 10px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;}
.brand-mark{width:22px;height:22px;border-radius:7px;background:var(--green-500);display:flex;align-items:center;justify-content:center;color:var(--black-100);font-size:12px;font-weight:700;}

.btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13px;
  padding:11px 22px;border-radius:999px;border:none;cursor:pointer;text-align:center;
  transition:transform 150ms ease, filter 150ms ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:scale(0.97);}
.btn-solid{background:var(--green-500);color:var(--black-100);}
.btn-ghost{background:var(--glass);color:var(--white);border:1px solid var(--glass-border);backdrop-filter:blur(20px);}
.btn-outline{background:transparent;color:var(--gray-300);border:1px solid var(--black-400);}
.btn-danger{background:rgba(255,77,77,0.12);color:#ff8080;border:1px solid rgba(255,77,77,0.25);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:8px 16px;font-size:12px;}

.card{
  background:var(--black-200);border:1px solid var(--glass-border);border-radius:20px;
  padding:24px;box-shadow:0 8px 24px rgba(0,0,0,0.45);
}

.field{display:block;margin-bottom:16px;}
.field-label{font-size:12px;color:var(--gray-500);margin-bottom:6px;letter-spacing:0.3px;}
.input, textarea.input, select.input{
  width:100%;background:var(--black-300);border:1px solid var(--black-400);border-radius:10px;
  padding:11px 14px;color:var(--white);font-size:14px;outline:none;
}
.input:focus{border-color:var(--green-500);}
textarea.input{resize:vertical;min-height:70px;}

.alert-error{
  display:flex;gap:8px;align-items:flex-start;color:#ff8080;font-size:12.5px;
  background:rgba(255,77,77,0.1);border:1px solid rgba(255,77,77,0.25);
  border-radius:10px;padding:10px 12px;margin-bottom:16px;
}
.alert-success{
  color:#8cff12;font-size:12.5px;background:rgba(140,255,18,0.1);
  border:1px solid rgba(140,255,18,0.25);border-radius:10px;padding:10px 12px;margin-bottom:16px;
}

/* ---- Auth ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-card{width:100%;max-width:380px;}
.auth-tabs{display:flex;gap:8px;margin-bottom:20px;}
.auth-tab{
  flex:1;padding:10px;border-radius:10px;border:none;cursor:pointer;font-weight:500;font-size:13px;
  background:var(--black-300);color:var(--gray-300);
}
.auth-tab.active{background:var(--green-500);color:var(--black-100);}

/* ---- Landing ---- */
.hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;padding:60px 0;}
@media (max-width:820px){.hero{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-border);
  border-radius:999px;padding:6px 14px;font-size:12px;color:var(--gray-300);margin-bottom:20px;
}
.hero h1{font-weight:400;font-size:clamp(2.25rem,4vw,3.25rem);line-height:1.05;margin:0 0 18px;}
.hero h1 span{color:var(--green-500);}
.hero p{font-size:15px;color:var(--gray-300);line-height:1.6;margin:0 0 28px;max-width:480px;}

/* ---- Preview / público ---- */
.phone-frame{
  width:340px;border-radius:40px;border:8px solid var(--black-300);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.6);height:640px;background:var(--black-100);
}
.phone-frame .bio-scroll{height:100%;overflow-y:auto;}

.bio-page{min-height:100vh;padding:56px 20px 40px;display:flex;flex-direction:column;align-items:center;}
.bio-avatar{
  width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;box-shadow:0 8px 24px rgba(0,0,0,0.45);font-weight:600;font-size:26px;color:var(--black-100);
}
.bio-name{font-weight:500;font-size:20px;margin-bottom:6px;text-align:center;}
.bio-subtitle{font-size:13px;color:var(--gray-300);text-align:center;line-height:1.5;margin-bottom:24px;max-width:300px;}
.bio-video{width:100%;max-width:320px;border-radius:16px;overflow:hidden;margin-bottom:24px;border:1px solid var(--glass-border);box-shadow:0 8px 24px rgba(0,0,0,0.45);}
.bio-video iframe{display:block;width:100%;aspect-ratio:16/9;border:none;}
.bio-links{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;}
.bio-link{
  font-weight:500;font-size:14px;text-align:center;padding:15px 20px;border-radius:999px;
  transition:transform 150ms ease, filter 150ms ease;display:block;
}
.bio-link:hover{transform:translateY(-2px);filter:brightness(1.08);}
.bio-link:active{transform:scale(0.96);}
.bio-footer{margin-top:40px;font-size:11px;color:var(--gray-500);display:flex;align-items:center;gap:6px;}

/* ---- Dashboard ---- */
.dash-grid{display:grid;grid-template-columns:1fr 380px;gap:28px;}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr;}}
.dash-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.dash-tab{
  display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--black-400);background:transparent;color:var(--gray-300);font-size:13px;cursor:pointer;
  text-decoration:none;
}
.dash-tab.active{border-color:var(--green-500);background:rgba(140,255,18,0.1);color:var(--green-500);}

.gradient-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;}
.gradient-swatch{
  height:64px;border-radius:12px;cursor:pointer;border:1px solid var(--glass-border);position:relative;
  display:flex;align-items:flex-end;padding:6px 8px;font-size:10px;color:rgba(255,255,255,0.85);
}
.gradient-swatch.active{border:2px solid var(--green-500);}

.link-row{background:var(--black-300);border:1px solid var(--black-400);border-radius:14px;padding:16px;margin-bottom:14px;}
.link-row-top{display:flex;gap:10px;margin-bottom:10px;}
.swatch-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:1px solid var(--glass-border);}
.swatch.active{border:2px solid var(--green-500);}

.preview-col{display:flex;flex-direction:column;align-items:center;position:sticky;top:100px;height:fit-content;}
.preview-caption{font-size:11px;color:var(--gray-500);margin-top:12px;}

.footer-bar{
  display:flex;justify-content:center;padding:0 20px 24px;margin-top:20px;
}
.footer-bar-inner{
  display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1160px;
  background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-border);
  border-radius:999px;padding:6px 20px;font-size:12px;color:var(--gray-500);
}

.empty-hint{
  border:1px dashed var(--glass-border);border-radius:999px;padding:15px 20px;text-align:center;
  color:var(--gray-500);font-size:13px;
}