/* === Stylish Pill UI (Cresol Base Fest) === */

/* base variables */
:root {
  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
           "Apple Color Emoji", "Segoe UI Emoji";
  --cresol-black: #0b0b0c;
  --cresol-surface: #101114;
  --cresol-white: #ffffff;
  --cresol-muted: #a3a7ad;
  --cresol-orange: #ff6a00;
  --cresol-orange-700: #e85f00;
  --cresol-orange-900: #c34f00;

  --radius-card: 22px;
  --radius-pill: 999px;

  --bg-gradient: radial-gradient(1000px 600px at 20% -10%, rgba(255,255,255,.05), transparent 60%),
                 radial-gradient(900px 500px at 80% -5%, rgba(255,255,255,.05), transparent 60%),
                 linear-gradient(180deg, #0b0b0c, #15171b);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--cresol-white); font-family: var(--font); }

/* Background */
.bg-gradient { background: var(--bg-gradient); }
.bg-solid { background: #0b0b0c; }
.bg-cover { background: url('assets/cover.jpg') center/cover no-repeat fixed; }

/* Layout */
.safe-container {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.linktree-card {
  width: 100%;
  max-width: 520px;
  background: rgba(16,17,20,.85);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-card);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* Header */
.profile-avatar {
  width: 92px; height: 92px; object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.h-title {
  font-weight: 800; letter-spacing: .1px;
}
.subtle { color: var(--cresol-muted); }

/* Link list */
.link-list { display: grid; gap: 14px; }

.link-btn {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  border: 1.5px solid rgba(255,255,255,.08);
  background: #111316;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.35);
}
.link-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.45); }
.link-btn:active { transform: translateY(0); }

/* Pill Orange */
.pill-orange {
  background: linear-gradient(180deg, var(--cresol-orange), var(--cresol-orange-700));
  border-color: rgba(0,0,0,.15);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 24px rgba(255,106,0,.25);
}
.pill-orange:hover { background: linear-gradient(180deg, var(--cresol-orange-700), var(--cresol-orange)); }
.pill-orange:active { background: var(--cresol-orange-900); }

.link-left { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; }
.link-left i.bi { font-size: 18px; opacity: .95; }
.link-right i.bi { font-size: 18px; opacity: .95; }

/* Small devices tweaks */
@media (max-width: 390px) {
  .linktree-card { border-radius: 18px; }
  .link-btn { min-height: 54px; }
}

/* Admin retain dark theme */
.card, .table, .modal-content { background-color: #111214 !important; color: #fff; }
a, .link-light { color: #ffd8bf; }
a:hover { color: #ffb88a; }



/* --- Mobile polish for Instagram in-app browser --- */
html, body { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }

.link-list { gap: 16px; } /* more breathing room */
.link-btn {
  width: 100%;
  margin: 0; /* stabilize */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 16px rgba(0,0,0,.35); /* softer */
}

@media (max-width: 380px) {
  .linktree-card { border-radius: 16px; }
  .link-btn { min-height: 52px; padding: 10px 12px; }
}


/* --- Extra spacing & separation --- */
.link-list { gap: 22px !important; }

.link-btn {
  border-width: 2px;                    /* stronger edge */
  border-color: rgba(0,0,0,.25);        /* dark ring */
  border-radius: 999px;                 /* perfect pill */
  line-height: 1.2;                     /* stable text height */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px rgba(0,0,0,.35),         /* softer drop */
    0 0 0 1px rgba(255,255,255,.06);    /* hairline glow to separar */
}

/* Pill orange keeps visual separation too */
.pill-orange {
  border-color: rgba(0,0,0,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 18px rgba(255,106,0,.22),
    0 0 0 1px rgba(255,255,255,.06);
}

/* Card padding larger on mobile so pills respiram nas bordas */
@media (max-width: 480px) {
  .linktree-card { padding: 24px 18px !important; }
}

/* Tiny phones */
@media (max-width: 360px) {
  .link-list { gap: 18px !important; }
  .link-btn { min-height: 52px; }
}