:root { --bg:#050505; --panel:#0d0d0d; --text:#fff; --muted:#a3a3a3; --line:#242424; --soft:#151515; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at top,#171717 0,#050505 42%); color:var(--text); font-family:Inter, Arial, sans-serif; min-height:100vh; }
a { color:inherit; text-decoration:none; }
main { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
.nav { width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { font-weight:900; letter-spacing:-.06em; font-size:30px; }
.nav nav { display:flex; align-items:center; gap:18px; color:#d9d9d9; font-size:14px; }
.inline { display:inline; }
button, input, textarea, select { font:inherit; }
.pill, .primary, .secondary, .ghostButton { border-radius:999px; padding:12px 18px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #fff; cursor:pointer; }
.pill, .primary { background:#fff; color:#000; font-weight:800; }
.secondary { background:transparent; color:#fff; font-weight:800; border-color:#383838; }
.ghost { background:none; border:0; color:#d9d9d9; cursor:pointer; }
.full { width:100%; }
.hero { min-height:650px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:36px; }
.eyebrow { color:#d4d4d4; text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; }
h1 { font-size:clamp(42px, 8vw, 92px); line-height:.9; letter-spacing:-.08em; margin:10px 0 20px; }
.sub { color:var(--muted); font-size:20px; line-height:1.55; max-width:640px; }
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.phonePreview { display:flex; justify-content:center; }
.profileCard.mini { width:min(360px,100%); background:linear-gradient(180deg,#151515,#080808); border:1px solid #2b2b2b; border-radius:34px; padding:28px; box-shadow:0 30px 120px rgba(255,255,255,.08); text-align:center; }
.avatar { width:98px; height:98px; border-radius:28px; background:linear-gradient(135deg,#fff,#5a5a5a); margin:0 auto 16px; }
.profileCard h2 { font-size:34px; margin:8px 0; letter-spacing:-.05em; }
.profileCard p { color:var(--muted); }
.profileCard button { width:100%; margin:8px 0; padding:14px; background:#fff; color:#000; border:0; border-radius:16px; font-weight:900; }
.grid3, .pricing, .dashboardGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px 0 70px; }
.grid3 article, .priceCard, .panel, .authBox, .page { background:rgba(15,15,15,.78); border:1px solid var(--line); border-radius:28px; padding:26px; backdrop-filter:blur(16px); }
.grid3 h3 { font-size:24px; margin:0 0 8px; letter-spacing:-.04em; }
.grid3 p, .page p, .small, .tiny { color:var(--muted); line-height:1.6; }
.page { margin:50px auto 80px; }
.narrow { max-width:760px; }
.pricing { grid-template-columns:repeat(2,1fr); }
.priceCard.featured { border-color:#fff; box-shadow:0 0 80px rgba(255,255,255,.08); }
.price { font-size:44px; font-weight:900; letter-spacing:-.05em; }
ul { color:#d6d6d6; line-height:2; padding-left:20px; }
.authBox { max-width:430px; margin:70px auto; }
.authBox h1, .page h1, .dashHead h1 { font-size:clamp(38px,6vw,68px); }
.form { display:grid; gap:13px; }
.form input, .form textarea, .form select { width:100%; background:#070707; color:#fff; border:1px solid #2e2e2e; border-radius:16px; padding:14px; outline:none; }
.form textarea { min-height:105px; resize:vertical; }
.form label { display:grid; gap:8px; color:#d7d7d7; font-size:14px; }
.error { background:#2a0909; border:1px solid #722; padding:12px; border-radius:14px; }
.success { background:#092a15; border:1px solid #27643b; padding:12px; border-radius:14px; }
.dashHead { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:40px 0 20px; }
.dashHead p { color:var(--muted); }
.badge { border:1px solid #fff; border-radius:999px; padding:10px 16px; font-weight:900; }
.dashboardGrid { grid-template-columns:1fr 1fr; align-items:start; }
.row2 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.check { display:flex !important; grid-template-columns:none !important; flex-direction:row; align-items:center; gap:8px; }
.check input { width:auto; }
.compact { margin-bottom:20px; }
.linkEditor { display:grid; gap:12px; }
.linkEdit { display:grid; grid-template-columns:1fr; gap:8px; background:#080808; border:1px solid #232323; border-radius:20px; padding:14px; }
.linkEdit input { background:#030303; border:1px solid #252525; color:#fff; border-radius:12px; padding:11px; }
.delete { width:100%; background:#240909; color:#fff; border:1px solid #5a1d1d; border-radius:999px; padding:10px; cursor:pointer; }
.ghostButton { background:#111; color:#fff; border-color:#333; font-weight:800; }
.publicWrap { width:min(500px, calc(100% - 28px)); min-height:100vh; display:grid; place-items:center; padding:40px 0; }
.publicCard { width:100%; text-align:center; border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius:34px; padding:22px; background:rgba(0,0,0,.42); box-shadow:0 30px 130px rgba(0,0,0,.45); overflow:hidden; }
.publicBanner { height:130px; border-radius:24px; background-size:cover; background-position:center; margin-bottom:-44px; border:1px solid rgba(255,255,255,.15); }
.publicAvatar { width:112px; height:112px; border-radius:30px; object-fit:cover; border:4px solid var(--accent); background:#111; position:relative; }
.publicCard h1 { font-size:42px; margin:14px 0 4px; }
.publicUser, .publicBio, .views { opacity:.72; }
.discordLine { display:flex; align-items:center; justify-content:center; gap:8px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:#777; }
.dot.online { background:#23a55a; } .dot.idle { background:#f0b232; } .dot.dnd { background:#f23f43; } .dot.offline { background:#747f8d; }
.publicLinks { display:grid; gap:12px; margin:22px 0; }
.publicBtn { min-height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:900; transition:transform .18s ease, opacity .18s ease; }
.publicBtn:hover { transform:translateY(-2px); opacity:.88; }
.publicBtn img { width:25px; height:25px; object-fit:cover; border-radius:7px; }
.publicBtn.glass { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }
.publicBtn.solid { background:var(--accent); color:#000; }
.publicBtn.outline { border:1px solid var(--accent); }
.madeWith { opacity:.55; font-size:13px; }
.musicToggle { position:fixed; top:16px; right:16px; z-index:5; background:#fff; color:#000; border:0; border-radius:999px; padding:10px 14px; font-weight:900; cursor:pointer; }
.footer { width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:28px 0; color:#777; font-size:14px; }
@media (max-width:800px) { .hero, .grid3, .pricing, .dashboardGrid { grid-template-columns:1fr; } .nav { align-items:flex-start; } .nav nav { flex-wrap:wrap; justify-content:flex-end; } .dashHead { align-items:flex-start; flex-direction:column; } }

.discordConnectBox { display:flex; justify-content:space-between; align-items:center; gap:14px; background:#080808; border:1px solid #232323; border-radius:22px; padding:14px; }
.discordLeft { display:flex; align-items:center; gap:12px; min-width:0; }
.discordLeft strong { display:block; color:#fff; font-size:15px; }
.discordLeft p { margin:3px 0 0; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; }
.discordAvatar { width:48px; height:48px; border-radius:16px; object-fit:cover; background:#111; border:1px solid #303030; flex:0 0 auto; }
.discordAvatar.empty, .discordFallback { display:grid; place-items:center; background:#3b3b3b; color:#fff; font-weight:900; }
.smallBtn { padding:10px 13px; font-size:12px; white-space:nowrap; }
.advancedBox { border:1px solid #242424; border-radius:22px; overflow:hidden; background:#080808; }
.advancedBox summary { cursor:pointer; padding:15px 16px; font-weight:900; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.advancedBox summary::-webkit-details-marker { display:none; }
.advancedBox summary::after { content:'+'; color:#999; font-size:20px; line-height:1; }
.advancedBox[open] summary::after { content:'−'; }
.advancedContent { display:grid; gap:13px; padding:0 16px 16px; border-top:1px solid #1f1f1f; }
.connectedDiscordCard { margin:16px auto 0; width:min(320px,100%); min-height:78px; display:flex; align-items:center; gap:13px; text-align:left; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:13px; transition:transform .18s ease, opacity .18s ease; }
.connectedDiscordCard:hover { transform:translateY(-2px); opacity:.9; }
.connectedDiscordCard img, .connectedDiscordCard .discordFallback { width:52px; height:52px; border-radius:16px; object-fit:cover; flex:0 0 auto; }
.connectedDiscordCard strong { display:block; font-size:18px; letter-spacing:-.04em; }
.connectedDiscordCard small { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:800; text-transform:lowercase; }
@media (max-width:520px) { .discordConnectBox { align-items:flex-start; flex-direction:column; } .smallBtn { width:100%; } }

.uploadField { display:grid; gap:10px; }
.uploadField small { color:var(--muted); font-size:12px; font-weight:700; }
.fileOnly input[type="file"], .uploadField input[type="file"] { padding:12px; cursor:pointer; }
.currentUpload { display:flex; align-items:center; gap:10px; min-height:50px; background:#070707; border:1px solid #232323; border-radius:16px; padding:10px; color:var(--muted); font-size:12px; }
.currentUpload img { width:42px; height:42px; border-radius:12px; object-fit:cover; border:1px solid #333; }
.currentUpload.wide > span { width:74px; height:42px; border-radius:12px; background-size:cover; background-position:center; border:1px solid #333; flex:0 0 auto; }
.currentUpload.audioSaved > span { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#fff; color:#000; font-weight:900; }
.currentUpload em { color:var(--muted); font-style:normal; }
.currentUpload.smallIcon img { width:32px; height:32px; border-radius:10px; }
.miniCheck { margin-left:auto; font-size:12px !important; color:#aaa !important; }
.lockedUpload { opacity:.65; }
.colorRows { align-items:end; }
.colorField { gap:9px !important; }
.colorPick { height:48px; display:flex; align-items:center; gap:10px; background:#070707; border:1px solid #2e2e2e; border-radius:16px; padding:8px 10px; }
.colorPick input[type="color"] { width:34px; height:34px; min-width:34px; border:0; padding:0; background:transparent; border-radius:10px; overflow:hidden; cursor:pointer; }
.colorPick input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.colorPick input[type="color"]::-webkit-color-swatch { border:1px solid rgba(255,255,255,.35); border-radius:10px; }
.colorPick input[type="color"]::-moz-color-swatch { border:1px solid rgba(255,255,255,.35); border-radius:10px; }
.colorPick span { flex:1; color:#fff; font-weight:800; font-size:13px; letter-spacing:.02em; }
.colorPick span::before { content:''; display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--picked); margin-right:7px; box-shadow:0 0 18px var(--picked); }
.volumeKnob { position:fixed; top:16px; left:16px; z-index:10; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(0,0,0,.56); backdrop-filter:blur(18px); box-shadow:0 18px 60px rgba(0,0,0,.35); }
.volumeKnob button { width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; font-weight:900; cursor:pointer; display:grid; place-items:center; }
.volumeKnob button.playing { background:#fff; color:#000; }
.volumeKnob input[type="range"] { width:92px; accent-color:#fff; cursor:pointer; }
.volumeKnob span { min-width:24px; color:#fff; font-size:12px; font-weight:900; opacity:.8; }
@media (max-width:520px) { .volumeKnob { top:10px; left:10px; transform:scale(.9); transform-origin:top left; } .row2.colorRows { grid-template-columns:1fr; } }

.fieldTitle { margin:0; color:#d7d7d7; font-size:14px; font-weight:800; }
.pfpChoiceBox { display:grid; gap:10px; }
.pfpOption { display:flex !important; grid-template-columns:none !important; align-items:center; gap:12px; min-height:74px; padding:13px; background:#070707; border:1px solid #252525; border-radius:18px; cursor:pointer; transition:border-color .18s ease, background .18s ease, opacity .18s ease; }
.pfpOption.active { border-color:#fff; background:#101010; }
.pfpOption.disabled { opacity:.45; cursor:not-allowed; filter:grayscale(1); }
.pfpOption input { width:auto !important; accent-color:#fff; }
.pfpOption img, .miniDiscordLock { width:42px; height:42px; border-radius:14px; object-fit:cover; border:1px solid #333; flex:0 0 auto; }
.miniDiscordLock { display:grid; place-items:center; background:#333; color:#fff; font-weight:900; }
.pfpOption span { min-width:0; }
.pfpOption strong { display:block; color:#fff; font-size:14px; }
.pfpOption small { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.35; }

.uploadButtonLabel {
  display:grid !important;
  gap:9px !important;
  color:#d7d7d7;
  font-size:14px;
  font-weight:800;
}
.uploadButtonLabel input[type="file"] {
  position:absolute;
  width:1px;
  height:1px;
  padding:0 !important;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.uploadButton {
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid #303030;
  border-radius:16px;
  background:linear-gradient(180deg, #0f0f0f, #070707);
  color:#fff;
  font-weight:900;
  text-transform:lowercase;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.uploadButton:hover {
  border-color:#fff;
  transform:translateY(-1px);
  background:#111;
}
.uploadButtonLabel input[type="file"]:focus-visible + .fileName,
.uploadButtonLabel:focus-within .uploadButton {
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:3px;
}
.clipIcon {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-size:13px;
  line-height:1;
}
.fileName {
  color:var(--muted);
  font-style:normal;
  font-size:12px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lockedUpload .uploadButton,
.uploadButtonLabel input[type="file"]:disabled ~ .uploadButton,
.uploadButtonLabel:has(input[type="file"]:disabled) .uploadButton {
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

/* Strong upload button override: hides native file controls completely */
.hiddenFileInput,
.uploadButtonLabel input[type="file"] {
  display: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.uploadButtonLabel {
  cursor: pointer;
}

.uploadButtonLabel .uploadButton {
  width: 100%;
  min-height: 50px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #303030;
  border-radius: 16px;
  background: linear-gradient(180deg, #121212, #070707);
  color: #fff;
  font-weight: 900;
  text-transform: lowercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.uploadButtonLabel:hover .uploadButton {
  border-color: #fff;
  transform: translateY(-1px);
  background: #111;
}

.uploadButtonLabel .clipIcon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 13px;
  line-height: 1;
}