@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   POWtfolio v2 | Complete Design System
   ============================================================ */

/* ====== CUSTOM PROPERTIES ====== */
:root {
  --purple:       #7C3AED;
  --purple-light: #A78BFA;
  --purple-dark:  #5B21B6;
  --rose:         #F43F5E;
  --rose-light:   #FB7185;
  --sky:          #0EA5E9;
  --emerald:      #10B981;
  --amber:        #F59E0B;

  --gray-900: #0F172A;
  --gray-800: #1E293B;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748B;
  --gray-400: #94A3B8;
  --gray-300: #CBD5E1;
  --gray-200: #E2E8F0;
  --gray-100: #F1F5F9;
  --gray-50:  #F8FAFC;
  --white:    #FFFFFF;

  --grad-brand:  linear-gradient(135deg, #7C3AED 0%, #F43F5E 100%);
  --grad-blue:   linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%);
  --grad-green:  linear-gradient(135deg, #10B981 0%, #14B8A6 100%);
  --grad-rose:   linear-gradient(135deg, #F43F5E 0%, #F97316 100%);
  --grad-orange: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
  --grad-dark:   linear-gradient(135deg, #1E293B 0%, #475569 100%);

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.07);
  --shadow:       0 4px 12px rgba(0,0,0,0.09);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.11);
  --shadow-lg:    0 20px 40px rgba(0,0,0,0.14);
  --shadow-brand: 0 6px 20px rgba(124,58,237,0.35);

  --transition: all 0.2s ease;
}

/* ====== RESET ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-800);
  background: var(--gray-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--purple); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--purple-dark); }
img { max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
h1,h2,h3,h4,h5 { font-weight: 700; line-height: 1.3; color: var(--gray-900); }

/* ====== LAYOUT ====== */
.container    { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 640px;  margin: 0 auto; padding: 0 1.25rem; }
.container-xs { max-width: 480px;  margin: 0 auto; padding: 0 1.25rem; }

/* ====== NAVBAR ====== */
.navbar {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  padding: 0.875rem 0;
  position: sticky;
  top: 0;
  z-index: 200;
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.nav-brand a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gray-600);
  transition: var(--transition);
  text-decoration: none;
}
.nav-link:hover { background: var(--gray-100); color: var(--gray-900); }
.nav-link.active { background: var(--gray-100); color: var(--purple); }
.nav-toggle {
  display: none;
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  color: var(--gray-700);
  font-size: 1rem;
  cursor: pointer;
}

/* ====== BUTTONS ====== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.9rem;
  cursor: pointer; transition: var(--transition);
  text-decoration: none; border: none;
  white-space: nowrap; line-height: 1;
}
.btn-primary {
  background: var(--grad-brand);
  color: white;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(124,58,237,0.42);
  color: white;
}
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-800);
  border: 1.5px solid var(--gray-200);
}
.btn-secondary:hover { background: var(--gray-200); color: var(--gray-900); }
.btn-outline {
  background: transparent;
  color: var(--purple);
  border: 2px solid var(--purple);
}
.btn-outline:hover { background: var(--purple); color: white; }
.btn-ghost {
  background: transparent; color: var(--gray-600);
  border: none;
}
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-900); }
.btn-danger-outline {
  background: transparent; color: #DC2626;
  border: 1.5px solid #FCA5A5;
}
.btn-danger-outline:hover { background: #EF4444; color: white; border-color: #EF4444; }
.btn-sm   { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.btn-lg   { padding: 0.9rem 2.25rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon {
  padding: 0.5rem;
  border-radius: var(--radius);
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  font-size: 0.875rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: var(--gray-200); color: var(--gray-900); }
.btn-icon.danger:hover { background: #EF4444; color: white; border-color: #EF4444; }

/* ====== FORMS ====== */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.8375rem; font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.4rem;
}
.form-label i { color: var(--purple); margin-right: 0.3rem; font-size: 0.8rem; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--gray-800);
  background: var(--white);
  transition: var(--transition);
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--gray-400); }
.form-textarea { resize: vertical; min-height: 96px; }
.form-hint { font-size: 0.78rem; color: var(--gray-500); margin-top: 0.35rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Input with prefix */
.input-group {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius); overflow: hidden;
  transition: var(--transition);
  background: white;
}
.input-group:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.input-prefix {
  padding: 0 0.75rem;
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 0.85rem;
  display: flex; align-items: center;
  border-right: 1.5px solid var(--gray-200);
  white-space: nowrap;
  user-select: none;
}
.input-group .form-input {
  border: none; border-radius: 0; box-shadow: none;
}
.input-group .form-input:focus { box-shadow: none; }

/* Checkbox */
.form-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.form-check input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--purple); cursor: pointer; flex-shrink: 0;
}
.form-check-label { font-size: 0.875rem; color: var(--gray-700); cursor: pointer; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* Skills tag input */
.skills-tags-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  padding: 0.5rem;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  min-height: 46px; cursor: text; transition: var(--transition);
  background: white;
}
.skills-tags-wrap:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.tag-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(124,58,237,0.1);
  color: var(--purple);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem; font-weight: 600;
}
.tag-remove {
  background: none; border: none; padding: 0;
  color: var(--purple); cursor: pointer;
  opacity: 0.6; font-size: 0.7rem; line-height: 1;
}
.tag-remove:hover { opacity: 1; }
.tag-input {
  border: none; outline: none; font-size: 0.875rem;
  flex: 1; min-width: 80px; padding: 0.2rem 0.25rem;
  background: transparent; color: var(--gray-800);
}

/* ====== ALERTS ====== */
.alert {
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.625rem;
  font-size: 0.875rem; font-weight: 500;
}
.alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.alert-info    { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ====== BADGES ====== */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.275rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 700;
}
.badge-default  { background: var(--gray-100); color: var(--gray-600); }
.badge-primary  { background: rgba(124,58,237,0.12); color: var(--purple); }
.badge-success  { background: #D1FAE5; color: #065F46; }
.badge-info     { background: #DBEAFE; color: #1E40AF; }
.badge-warning  { background: #FEF3C7; color: #92400E; }
.badge-rose     { background: #FFE4E6; color: #9F1239; }

.skill-tag {
  display: inline-flex; align-items: center;
  padding: 0.275rem 0.75rem;
  background: rgba(124,58,237,0.08);
  color: var(--purple);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: var(--radius-full);
  font-size: 0.775rem; font-weight: 600;
}

/* ====== HERO (LANDING) ====== */
.hero {
  background: white;
  min-height: 88vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--gray-100);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 78% 20%, rgba(124,58,237,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 20% 85%, rgba(244,63,94,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 5rem 0 4.5rem;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(124,58,237,0.07);
  border: 1px solid rgba(124,58,237,0.2);
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem; font-weight: 600;
  margin-bottom: 1.75rem;
  color: var(--purple);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose); animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.4); }
}
.hero-title {
  font-size: 3.75rem; font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.08;
  margin-bottom: 1.5rem; color: var(--gray-900);
}
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 1.15rem; color: var(--gray-500);
  max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.8;
}
.hero-cta {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 3rem;
}
.hero-roles {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center;
}
.hero-role-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  color: var(--gray-600);
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: 500;
}
.hero-role-chip i { color: var(--purple); font-size: 0.75rem; }

/* ====== HOW IT WORKS ====== */
.how-section { padding: 5rem 0; background: var(--white); }
.steps-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2.5rem; margin-top: 3rem;
}
.step { text-align: center; }
.step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad-brand);
  color: white; font-size: 1.25rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: var(--shadow-brand);
}
.step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.step p   { color: var(--gray-500); font-size: 0.9rem; line-height: 1.7; }

/* ====== FEATURES ====== */
.features-section { padding: 5rem 0; background: var(--gray-50); }
.section-label {
  text-align: center; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--purple); margin-bottom: 0.75rem;
}
.section-title {
  text-align: center; font-size: 2.25rem; font-weight: 800;
  letter-spacing: -0.025em; margin-bottom: 0.875rem;
}
.section-sub {
  text-align: center; font-size: 1.05rem;
  color: var(--gray-500); max-width: 560px;
  margin: 0 auto 3rem; line-height: 1.7;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
}
.feature-card {
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  transition: var(--transition);
}
.feature-card:hover {
  border-color: var(--purple);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.1rem; margin-bottom: 1.1rem;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.feature-card p  { color: var(--gray-500); font-size: 0.875rem; line-height: 1.7; }

/* ====== FOR WHO ====== */
.for-who-section { padding: 5rem 0; background: var(--white); }
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.role-card {
  padding: 1.5rem 1rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  text-align: center; transition: var(--transition);
}
.role-card:hover {
  border-color: var(--purple);
  background: rgba(124,58,237,0.03);
  transform: translateY(-3px);
}
.role-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: rgba(124,58,237,0.08);
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; margin: 0 auto 0.75rem;
  transition: var(--transition);
}
.role-card:hover .role-icon {
  background: var(--grad-brand); color: white;
}
.role-card p { font-size: 0.825rem; font-weight: 600; color: var(--gray-700); }

/* ====== CTA BANNER ====== */
.cta-section {
  padding: 5rem 0;
  background: var(--grad-brand);
  color: white; text-align: center;
}
.cta-section h2 {
  font-size: 2.5rem; font-weight: 800;
  color: white; margin-bottom: 0.875rem;
}
.cta-section p { color: rgba(255,255,255,0.8); font-size: 1.1rem; margin-bottom: 2rem; }
.cta-section .btn-white {
  background: white; color: var(--purple);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.cta-section .btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.26);
  color: var(--purple-dark);
}

/* ====== FOOTER ====== */
.site-footer {
  background: var(--gray-900);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 2rem 0;
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 0.85rem;
}
.site-footer .footer-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin-bottom: 0.5rem;
  font-weight: 700; color: white; font-size: 1rem;
}

/* ====== AUTH PAGES ====== */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-50); padding: 2rem 1rem;
}
.auth-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
  width: 100%; max-width: 440px;
  border: 1px solid var(--gray-200);
}
.auth-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin-bottom: 2rem; text-decoration: none;
}
.auth-logo .brand-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 1rem; }
.auth-logo span { font-size: 1.3rem; font-weight: 800; color: var(--gray-900); }
.auth-title {
  font-size: 1.6rem; font-weight: 800;
  color: var(--gray-900); margin-bottom: 0.25rem; text-align: center;
}
.auth-subtitle {
  font-size: 0.875rem; color: var(--gray-500);
  text-align: center; margin-bottom: 1.75rem;
}
.auth-footer-text {
  text-align: center; font-size: 0.875rem;
  color: var(--gray-500);
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}
.auth-footer-text a { font-weight: 600; color: var(--purple); }

/* ====== DASHBOARD ====== */
.app-layout {
  min-height: calc(100vh - 60px);
  background: var(--gray-50);
  padding: 2rem 0 5rem;
}
.page-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem;
  margin-bottom: 2rem; flex-wrap: wrap;
}
.page-title { font-size: 1.65rem; font-weight: 800; }
.page-subtitle { font-size: 0.875rem; color: var(--gray-500); margin-top: 0.2rem; }

/* Share banner */
.share-banner {
  background: var(--grad-brand);
  border-radius: var(--radius-xl);
  padding: 1.375rem 1.75rem;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1.25rem; margin-bottom: 2rem;
  flex-wrap: wrap;
}
.share-banner-info h3 {
  font-size: 0.975rem; font-weight: 700;
  color: white; margin-bottom: 0.2rem;
}
.share-banner-info p { font-size: 0.8rem; color: rgba(255,255,255,0.75); }
.share-pill {
  display: flex; align-items: center; gap: 0.625rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-full);
  padding: 0.5rem 0.75rem 0.5rem 1.125rem;
  color: white; font-size: 0.8125rem; font-weight: 500;
  flex-wrap: wrap;
}
.copy-btn {
  background: white; color: var(--purple);
  border: none; border-radius: var(--radius-full);
  padding: 0.35rem 0.875rem;
  font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.copy-btn:hover { background: var(--gray-100); }
.copy-btn.copied { background: #D1FAE5; color: #065F46; }

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  padding: 1.25rem 1.375rem;
  display: flex; align-items: center; gap: 1rem;
  transition: var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow); border-color: var(--gray-300); }
.stat-icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.si-purple  { background: rgba(124,58,237,0.12); color: var(--purple); }
.si-rose    { background: rgba(244,63,94,0.12);  color: var(--rose);   }
.si-sky     { background: rgba(14,165,233,0.12); color: var(--sky);    }
.si-emerald { background: rgba(16,185,129,0.12); color: var(--emerald); }
.stat-num { font-size: 1.65rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
.stat-lbl { font-size: 0.78rem; color: var(--gray-500); font-weight: 500; margin-top: 0.2rem; }

/* Section header */
.sect-head {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 1.125rem;
}
.sect-head h2 { font-size: 1.05rem; font-weight: 700; }

/* POW items in dashboard */
.pow-list { display: flex; flex-direction: column; gap: 0.625rem; }
.pow-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  padding: 1.1rem 1.375rem;
  display: flex; align-items: center; gap: 1rem;
  transition: var(--transition);
}
.pow-item:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
.pow-item-icon {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: rgba(124,58,237,0.1); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; flex-shrink: 0;
}
.pow-item-body { flex: 1; min-width: 0; }
.pow-item-title {
  font-size: 0.9rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}
.pow-item-meta { font-size: 0.775rem; color: var(--gray-500); }
.pow-item-actions { display: flex; gap: 0.375rem; flex-shrink: 0; }

/* Empty state */
.empty-state {
  text-align: center; padding: 3rem 2rem;
  background: var(--white); border-radius: var(--radius-xl);
  border: 2px dashed var(--gray-200);
}
.empty-icon { font-size: 2.75rem; color: var(--gray-300); margin-bottom: 0.875rem; }
.empty-state h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.empty-state p  { color: var(--gray-500); font-size: 0.875rem; margin-bottom: 1.375rem; }

/* ====== SETTINGS / PROFILE FORM ====== */
.settings-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--gray-200);
  overflow: hidden; margin-bottom: 1.375rem;
}
.settings-card-head {
  padding: 1.125rem 1.625rem;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
  display: flex; align-items: center; gap: 0.625rem;
}
.settings-card-head h2 { font-size: 0.975rem; font-weight: 700; }
.settings-card-head i  { color: var(--purple); font-size: 0.9rem; }
.settings-card-body { padding: 1.625rem; }

.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Color picker */
.color-row { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.color-opt { cursor: pointer; }
.color-opt input { display: none; }
.color-swatch {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid transparent;
  transition: var(--transition); position: relative;
}
.color-opt input:checked + .color-swatch {
  border-color: var(--gray-900); transform: scale(1.12);
}
.color-swatch::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: white; opacity: 0; transition: var(--transition);
}
.color-opt input:checked + .color-swatch::after { opacity: 1; }
.sw-purple { background: var(--grad-brand); }
.sw-blue   { background: var(--grad-blue); }
.sw-green  { background: var(--grad-green); }
.sw-rose   { background: var(--grad-rose); }
.sw-orange { background: var(--grad-orange); }
.sw-dark   { background: var(--grad-dark); }

/* Custom link builder */
.links-list { display: flex; flex-direction: column; gap: 0.75rem; }
.link-row {
  display: grid; grid-template-columns: 1.2fr 1.6fr auto;
  gap: 0.625rem; align-items: center;
}
.link-row-remove {
  background: #FEE2E2; color: #991B1B;
  border: none; border-radius: var(--radius);
  padding: 0.75rem; cursor: pointer; transition: var(--transition);
  font-size: 0.9rem;
}
.link-row-remove:hover { background: #EF4444; color: white; }

/* DAO section */
.dao-section-intro {
  background: rgba(124,58,237,0.05);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: var(--radius);
  padding: 0.875rem 1rem; margin-bottom: 1.25rem;
  font-size: 0.85rem; color: var(--gray-600); line-height: 1.6;
}
.dao-section-intro strong { color: var(--purple); }

/* Avatar upload */
.avatar-upload-row {
  display: flex; align-items: center; gap: 1.25rem;
}
.avatar-preview-wrap { flex-shrink: 0; }
.avatar-preview-img {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gray-200); display: block;
}
.avatar-preview-placeholder {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--gray-100);
  border: 2.5px dashed var(--gray-300);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 1.75rem;
}
.avatar-upload-info { display: flex; flex-direction: column; gap: 0.375rem; }

.dao-fetch-row {
  display: flex; gap: 0.625rem; align-items: flex-end;
}
.dao-fetch-row .form-group { flex: 1; margin-bottom: 0; }
.dao-fetch-btn {
  flex-shrink: 0; height: 44px;
  padding: 0 1.25rem;
  white-space: nowrap;
}
.dao-result {
  margin-top: 1rem;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
}
.dao-result.success { border-color: rgba(124,58,237,0.3); background: rgba(124,58,237,0.04); }
.dao-result.error   { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }
.dao-stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.625rem; }
.dao-stat { text-align: center; }
.dao-stat-num { font-size: 1.4rem; font-weight: 800; color: var(--purple); display: block; }
.dao-stat-lbl { font-size: 0.7rem; font-weight: 600; color: var(--gray-500);
                text-transform: uppercase; letter-spacing: 0.06em; }

/* ====== PUBLIC PROFILE (LINKTREE STYLE) ====== */
.public-profile { min-height: 100vh; }

/* Accent-color gradient applied per user */
.pa-purple { --pg: linear-gradient(135deg, #7C3AED 0%, #F43F5E 100%); }
.pa-blue   { --pg: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%); }
.pa-green  { --pg: linear-gradient(135deg, #10B981 0%, #14B8A6 100%); }
.pa-rose   { --pg: linear-gradient(135deg, #F43F5E 0%, #F97316 100%); }
.pa-orange { --pg: linear-gradient(135deg, #F97316 0%, #FBBF24 100%); }
.pa-dark   { --pg: linear-gradient(135deg, #1E293B 0%, #475569 100%); }

.profile-banner {
  height: 210px;
  background: var(--pg, var(--grad-brand));
  position: relative;
}
.profile-banner-actions {
  position: absolute; top: 1rem; right: 1rem;
  display: flex; gap: 0.5rem;
}
.profile-banner-btn {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  color: white; border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-full);
  padding: 0.45rem 1rem;
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.profile-banner-btn:hover { background: rgba(255,255,255,0.3); color: white; }

.profile-content { max-width: 620px; margin: 0 auto; padding: 0 1.25rem 5rem; }

.profile-main-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 0 1.75rem 2rem;
  margin-top: -70px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.1);
  position: relative; z-index: 10;
  border: 1px solid var(--gray-100);
}

.profile-avatar-wrap {
  width: 108px; height: 108px;
  margin: -54px auto 1.25rem;
  border-radius: 50%;
  padding: 4px;
  background: var(--pg, var(--grad-brand));
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
}
.profile-avatar-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.75rem; color: var(--purple); overflow: hidden;
}
.profile-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }

.profile-name {
  font-size: 1.55rem; font-weight: 800;
  text-align: center; margin-bottom: 0.25rem; letter-spacing: -0.02em;
}
.profile-handle {
  text-align: center; color: var(--gray-500);
  font-size: 0.875rem; margin-bottom: 0.875rem;
}
.profile-bio {
  text-align: center; color: var(--gray-600);
  font-size: 0.9375rem; line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 460px; margin-left: auto; margin-right: auto;
}
.profile-pills {
  display: flex; gap: 0.5rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.skill-category-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.875rem;
  background: var(--pg, var(--grad-brand));
  color: white; border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 700;
}
.dao-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.875rem;
  background: rgba(124,58,237,0.09);
  border: 1px solid rgba(124,58,237,0.22);
  color: var(--purple); border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 700;
}
.dao-pill i { color: var(--rose); }

.profile-divider { border: none; border-top: 1px solid var(--gray-100); margin: 1.125rem 0; }

.profile-stats-strip {
  display: flex; gap: 0; justify-content: space-around;
}
.pstat {
  text-align: center; padding: 0 0.875rem; flex: 1;
}
.pstat:not(:last-child) { border-right: 1px solid var(--gray-200); }
.pstat-num  { font-size: 1.4rem; font-weight: 800; color: var(--gray-900); display: block; }
.pstat-lbl  { font-size: 0.7rem; color: var(--gray-500); font-weight: 600;
              text-transform: uppercase; letter-spacing: 0.06em; }

/* Profile share strip */
.profile-share-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--gray-100);
  flex-wrap: wrap;
}
.views-badge {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--gray-400); font-weight: 500;
}

/* ---- Social links ---- */
.social-section { margin-top: 1.625rem; }
.social-section h3 {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gray-400); margin-bottom: 0.875rem; text-align: center;
}
.social-icons-row {
  display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center;
}
.soc-btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.575rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8375rem; font-weight: 600;
  text-decoration: none; transition: var(--transition);
}
.soc-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.soc-github    { background: #1a1a1a; color: white; }
.soc-x         { background: #000; color: white; }
.soc-linkedin  { background: #0A66C2; color: white; }
.soc-instagram { background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045); color: white; }
.soc-facebook  { background: #1877F2; color: white; }
.soc-youtube   { background: #FF0000; color: white; }
.soc-tiktok    { background: #010101; color: white; }
.soc-discord   { background: #5865F2; color: white; }
.soc-telegram  { background: #26A5E4; color: white; }
.soc-behance   { background: #1769FF; color: white; }
.soc-dribbble  { background: #EA4C89; color: white; }
.soc-farcaster { background: #8A63D2; color: white; }
.soc-website   { background: var(--gray-800); color: white; }

/* ---- Custom links (Linktree-style) ---- */
.custom-links-section { margin-top: 1.625rem; }
.custom-links-section h3 {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gray-400); margin-bottom: 0.875rem; text-align: center;
}
.custom-link-list { display: flex; flex-direction: column; gap: 0.75rem; }
.custom-link-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-weight: 600; color: var(--gray-800);
  text-decoration: none; transition: var(--transition);
  font-size: 0.9375rem;
}
.custom-link-item:hover {
  background: var(--white); border-color: var(--purple);
  color: var(--purple); transform: translateX(4px);
  box-shadow: var(--shadow);
}
.clink-left { display: flex; align-items: center; gap: 0.75rem; }
.clink-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--pg, var(--grad-brand));
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; flex-shrink: 0;
}

/* ---- POW section on public profile ---- */
.pow-public-section { margin-top: 2rem; }
.pow-public-section h2 {
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.pow-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.pow-pub-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  padding: 1.25rem 1.375rem;
  transition: var(--transition);
}
.pow-pub-card:hover { border-color: var(--purple); box-shadow: var(--shadow); }

/* Featured cover image in POW card */
.pow-featured-img {
  margin: -1.25rem -1.375rem 1.25rem;
  height: 200px; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pow-featured-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.pow-pub-card:hover .pow-featured-img img { transform: scale(1.04); }

/* Featured image upload zone (form) */
.featured-img-drop {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer;
  transition: var(--transition); position: relative;
  background: var(--gray-50);
}
.featured-img-drop:hover, .featured-img-drop.drag {
  border-color: var(--purple); background: rgba(124,58,237,0.02);
}
.featured-img-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.featured-img-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.375rem;
  padding: 1.75rem; text-align: center;
}
.featured-img-placeholder i { font-size: 2rem; color: var(--gray-300); margin-bottom: 0.25rem; }
.featured-img-placeholder span { font-size: 0.875rem; font-weight: 500; color: var(--gray-500); }
.featured-img-placeholder small { font-size: 0.75rem; color: var(--gray-400); }
.featured-img-preview {
  width: 100%; max-height: 220px; object-fit: cover; display: block;
}

.pow-pub-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem;
}
.pow-pub-type {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-400);
  display: flex; align-items: center; gap: 0.3rem;
}
.pow-pub-title { font-size: 0.975rem; font-weight: 700; margin-bottom: 0.4rem; }
.pow-pub-desc  { font-size: 0.85rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 0.75rem; }
.pow-pub-skills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.pow-pub-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.625rem; flex-wrap: wrap;
}
.pow-pub-date { font-size: 0.775rem; color: var(--gray-400); }
.pow-proof-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.875rem;
  border: 1.5px solid var(--purple); color: var(--purple);
  border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600;
  text-decoration: none; transition: var(--transition);
}
.pow-proof-link:hover { background: var(--purple); color: white; }
.pow-proof-file {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.875rem;
  background: rgba(14,165,233,0.1); color: var(--sky);
  border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600;
  text-decoration: none; transition: var(--transition);
}
.pow-proof-file:hover { background: var(--sky); color: white; }
.verified-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.275rem 0.7rem;
  background: #D1FAE5; color: #065F46;
  border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700;
}

/* Profile footer / "Create yours" CTA */
.profile-footer-bar {
  text-align: center; padding: 2rem 0;
  font-size: 0.8125rem; color: var(--gray-400);
}
.create-yours-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--grad-brand); color: white;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.8375rem; font-weight: 700;
  text-decoration: none; transition: var(--transition);
  box-shadow: var(--shadow-brand);
  margin-top: 0.75rem;
}
.create-yours-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(124,58,237,0.42);
  color: white;
}

/* ====== POW FORM ====== */
.pow-form-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--gray-200);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.file-drop {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center; cursor: pointer;
  transition: var(--transition); position: relative;
}
.file-drop:hover, .file-drop.drag { border-color: var(--purple); background: rgba(124,58,237,0.02); }
.file-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.file-drop-icon { font-size: 2.25rem; color: var(--gray-300); margin-bottom: 0.75rem; }
.file-drop-text { font-size: 0.875rem; color: var(--gray-500); }
.file-drop-text strong { color: var(--purple); }
.file-chosen {
  margin-top: 0.75rem; padding: 0.5rem 0.875rem;
  background: rgba(124,58,237,0.08); border-radius: var(--radius);
  font-size: 0.8rem; color: var(--purple); display: none;
  align-items: center; gap: 0.5rem;
}
.existing-file-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--sky); font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.existing-file-link:hover { color: var(--purple); }

/* ====== 404 ====== */
.error-page {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 2rem;
  background: var(--gray-50);
}
.error-code {
  font-size: 7rem; font-weight: 900;
  background: var(--grad-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1; margin-bottom: 1rem;
}
.error-page h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.error-page p  { color: var(--gray-500); margin-bottom: 2rem; }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; width: 100%; padding: 0.75rem 0 0.5rem; gap: 0.25rem; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }

  .hero-title  { font-size: 2.5rem; }
  .section-title { font-size: 1.875rem; }
  .steps-grid  { grid-template-columns: 1fr; gap: 2rem; }
  .social-grid { grid-template-columns: 1fr; }
  .form-row    { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .share-banner { flex-direction: column; }
  .stats-row   { grid-template-columns: 1fr 1fr; }
  .link-row    { grid-template-columns: 1fr; }
  .link-row .link-row-remove { width: 100%; }
  .cta-section h2 { font-size: 1.875rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .hero-title { font-size: 1.875rem; }
  .stats-row  { grid-template-columns: 1fr; }
  .auth-card  { padding: 1.75rem 1.5rem; }
  .profile-main-card { padding: 0 1.25rem 1.75rem; }
  .settings-card-body { padding: 1.25rem; }
  .profile-stats-strip { flex-wrap: wrap; }
  .pstat { min-width: 50%; padding: 0.75rem; }
  .pstat:not(:last-child) { border-right: none; border-bottom: 1px solid var(--gray-200); }
}

/* ====== TOAST NOTIFICATIONS ====== */
#toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 280px;
  max-width: 380px;
  pointer-events: all;
  animation: toastIn 0.3s cubic-bezier(0.34,1.4,0.64,1) forwards;
  position: relative;
  overflow: hidden;
}
.toast::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  animation: toastBar var(--toast-dur, 4s) linear forwards;
  border-radius: 0 0 var(--radius) var(--radius);
}
.toast-success {
  background: #F0FDF4;
  color: #166534;
  border: 1.5px solid #BBF7D0;
}
.toast-success::after { background: #22C55E; }
.toast-success .toast-icon { color: #16A34A; }

.toast-error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1.5px solid #FECACA;
}
.toast-error::after { background: #EF4444; }
.toast-error .toast-icon { color: #DC2626; }

.toast-info {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1.5px solid #BFDBFE;
}
.toast-info::after { background: #3B82F6; }
.toast-info .toast-icon { color: #2563EB; }

.toast-icon { font-size: 1rem; flex-shrink: 0; }
.toast-msg  { flex: 1; line-height: 1.4; }
.toast-close {
  background: none; border: none; cursor: pointer;
  opacity: 0.5; font-size: 0.85rem; flex-shrink: 0;
  color: inherit; padding: 0.125rem;
  transition: opacity 0.15s;
}
.toast-close:hover { opacity: 1; }
.toast.hiding {
  animation: toastOut 0.25s ease forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(60px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); max-height: 80px; }
  to   { opacity: 0; transform: translateX(60px); max-height: 0; padding: 0; margin: 0; }
}
@keyframes toastBar {
  from { width: 100%; }
  to   { width: 0%; }
}
@media (max-width: 480px) {
  #toast-container { top: auto; bottom: 1rem; left: 1rem; right: 1rem; }
  .toast { min-width: unset; width: 100%; max-width: 100%; }
}

/* ===== POWtfolio sharp portfolio system ===== */
:root { --ink:#101a18; --ink-soft:#51615e; --paper:#f5f7f5; --line:#e2e8e4; --accent-strong:#155e50; --accent-soft:#e8f3ef; --shadow-card:0 16px 44px rgba(16,35,29,.07); }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.012em; }
a { transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease; }
.navbar { background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:blur(16px); }
.navbar .container { min-height:72px; }
.nav-brand a { color:var(--ink); font-weight:800; letter-spacing:-.045em; }
.nav-brand i { color:var(--accent-strong); }
.nav-link { color:#53625e; font-weight:600; }
.nav-link:hover { color:var(--accent-strong); }
.btn-primary,.btn-primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); box-shadow:0 7px 18px rgba(21,94,80,.16); }
.btn,button { border-radius:11px; font-weight:650; }
.form-input,.form-select,.form-textarea { border:1px solid #dce4df; border-radius:11px; background:#fff; box-shadow:none; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:#408b78; box-shadow:0 0 0 4px rgba(45,132,109,.11); }
.settings-card,.pow-form-card,.auth-card,.stat-card,.feature-card,.role-card { border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.settings-card { overflow:hidden; }
.settings-card-head { background:#fff; border-bottom:1px solid var(--line); }
.settings-card-head>i { color:var(--accent-strong); }
.page-title,.hero-title { color:var(--ink); letter-spacing:-.055em; }
.page-subtitle { color:var(--ink-soft); }
.footer { border-top:1px solid var(--line); background:#fff; color:#72807c; }

/* Public portfolio */
body.public-profile { background:#f4f6f4; color:#13201d; }
.public-profile .profile-banner { height:250px; position:relative; overflow:hidden; background:#142b26; }
.public-profile .profile-banner::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 75% 22%,rgba(116,190,155,.34),transparent 34%),linear-gradient(118deg,transparent 52%,rgba(255,255,255,.055) 52.2%,transparent 52.8%),linear-gradient(24deg,transparent 69%,rgba(255,255,255,.06) 69.2%,transparent 69.8%); }
.public-profile .profile-banner::after { content:"PROOF OF WORK  /  PORTFOLIO"; position:absolute; left:max(calc((100vw - 1040px)/2),24px); bottom:30px; color:rgba(255,255,255,.54); font-size:10px; font-weight:750; letter-spacing:.2em; }
.public-profile .profile-banner-actions { position:relative; z-index:1; max-width:1040px; }
.public-profile .profile-banner-btn { background:#fff; color:#142b26; border:1px solid rgba(255,255,255,.55); border-radius:10px; font-weight:700; }
.public-profile .profile-banner-btn:hover { background:#e7f2ec; transform:translateY(-1px); }
.public-profile .profile-content { max-width:1040px; margin:-44px auto 76px; position:relative; }
.public-profile .profile-main-card { background:#fff; border:1px solid #e4e9e5; border-radius:20px; box-shadow:0 18px 55px rgba(18,38,31,.09); padding:0 48px 26px; }
.public-profile .profile-avatar-wrap { margin:0 0 15px; padding-top:0; }
.public-profile .profile-avatar-inner { width:112px; height:112px; background:#dce9e2; border:6px solid #fff; box-shadow:0 8px 24px rgba(15,37,28,.14); color:#276a55; font-size:2rem; }
.public-profile .profile-avatar-inner img { width:100%; height:100%; object-fit:cover; }
.public-profile .profile-name { margin:0; color:#13201d; font-size:clamp(2rem,5vw,3.2rem); line-height:1.04; letter-spacing:-.065em; font-weight:800; }
.public-profile .profile-handle { margin:.55rem 0 0; color:#668078; font-size:.96rem; font-weight:600; }
.public-profile .profile-bio { max-width:680px; margin:18px 0; color:#42534d; line-height:1.75; font-size:1.04rem; }
.public-profile .profile-pills { gap:8px; margin-top:18px; }
.public-profile .skill-category-pill,.public-profile .badge,.public-profile .dao-pill { border-radius:999px; font-size:.76rem; font-weight:700; padding:8px 12px; }
.public-profile .skill-category-pill { color:#155e50; background:#e8f3ef; }
.public-profile .profile-divider { border-color:#edf0ed; margin:25px 0 0; }
.public-profile .profile-stats-strip { border:0; border-radius:0; background:transparent; margin:0; padding:0; }
.public-profile .pstat { padding:20px 16px 18px; }
.public-profile .pstat:not(:last-child) { border-right:1px solid #edf0ed; }
.public-profile .pstat-num { color:#173d33; font-size:1.7rem; letter-spacing:-.05em; font-weight:800; }
.public-profile .pstat-lbl { color:#71807b; text-transform:uppercase; font-size:.66rem; letter-spacing:.12em; font-weight:750; }
.public-profile .profile-share-strip { border-top:1px solid #edf0ed; padding-top:17px; }
.public-profile .profile-share-strip .btn { border:1px solid #dce5df; background:#fff; color:#225d4d; }
.public-profile .social-section,.public-profile .custom-links-section,.public-profile .pow-public-section { margin-top:28px; }
.public-profile .social-section h3,.public-profile .custom-links-section h3 { color:#20342e; font-size:.76rem; text-transform:uppercase; letter-spacing:.15em; font-weight:800; }
.public-profile .soc-btn { border:1px solid #e0e7e2; border-radius:10px; background:#fff; color:#354940; font-weight:650; }
.public-profile .soc-btn:hover { border-color:#9bc7b5; color:#155e50; transform:translateY(-2px); }
.public-profile .custom-link-item { background:#fff; border:1px solid #e2e8e4; border-radius:12px; padding:16px 18px; }
.public-profile .custom-link-item:hover { border-color:#a7cabb; transform:translateY(-2px); box-shadow:0 10px 22px rgba(22,66,51,.06); }
.public-profile .clink-icon { color:#155e50; background:#e8f3ef; border-radius:9px; }
.public-profile .pow-public-section h2 { display:flex; align-items:center; gap:10px; color:#13201d; font-size:1.55rem; letter-spacing:-.045em; font-weight:800; }
.public-profile .pow-public-section h2 i { color:#28725d !important; }
.public-profile .pow-cards { gap:17px; }
.public-profile .pow-pub-card { background:#fff; border:1px solid #e0e7e2; border-radius:16px; box-shadow:0 8px 25px rgba(18,38,31,.045); overflow:hidden; }
.public-profile .pow-pub-card:hover { border-color:#a8cbbb; box-shadow:0 15px 35px rgba(18,55,41,.09); transform:translateY(-2px); }
.public-profile .pow-featured-img { height:220px; background:#e8efea; }
.public-profile .pow-featured-img img { width:100%; height:100%; object-fit:cover; }
.public-profile .pow-pub-top { margin-bottom:12px; }
.public-profile .pow-pub-type { color:#28725d; font-size:.75rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.public-profile .pow-pub-title { color:#14221e; font-size:1.24rem; letter-spacing:-.035em; font-weight:780; }
.public-profile .pow-pub-desc { color:#586760; line-height:1.7; }
.public-profile .skill-tag { background:#f0f4f1; border:1px solid #e7ece8; color:#50615a; border-radius:999px; }
.public-profile .verified-chip { background:#e7f3ed; color:#216149; border-radius:999px; }
.public-profile .pow-proof-link,.public-profile .pow-proof-file { color:#17624f; font-weight:700; }
.public-profile .profile-footer-bar { margin-top:38px; border-top:1px solid #e1e8e3; padding-top:22px; color:#7b8983; }
.public-profile .create-yours-link { color:#155e50; font-weight:750; }
@media (max-width:700px) {
  .public-profile .profile-banner { height:200px; }
  .public-profile .profile-content { margin:-34px 14px 48px; }
  .public-profile .profile-main-card { padding:0 20px 20px; }
  .public-profile .profile-avatar-inner { width:94px; height:94px; }
  .public-profile .profile-stats-strip { display:grid; grid-template-columns:repeat(2,1fr); }
  .public-profile .pstat { border-bottom:1px solid #edf0ed; }
  .public-profile .pstat:not(:last-child) { border-right:0; }
  .public-profile .pow-featured-img { height:185px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* ===== Friendly studio refresh ===== */
:root {
  --studio-ink:#23302d;
  --studio-muted:#707d78;
  --studio-paper:#fbfaf7;
  --studio-line:#ebe9e2;
  --studio-coral:#ee795d;
  --studio-lilac:#eee8f8;
  --studio-mint:#e5f2e9;
  --studio-shadow:0 18px 48px rgba(53,57,48,.075);
}
body { background:var(--studio-paper); color:var(--studio-ink); font-family:'DM Sans',sans-serif; }
h1,h2,h3,h4,h5,.nav-brand a,.btn,.page-title { font-family:'Space Grotesk','DM Sans',sans-serif; }
p { color:inherit; }
.navbar { background:rgba(251,250,247,.92); border-color:var(--studio-line); }
.nav-brand a { font-size:1.28rem; }
.nav-brand a span { letter-spacing:-.06em; }
.nav-brand i { color:var(--studio-coral); }
.nav-link { border-radius:9px; padding:.55rem .8rem; }
.nav-link:hover { background:#f1eee7; }
.btn-primary,.btn-primary:hover { background:var(--studio-coral); border-color:var(--studio-coral); box-shadow:0 8px 18px rgba(238,121,93,.2); }
.btn-secondary,.btn-outline { border-radius:12px; }
.page-title { letter-spacing:-.055em; }
.page-subtitle,.form-hint { color:var(--studio-muted); }
.form-input,.form-select,.form-textarea { border-color:#e5e3dc; background:#fffefa; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:#d99880; box-shadow:0 0 0 4px rgba(238,121,93,.12); }
.settings-card,.pow-form-card,.auth-card,.stat-card,.feature-card,.role-card { border-color:var(--studio-line); border-radius:20px; box-shadow:var(--studio-shadow); }
.settings-card-head { background:linear-gradient(110deg,#fffdf8,#f7f3ec); }
.settings-card-head>i { color:var(--studio-coral); }
.footer { background:#f6f4ed; border-color:var(--studio-line); }

/* Home: warm editorial layout with playful color blocks */
.hero { position:relative; isolation:isolate; overflow:hidden; background:var(--studio-paper); }
.hero::before,.hero::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.hero::before { width:390px; height:390px; top:12%; right:-90px; background:var(--studio-lilac); opacity:.78; animation:studioDrift 11s ease-in-out infinite alternate; }
.hero::after { width:230px; height:230px; bottom:4%; left:-72px; background:#f8e6d5; opacity:.8; animation:studioDrift 13s ease-in-out infinite alternate-reverse; }
.hero-inner { position:relative; }
.hero-eyebrow { display:inline-flex; border:1px solid #e9e4d8; border-radius:999px; background:rgba(255,255,255,.72); padding:.55rem .85rem; color:#59665f; font-weight:650; animation:studioRise .65s both; }
.hero-eyebrow .dot { background:#70a77d; box-shadow:0 0 0 4px rgba(112,167,125,.14); }
.hero-title { max-width:850px; font-size:clamp(3.2rem,8vw,6.3rem); line-height:.99; letter-spacing:-.075em; animation:studioRise .75s .08s both; }
.hero-title .grad-text { background:linear-gradient(100deg,#df6f54 5%,#aa7db4 55%,#609574 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { max-width:620px; color:#65716b; font-size:1.12rem; line-height:1.8; animation:studioRise .75s .16s both; }
.hero-cta { animation:studioRise .75s .23s both; }
.hero-cta .btn { border-radius:13px; }
.hero-role-chip { border:1px solid #ebe7de; background:rgba(255,255,255,.72); color:#5e6b64; border-radius:999px; }
.section-label { color:#b8644f; letter-spacing:.16em; }
.section-title { font-size:clamp(2rem,4.4vw,3.25rem); letter-spacing:-.065em; }
.section-sub { color:#758079; }
.how-section,.features-section,.for-who-section { padding-top:5.5rem; padding-bottom:5.5rem; }
.step,.feature-card,.role-card { background:#fffefa; border:1px solid var(--studio-line); border-radius:18px; box-shadow:0 10px 30px rgba(53,57,48,.045); }
.step-num,.feature-icon,.role-icon { background:var(--studio-mint); color:#538365; border-radius:13px; }
.feature-card:nth-child(3n+2) .feature-icon,.role-card:nth-child(4n+2) .role-icon { background:var(--studio-lilac); color:#8c6a9c; }
.feature-card:nth-child(3n) .feature-icon,.role-card:nth-child(4n) .role-icon { background:#fae8df; color:#c86d54; }
.feature-card h3,.step h3 { letter-spacing:-.035em; }
.feature-card p,.step p { color:#77817b; line-height:1.7; }
.feature-card:hover,.role-card:hover,.step:hover { transform:translateY(-5px); box-shadow:0 19px 42px rgba(53,57,48,.09); border-color:#ded7c9; }
.cta-section { background:#273934; }
.cta-section h2 { letter-spacing:-.06em; }
.cta-section .btn-primary { background:#ee9678; border-color:#ee9678; }

.showcase-section { overflow:hidden; padding:5.5rem 0 6.25rem; background:linear-gradient(180deg,#fbfaf7 0%,#f5f0e8 100%); }
.showcase-layout { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:4.5rem; }
.showcase-copy .section-title { margin:1rem 0; }
.showcase-script { color:#a477ad; font-family:Fraunces,Georgia,serif; font-style:italic; font-weight:500; letter-spacing:-.07em; }
.showcase-copy .section-sub { max-width:410px; line-height:1.8; }
.showcase-link { display:inline-flex; align-items:center; gap:.75rem; margin-top:1.1rem; color:#b8634c; font-weight:750; }
.showcase-link:hover { gap:1rem; color:#944d3b; }
.showcase-window { border:1px solid rgba(69,66,55,.12); border-radius:18px; background:#fffefa; box-shadow:0 26px 68px rgba(59,53,43,.15); overflow:hidden; transform:rotate(1.2deg); animation:showcaseFloat 7s ease-in-out infinite; }
.showcase-window-top { height:39px; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid #eeeae2; background:#fffdfa; }
.showcase-window-top>span { width:8px; height:8px; border-radius:50%; background:#e6b4a3; }
.showcase-window-top>span:nth-child(2) { background:#e8d39a; }
.showcase-window-top>span:nth-child(3) { background:#a8c5a9; }
.showcase-window-top small { margin:auto; color:#9b9d96; font-size:.65rem; letter-spacing:.04em; }
.showcase-profile { padding:16px 20px 20px; }
.showcase-cover { height:98px; display:flex; align-items:flex-end; padding:13px; overflow:hidden; border-radius:11px; background:radial-gradient(circle at 75% 24%,rgba(255,255,255,.6) 0 7%,transparent 7.5%),radial-gradient(circle at 80% 30%,rgba(255,255,255,.28) 0 17%,transparent 17.5%),linear-gradient(115deg,#a5c5ad,#d9d6e6 56%,#f1c9ae); }
.showcase-cover span { color:rgba(48,62,54,.68); font-size:.57rem; font-weight:800; letter-spacing:.16em; }
.showcase-person { display:flex; align-items:center; gap:11px; margin:15px 0 8px; }
.showcase-avatar { width:39px; height:39px; display:grid; place-items:center; border:3px solid white; border-radius:50%; background:#f2dfcf; color:#9c6754; font-weight:800; box-shadow:0 2px 9px #00000012; }
.showcase-person strong,.showcase-projects b { display:block; color:#26332e; font-size:.78rem; }
.showcase-person small,.showcase-projects small { display:block; margin-top:2px; color:#8a938d; font-size:.64rem; }
.showcase-available { display:flex; align-items:center; gap:5px; margin-left:auto; padding:5px 8px; border-radius:999px; background:#edf4ec; color:#628367; font-size:.58rem; font-weight:750; }
.showcase-available i { width:5px; height:5px; border-radius:50%; background:#83b17d; }
.showcase-bio { margin:10px 0 14px; color:#66736c; font-size:.7rem; }
.showcase-metrics { display:flex; gap:0; padding:10px 0; border-top:1px solid #efeee8; border-bottom:1px solid #efeee8; }
.showcase-metrics>div { display:flex; flex:1; flex-direction:column; gap:1px; }
.showcase-metrics b { color:#35443c; font-family:'Space Grotesk',sans-serif; font-size:.95rem; }
.showcase-metrics small { color:#a0a49d; font-size:.48rem; letter-spacing:.12em; }
.showcase-projects { display:flex; align-items:center; gap:10px; padding-top:12px; }
.showcase-projects>i { margin-left:auto; color:#9ba49d; font-size:.65rem; }
.showcase-project-art { width:43px; height:38px; display:grid; place-items:center; border-radius:8px; color:#fff; }
.art-peach { background:linear-gradient(140deg,#edaa8e,#e9cfb1); }
.art-lilac { background:linear-gradient(140deg,#b9a1c7,#d7c9df); }
@keyframes showcaseFloat { 0%,100% { transform:rotate(1.2deg) translateY(0); } 50% { transform:rotate(-.4deg) translateY(-8px); } }
@media (max-width:800px) {
  .showcase-layout { grid-template-columns:1fr; gap:2.4rem; }
  .showcase-copy { max-width:560px; }
  .showcase-window { width:min(100%,600px); margin:0 auto; }
}
@media (max-width:520px) {
  .showcase-section { padding:3.8rem 0 4.25rem; }
  .showcase-profile { padding:12px; }
  .showcase-cover { height:76px; }
  .showcase-projects b { font-size:.7rem; }
}
@media (prefers-reduced-motion:reduce) { .showcase-window { animation:none; } }
.database-error-page { min-height:70vh; display:grid; place-items:center; padding:3rem 1.25rem; }
.database-error-card { width:min(100%,560px); padding:clamp(1.5rem,5vw,3rem); border:1px solid var(--studio-line); border-radius:22px; background:#fffefa; box-shadow:var(--studio-shadow); text-align:center; }
.database-error-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 1.25rem; border-radius:18px; background:#fae8df; color:#c86d54; font-size:1.35rem; }
.database-error-card h1 { margin:.6rem 0 1rem; font-size:clamp(1.8rem,5vw,2.5rem); letter-spacing:-.055em; }
.database-error-copy { margin:0 auto 1.5rem; max-width:440px; color:var(--studio-muted); line-height:1.75; }
.database-error-home { display:block; margin-top:1rem; color:#7b8580; font-size:.9rem; }

/* Five portfolio themes and image-led profile headers */
.public-profile { --profile-accent:var(--profile-custom-accent,#ee795d); --profile-canvas:#f7f4ed; --profile-surface:#fffefa; --profile-text:#27342f; --profile-muted:#718079; --profile-line:#e9e5dc; --profile-soft:#f8e9e1; }
.public-profile.theme-studio { --profile-canvas:#f7f4ed; --profile-surface:#fffefa; --profile-text:#27342f; --profile-muted:#718079; --profile-line:#e9e5dc; --profile-soft:#fae8df; }
.public-profile.theme-editorial { --profile-accent:var(--profile-custom-accent,#805252); --profile-canvas:#f3f0ec; --profile-surface:#fffdf9; --profile-text:#332b2a; --profile-muted:#7b716b; --profile-line:#e9e2d9; --profile-soft:#efe7df; }
.public-profile.theme-ocean { --profile-accent:var(--profile-custom-accent,#428895); --profile-canvas:#edf5f5; --profile-surface:#fbffff; --profile-text:#20363a; --profile-muted:#698084; --profile-line:#dce9e8; --profile-soft:#e3f0f1; }
.public-profile.theme-garden { --profile-accent:var(--profile-custom-accent,#62865d); --profile-canvas:#f0f5ee; --profile-surface:#fcfff9; --profile-text:#2b382c; --profile-muted:#738171; --profile-line:#e0e9dc; --profile-soft:#e8f0e3; }
.public-profile.theme-midnight { --profile-accent:var(--profile-custom-accent,#9e8ade); --profile-canvas:#171a21; --profile-surface:#222630; --profile-text:#f3f0f8; --profile-muted:#afb3c1; --profile-line:#383d49; --profile-soft:#303141; }
.public-profile.theme-studio,.public-profile.theme-editorial,.public-profile.theme-ocean,.public-profile.theme-garden,.public-profile.theme-midnight { background:var(--profile-canvas); color:var(--profile-text); }
.public-profile .profile-banner { background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 46%,#263a35),#354b43); }
.public-profile.theme-midnight .profile-banner { background:#11141a; }
.public-profile .profile-cover-image { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.public-profile .profile-banner:has(.profile-cover-image)::before { background:linear-gradient(90deg,rgba(15,22,20,.22),rgba(15,22,20,.1)),linear-gradient(0deg,rgba(15,22,20,.34),transparent 56%); }
.public-profile .profile-main-card,.public-profile .pow-pub-card,.public-profile .custom-link-item { background:var(--profile-surface); border-color:var(--profile-line); color:var(--profile-text); }
.public-profile .profile-name,.public-profile .pow-public-section h2,.public-profile .pow-pub-title,.public-profile .custom-link-item { color:var(--profile-text); }
.public-profile .profile-handle,.public-profile .profile-bio,.public-profile .pow-pub-desc { color:var(--profile-muted); }
.public-profile .profile-avatar-inner { background:var(--profile-soft); color:var(--profile-accent); }
.public-profile .profile-divider,.public-profile .profile-share-strip,.public-profile .pstat:not(:last-child),.public-profile .profile-footer-bar { border-color:var(--profile-line); }
.public-profile .pstat-num,.public-profile .pow-pub-type,.public-profile .pow-public-section h2 i { color:var(--profile-accent) !important; }
.public-profile .skill-category-pill,.public-profile .clink-icon { color:var(--profile-accent); background:var(--profile-soft); }
.public-profile .profile-share-strip .btn { border-color:var(--profile-line); color:var(--profile-accent); background:var(--profile-surface); }
.public-profile.theme-midnight .verified-chip { background:#29443c; color:#a5e1c7; }
.public-profile.theme-midnight .skill-tag { border-color:var(--profile-line); background:#303540; color:#d1d2da; }
.public-profile.theme-midnight .pow-pub-card:nth-child(3n+2),.public-profile.theme-midnight .pow-pub-card:nth-child(3n) { background:var(--profile-surface); }
.public-profile.theme-midnight .social-section h3,.public-profile.theme-midnight .custom-links-section h3 { color:var(--profile-muted); }
.public-profile .profile-banner::before { z-index:1; }
.public-profile .profile-banner::after { z-index:2; }
.public-profile .profile-cover-image { z-index:0; }
.public-profile .profile-banner-actions { z-index:3; }

/* Appearance controls */
.theme-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.theme-option { position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; padding:10px; border:1px solid var(--studio-line); border-radius:14px; background:#fffefa; cursor:pointer; transition:border-color .18s,transform .18s,box-shadow .18s; }
.theme-option:hover { transform:translateY(-2px); }
.theme-option:has(input:checked) { border-color:var(--studio-coral); box-shadow:0 0 0 3px rgba(238,121,93,.12); }
.theme-option input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.theme-option:focus-within { outline:3px solid rgba(238,121,93,.28); outline-offset:2px; }
.theme-swatch { height:35px; margin-bottom:4px; border-radius:8px; background:linear-gradient(130deg,#fff8ef 48%,#ee795d 49%); }
.theme-option-editorial .theme-swatch { background:linear-gradient(130deg,#fbf6ec 48%,#805252 49%); }
.theme-option-ocean .theme-swatch { background:linear-gradient(130deg,#eef8f7 48%,#428895 49%); }
.theme-option-garden .theme-swatch { background:linear-gradient(130deg,#f3f8ee 48%,#62865d 49%); }
.theme-option-midnight .theme-swatch { background:linear-gradient(130deg,#262a34 48%,#9e8ade 49%); }
.theme-option b { color:var(--studio-ink); font-size:.82rem; }
.theme-option small { color:var(--studio-muted); font-size:.68rem; }
.accent-control { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:460px; }
.accent-control input[type=color] { width:54px; height:42px; padding:4px; border:1px solid var(--studio-line); border-radius:10px; background:#fffefa; cursor:pointer; }
.cover-current-preview { display:block; width:100%; height:clamp(120px,24vw,220px); margin-bottom:12px; border-radius:14px; background:#e9e8e0; object-fit:cover; }
.cover-preview-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#7c8981; font-size:.86rem; }
.cover-preview-empty i { color:var(--studio-coral); font-size:1.3rem; }
.cover-upload-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cover-remove { display:inline-flex; align-items:center; gap:8px; margin-top:12px; color:#8a6258; font-size:.85rem; }
.cover-remove input { accent-color:var(--studio-coral); }

/* About section */
.about-section { padding:5.5rem 0; background:#fffefa; }
.about-layout { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:clamp(2rem,7vw,6rem); }
.about-mark { min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; border-radius:24px; background:#f3eee5; color:#d17960; }
.about-mark::before,.about-mark::after { content:""; position:absolute; border:1px solid rgba(171,124,108,.2); border-radius:50%; }
.about-mark::before { width:210px; height:210px; }
.about-mark::after { width:270px; height:270px; }
.about-mark span { font:700 clamp(3.5rem,8vw,6rem)/1 'Space Grotesk',sans-serif; letter-spacing:-.1em; }
.about-mark i { position:absolute; top:26%; right:26%; font-size:1.5rem; }
.about-mark small { margin-top:12px; color:#977b6d; font-size:.57rem; font-weight:800; letter-spacing:.18em; }
.about-copy .section-title { margin:10px 0 18px; }
.about-copy>p:not(.section-label) { max-width:620px; color:#6d7972; line-height:1.85; }

/* Tight, predictable layouts across all screen widths */
@media (max-width:900px) {
  .theme-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .about-layout { gap:2.5rem; }
  .public-profile .profile-content { width:calc(100% - 40px); }
}
@media (max-width:640px) {
  .container { padding-left:1rem; padding-right:1rem; }
  .theme-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-layout { grid-template-columns:1fr; gap:1.7rem; }
  .about-mark { min-height:190px; }
  .about-mark::before { width:155px; height:155px; }
  .about-mark::after { width:210px; height:210px; }
  .public-profile .profile-content { width:auto; margin: -30px 12px 42px; }
  .public-profile .profile-main-card { padding-left:17px; padding-right:17px; }
  .public-profile .profile-banner { height:178px; }
  .public-profile .profile-banner-actions { right:12px; }
  .public-profile .profile-banner-btn { padding:.58rem .75rem; font-size:.78rem; }
  .public-profile .profile-name { font-size:clamp(1.9rem,10vw,2.6rem); overflow-wrap:anywhere; }
  .public-profile .profile-bio { font-size:.95rem; }
  .public-profile .profile-stats-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .public-profile .pstat { min-width:0; padding:14px 8px; }
  .public-profile .pow-cards { grid-template-columns:minmax(0,1fr); }
  .public-profile .pow-pub-card { min-width:0; }
  .public-profile .pow-pub-bottom { align-items:flex-start; gap:12px; flex-direction:column; }
  .public-profile .pow-pub-bottom>div { width:100%; }
  .public-profile .social-icons-row { gap:8px; }
  .public-profile .soc-btn { max-width:100%; overflow-wrap:anywhere; }
  .public-profile .custom-link-list { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:380px) {
  .theme-picker { grid-template-columns:1fr 1fr; }
  .theme-option { padding:8px; }
  .theme-option small { font-size:.62rem; }
  .public-profile .profile-share-strip { align-items:flex-start; flex-direction:column; }
}
@media (max-width:760px) {
  .features-grid,.steps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roles-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .settings-card-body,.pow-form-card { padding:clamp(1rem,4vw,1.5rem); }
  .page-header { align-items:flex-start; gap:1rem; flex-wrap:wrap; }
  .profile-share-strip { flex-wrap:wrap; gap:.75rem; }
}
@media (max-width:480px) {
  .features-grid,.steps-grid,.roles-grid,.pow-cards,.social-grid { grid-template-columns:minmax(0,1fr); }
  .link-row { grid-template-columns:minmax(0,1fr); }
  .settings-card-head { align-items:flex-start; gap:.65rem; }
  .settings-card-head h2 { min-width:0; font-size:1.06rem; }
  .form-row { grid-template-columns:minmax(0,1fr); gap:0; }
  .form-actions { flex-wrap:wrap; }
  .form-actions .btn { flex:1 1 140px; justify-content:center; }
}

/* Template layouts override every shared profile paint rule above. */
.theme-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
.public-profile.theme-canvas { --profile-canvas:#f2f2ed; --profile-surface:#fff; --profile-text:#29312e; --profile-muted:#66716d; --profile-line:#dfe2dc; --profile-soft:#e9ece6; }
.theme-option-canvas .theme-swatch { background:linear-gradient(130deg,#fbfbf8 48%,#303a37 49%); }
.settings-card:has(input[name="accentColor"]) { display:none; }
.public-profile.theme-editorial .profile-main-card { display:grid; grid-template-columns:180px minmax(0,1fr); gap:0 22px; padding:28px 42px 20px; border-radius:5px; }
.public-profile.theme-editorial .profile-avatar-wrap { grid-column:1; grid-row:1/span 5; align-self:center; }
.public-profile.theme-editorial .profile-name,.public-profile.theme-editorial .profile-handle,.public-profile.theme-editorial .profile-bio,.public-profile.theme-editorial .profile-pills { grid-column:2; justify-self:start; text-align:left; }
.public-profile.theme-editorial .profile-name { font:600 clamp(2.4rem,5vw,4.3rem)/1 'Fraunces',Georgia,serif; }
.public-profile.theme-editorial .profile-divider,.public-profile.theme-editorial .profile-stats-strip,.public-profile.theme-editorial .profile-share-strip { grid-column:1/-1; width:100%; }
.public-profile.theme-editorial .pow-cards { grid-template-columns:1fr; }
.public-profile.theme-editorial .pow-pub-card { display:grid; grid-template-columns:minmax(180px,32%) minmax(0,1fr); align-items:center; }
.public-profile.theme-editorial .pow-featured-img { grid-column:1; grid-row:1/span 5; height:100%; min-height:210px; }
.public-profile.theme-editorial .pow-pub-card>*:not(.pow-featured-img) { margin-left:20px; margin-right:20px; }
.public-profile.theme-editorial .pow-pub-title { font:600 1.5rem/1.2 'Fraunces',Georgia,serif; }
.public-profile.theme-ocean .profile-content { max-width:1180px; }
.public-profile.theme-ocean .profile-main-card { text-align:center; border-radius:30px; padding:0 48px 26px; }
.public-profile.theme-ocean .profile-avatar-wrap { display:flex; justify-content:center; }
.public-profile.theme-ocean .profile-bio { margin-left:auto; margin-right:auto; }
.public-profile.theme-ocean .profile-pills,.public-profile.theme-ocean .profile-share-strip { justify-content:center; }
.public-profile.theme-ocean .pow-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.public-profile.theme-ocean .pow-pub-card { border-radius:24px; }
.public-profile.theme-ocean .pow-featured-img { height:185px; }
.public-profile.theme-garden .profile-main-card { display:grid; grid-template-columns:145px minmax(0,1fr); gap:0 24px; padding:30px 42px 22px; border-radius:34px 8px; }
.public-profile.theme-garden .profile-avatar-wrap { grid-column:1; grid-row:1/span 5; align-self:center; }
.public-profile.theme-garden .profile-name,.public-profile.theme-garden .profile-handle,.public-profile.theme-garden .profile-bio,.public-profile.theme-garden .profile-pills { grid-column:2; justify-self:start; text-align:left; }
.public-profile.theme-garden .profile-divider,.public-profile.theme-garden .profile-stats-strip,.public-profile.theme-garden .profile-share-strip { grid-column:1/-1; }
.public-profile.theme-garden .pow-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.public-profile.theme-garden .pow-pub-card { border-radius:26px 8px; }
.public-profile.theme-garden .pow-featured-img { height:210px; }
.public-profile.theme-midnight .profile-main-card { border-radius:28px; box-shadow:0 25px 70px rgba(0,0,0,.28); }
.public-profile.theme-midnight .profile-avatar-inner { border-color:#222630; }
.public-profile.theme-midnight .pow-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.public-profile.theme-midnight .pow-pub-card { border-radius:20px; }
.public-profile.theme-midnight .profile-footer-bar,.public-profile.theme-midnight .profile-footer-bar p { color:#afb3c1; }
.public-profile.theme-midnight .pow-pub-card:nth-child(3n+2),.public-profile.theme-midnight .pow-pub-card:nth-child(3n) { background:var(--profile-surface); }
.public-profile.theme-canvas { --profile-accent:var(--profile-custom-accent,#303a37); }
.public-profile.theme-canvas .profile-banner { height:clamp(190px,25vw,280px); background:var(--profile-accent); }
.public-profile.theme-canvas .profile-main-card { border:2px solid var(--profile-text); border-radius:3px; box-shadow:8px 8px 0 var(--profile-text); }
.public-profile.theme-canvas .profile-name { font:700 clamp(2.5rem,6vw,4.5rem)/.98 'Space Grotesk',sans-serif; text-transform:uppercase; }
.public-profile.theme-canvas .profile-avatar-inner { border:3px solid var(--profile-text); border-radius:4px; box-shadow:5px 5px 0 var(--profile-text); }
.public-profile.theme-canvas .pow-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.public-profile.theme-canvas .pow-pub-card { border:2px solid var(--profile-text); border-radius:3px; box-shadow:5px 5px 0 var(--profile-text); }
.public-profile .profile-banner::before { z-index:1; }
.public-profile .profile-banner::after { z-index:2; }
.public-profile .profile-cover-image { z-index:0; }
.public-profile .profile-banner-actions { z-index:3; }
.public-profile .profile-banner:not(:has(.profile-cover-image)) { background:linear-gradient(128deg,var(--profile-accent),#263a35); }
.public-profile .pstat-num,.public-profile .pow-pub-type,.public-profile .pow-public-section h2 i,.public-profile .clink-icon { color:var(--profile-accent)!important; }
.public-profile .profile-main-card,.public-profile .pow-pub-card,.public-profile .custom-link-item { background:var(--profile-surface); border-color:var(--profile-line); color:var(--profile-text); }
.public-profile .profile-name,.public-profile .pow-public-section h2,.public-profile .pow-pub-title { color:var(--profile-text); }
.public-profile .profile-handle,.public-profile .profile-bio,.public-profile .pow-pub-desc,.public-profile .pstat-lbl { color:var(--profile-muted); }
.public-profile .profile-divider,.public-profile .profile-share-strip,.public-profile .profile-footer-bar,.public-profile .pstat:not(:last-child) { border-color:var(--profile-line); }
.public-profile .skill-category-pill { color:var(--profile-accent); background:color-mix(in srgb,var(--profile-accent) 13%,var(--profile-surface)); }
.public-profile .pow-proof-link,.public-profile .pow-proof-file,.public-profile .create-yours-link { color:var(--profile-accent); }
.steps-grid { gap:16px; margin-top:2.2rem; align-items:stretch; }
.step { min-width:0; padding:26px 24px; border:1px solid #e8e5dc; border-radius:18px; background:#fffefa; box-shadow:0 12px 28px rgba(42,49,42,.06); }
.step-num { width:42px; height:42px; display:grid; place-items:center; margin-bottom:18px; border-radius:13px; font:700 1rem 'Space Grotesk',sans-serif; }
.step h3 { min-height:2.8em; margin-bottom:9px; font-size:1.08rem; line-height:1.35; }
.step p { line-height:1.7; overflow-wrap:anywhere; }
.features-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.remove-work-btn { width:auto; height:auto; min-width:54px; padding:7px 10px; border:1px solid #e4e4dc; border-radius:9px; background:#fffefa; color:#738078; font-size:.72rem; }
.remove-work-btn:hover { border-color:#dbc4b8; background:#faf1ec; color:#995e4c; }
@media(max-width:900px) { .public-profile.theme-ocean .pow-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .public-profile.theme-editorial .profile-main-card,.public-profile.theme-garden .profile-main-card { padding-left:26px; padding-right:26px; } .features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
  .steps-grid,.features-grid { grid-template-columns:1fr; gap:12px; }
  .step { padding:20px; }
  .step h3 { min-height:0; }
  .public-profile.theme-editorial .profile-main-card,.public-profile.theme-garden .profile-main-card { grid-template-columns:1fr; padding:0 18px 20px; text-align:center; }
  .public-profile.theme-editorial .profile-avatar-wrap,.public-profile.theme-garden .profile-avatar-wrap { grid-column:1; grid-row:auto; justify-self:center; margin:0 0 12px; }
  .public-profile.theme-editorial .profile-name,.public-profile.theme-editorial .profile-handle,.public-profile.theme-editorial .profile-bio,.public-profile.theme-editorial .profile-pills,.public-profile.theme-garden .profile-name,.public-profile.theme-garden .profile-handle,.public-profile.theme-garden .profile-bio,.public-profile.theme-garden .profile-pills { grid-column:1; justify-self:center; text-align:center; }
  .public-profile.theme-editorial .pow-cards,.public-profile.theme-garden .pow-cards,.public-profile.theme-midnight .pow-cards,.public-profile.theme-canvas .pow-cards,.public-profile.theme-ocean .pow-cards { grid-template-columns:1fr; }
  .public-profile.theme-editorial .pow-pub-card { display:block; }
  .public-profile.theme-editorial .pow-featured-img { height:185px; min-height:0; }
  .public-profile.theme-editorial .pow-pub-card>*:not(.pow-featured-img) { margin-left:16px; margin-right:16px; }
  .public-profile.theme-ocean .profile-main-card { padding-left:18px; padding-right:18px; }
  .public-profile.theme-canvas .profile-main-card { box-shadow:4px 4px 0 var(--profile-text); }
  .about-section { padding:3.8rem 0; }
}
@media(max-width:360px) { .theme-picker { grid-template-columns:1fr; } .theme-option { display:grid; grid-template-columns:52px 1fr; align-items:center; column-gap:10px; } .theme-swatch { grid-row:span 2; width:52px; margin:0; } }

/* Responsive media and blue native brand layer */
:root { --studio-coral:#3978d4; --studio-blue:#3978d4; }
html, body { max-width:100%; overflow-x:hidden; }
img, video { max-width:100%; }
.btn-primary, .button-primary, a.btn-primary, button.btn-primary { color:#fff; background:#3978d4; border-color:#3978d4; }
.btn-primary:hover, .button-primary:hover, a.btn-primary:hover, button.btn-primary:hover { background:#2865bd; border-color:#2865bd; }
.nav-brand i, .section-label, .showcase-link, .step-num { color:#3978d4; }
.nav-brand a { display:flex; align-items:center; gap:.65rem; }
.site-brand-logo { display:block; width:42px; height:42px; flex:0 0 42px; border:1px solid #e7edf5; border-radius:11px; background:#fff; object-fit:cover; object-position:center; box-shadow:0 4px 12px rgba(25,48,78,.09); }
.auth-logo { display:inline-flex; align-items:center; gap:.7rem; }
.site-logo-footer { display:block; width:25px; height:25px; margin-right:.5rem; border:1px solid #e7edf5; border-radius:7px; background:#fff; object-fit:cover; object-position:center; }
.footer-brand { display:flex; align-items:center; gap:.2rem; }
.public-profile, .profile-content, .pow-cards, .pow-pub-card { min-width:0; max-width:100%; }
.pow-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.pow-pub-card { overflow:hidden; }
.pow-featured-img { position:relative; width:100%; height:auto; min-height:0; aspect-ratio:16/9; overflow:hidden; }
.pow-featured-img img { display:block; width:100%; height:100%; min-width:0; max-width:100%; object-fit:cover; object-position:center; }
.public-profile.theme-editorial .pow-featured-img { height:auto; min-height:0; aspect-ratio:4/3; align-self:stretch; }
.public-profile .profile-banner { position:relative; width:100%; min-height:clamp(180px,30vw,340px); overflow:hidden; isolation:isolate; }
.public-profile .profile-cover-image { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.pow-pub-desc, .pow-pub-card h3 { overflow-wrap:anywhere; }
.hero { overflow:hidden; }
.hero-inner, .showcase-layout { min-width:0; }
.hero-title { font-size:clamp(2.6rem,7vw,6rem); overflow-wrap:anywhere; }
.showcase-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
@media (max-width:800px) {
  .showcase-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .pow-cards { grid-template-columns:minmax(0,1fr); }
  .public-profile .profile-banner { min-height:clamp(150px,42vw,230px); }
  .public-profile.theme-editorial .pow-pub-card { display:block; }
  .public-profile.theme-editorial .pow-featured-img { aspect-ratio:16/9; }
  .hero-title { font-size:clamp(2.25rem,12vw,4rem); }
  .steps-grid, .features-grid { grid-template-columns:minmax(0,1fr); }
}

/* Settings, dashboard, forms and work cards share the same friendly rhythm */
.app-layout { background:transparent; }
.dashboard-header,.page-header { margin-bottom:1.8rem; }
.stat-card { background:#fffefa; }
.stat-card:nth-child(4n+1) .stat-icon { background:#e5f2e9; color:#538365; }
.stat-card:nth-child(4n+2) .stat-icon { background:#eee8f8; color:#8c6a9c; }
.stat-card:nth-child(4n+3) .stat-icon { background:#fae8df; color:#c86d54; }
.pow-card,.pow-item,.badge-card { border:1px solid var(--studio-line); border-radius:16px; background:#fffefa; }
.pow-card:hover,.pow-item:hover { transform:translateY(-3px); box-shadow:var(--studio-shadow); }
.avatar-preview-wrap,.featured-img-drop,.file-drop { border-radius:16px; }
.tag-pill,.skill-tag { border-radius:999px; }
.alert { border-radius:13px; }

/* Portfolio gets a little more color, without taking focus away from the work */
.public-profile .profile-banner { background:#354b43; }
.public-profile .profile-banner::before { background:radial-gradient(ellipse at 74% 20%,rgba(240,178,146,.42),transparent 31%),radial-gradient(ellipse at 30% 90%,rgba(166,146,190,.38),transparent 36%),linear-gradient(125deg,transparent 50%,rgba(255,255,255,.07) 50.2%,transparent 50.8%); }
.public-profile .profile-avatar-inner { background:#fae8df; color:#c86d54; }
.public-profile .profile-main-card { background:#fffefa; }
.public-profile .profile-name { font-family:'Space Grotesk',sans-serif; }
.public-profile .profile-bio { font-family:'DM Sans',sans-serif; }
.public-profile .skill-category-pill { color:#986b9d; background:#f0eaf6; }
.public-profile .pow-pub-card { background:#fffefa; }
.public-profile .pow-pub-card:nth-child(3n+2) { background:linear-gradient(155deg,#fffefa,#f7f2fa); }
.public-profile .pow-pub-card:nth-child(3n) { background:linear-gradient(155deg,#fffefa,#f2f7f0); }
.public-profile .pow-pub-type { color:#b56852; }
.public-profile .profile-banner-btn { box-shadow:0 8px 22px rgba(0,0,0,.08); }

@keyframes studioRise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes studioDrift { from { transform:translate3d(0,0,0) rotate(0); } to { transform:translate3d(-18px,18px,0) rotate(7deg); } }
@media (max-width:700px) {
  .hero::before { width:250px; height:250px; right:-110px; top:8%; }
  .hero::after { width:150px; height:150px; }
  .hero-title { font-size:clamp(3rem,15vw,4.5rem); }
  .how-section,.features-section,.for-who-section { padding-top:3.7rem; padding-bottom:3.7rem; }
}
@media (prefers-reduced-motion:reduce) {
  .hero::before,.hero::after,.hero-eyebrow,.hero-title,.hero-sub,.hero-cta { animation:none !important; }
}

/* Landing hero: stable sizing and wrapping at every viewport */
.hero {
  min-height:min(820px, calc(100svh - 64px));
  display:flex;
  align-items:center;
  padding:clamp(3.5rem,8vw,7rem) 0;
  background:#f7faff;
}
.hero-inner {
  width:min(100% - 2.5rem, 1120px);
  margin-inline:auto;
  padding:0;
  text-align:center;
}
.hero-title {
  width:min(100%, 900px);
  margin:1.25rem auto 1.4rem;
  font-size:clamp(2.8rem, 7.2vw, 6.2rem);
  line-height:.99;
  letter-spacing:-.065em;
  text-wrap:balance;
  overflow-wrap:normal;
}
.hero-title .grad-text {
  background:linear-gradient(100deg,#3978d4 8%,#5596e5 55%,#76b5f2 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-sub { width:min(100%, 620px); margin:0 auto 2rem; }
.hero-cta { align-items:center; gap:.75rem; margin-bottom:2rem; }
.hero-cta .btn { min-height:52px; }
.hero-cta .btn-primary { background:#3978d4; border-color:#3978d4; }
.hero-cta .btn-primary:hover { background:#2865bd; border-color:#2865bd; }
.hero-role-chip { max-width:100%; }
.hero::before { background:#e6f0ff; }
.hero::after { background:#edf5ff; }
.hero-eyebrow { border-color:#d7e5f8; color:#3d5c81; }
.hero-eyebrow .dot { background:#3978d4; box-shadow:0 0 0 4px rgba(57,120,212,.14); }
@media (max-width:640px) {
  .hero { min-height:auto; padding:4rem 0 3.75rem; }
  .hero-inner { width:min(100% - 2rem, 520px); }
  .hero-title { margin:1rem auto 1.15rem; font-size:clamp(2.45rem, 11.8vw, 4.35rem); line-height:1.02; letter-spacing:-.06em; }
  .hero-title br { display:none; }
  .hero-sub { margin-bottom:1.5rem; font-size:1rem; line-height:1.65; }
  .hero-cta { display:grid; grid-template-columns:minmax(0,1fr); width:min(100%, 360px); margin:0 auto 1.5rem; }
  .hero-cta .btn { width:100%; justify-content:center; }
  .hero-roles { gap:.45rem; }
  .hero-role-chip { padding:.42rem .68rem; font-size:.78rem; }
  .hero::before { width:240px; height:240px; right:-140px; top:2%; }
  .hero::after { width:170px; height:170px; left:-110px; bottom:0; }
}

/* Public pages should read like project portfolios, with identity in support. */
.public-profile .profile-content { display:flex; flex-direction:column; gap:0; }
.public-profile .profile-main-card { order:1; display:grid; grid-template-columns:132px minmax(0,1fr); align-items:center; column-gap:26px; row-gap:0; padding:30px 38px 22px; text-align:left; }
.public-profile .profile-main-card .profile-avatar-wrap { grid-column:1; grid-row:1 / span 5; align-self:center; justify-self:center; margin:0; padding:0; }
.public-profile .profile-main-card .profile-avatar-inner { width:116px; height:116px; }
.public-profile .profile-main-card .profile-name,
.public-profile .profile-main-card .profile-handle,
.public-profile .profile-main-card .profile-bio,
.public-profile .profile-main-card .profile-pills { grid-column:2; justify-self:start; text-align:left; }
.public-profile .profile-main-card .profile-name { margin:0 0 2px; font-size:clamp(2rem,4vw,3rem); line-height:1.04; letter-spacing:-.055em; }
.public-profile .profile-main-card .profile-handle { margin:0 0 10px; }
.public-profile .profile-main-card .profile-bio { max-width:660px; margin:0 0 14px; }
.public-profile .profile-main-card .profile-pills { margin:0; }
.public-profile .profile-main-card .profile-divider,
.public-profile .profile-main-card .profile-stats-strip,
.public-profile .profile-main-card .profile-share-strip { grid-column:1 / -1; width:100%; }
.public-profile .profile-main-card .profile-divider { margin:24px 0 16px; }
.public-profile .profile-main-card .profile-stats-strip { justify-content:flex-start; padding:0 0 16px; }
.public-profile .profile-main-card .profile-share-strip { border-top:1px solid var(--profile-line); padding-top:14px; }
.public-profile .pow-public-section { order:2; margin-top:22px; }
.public-profile .social-section { order:3; }
.public-profile .custom-links-section { order:4; }
.public-profile .profile-footer-bar { order:5; }
.public-profile .portfolio-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 20px; padding:0 0 16px; border-bottom:1px solid var(--profile-line); }
.public-profile .portfolio-heading h2 { margin:5px 0 4px; font-size:clamp(2rem,4vw,3.25rem); line-height:1; letter-spacing:-.06em; }
.public-profile .portfolio-heading p { margin:0; color:var(--profile-muted); font-size:.96rem; }
.public-profile .portfolio-kicker,.public-profile .portfolio-index { color:var(--profile-accent); font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.public-profile .portfolio-index { white-space:nowrap; padding-bottom:5px; }
.public-profile .portfolio-count { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--profile-line); border-radius:99px; color:var(--profile-accent); font:700 .85rem 'DM Sans',sans-serif; vertical-align:middle; letter-spacing:0; }
.public-profile .pow-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.public-profile .pow-pub-card { display:flex; flex-direction:column; min-width:0; border-radius:16px; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.public-profile .pow-pub-card:hover { transform:translateY(-4px); }
.public-profile .pow-featured-img { aspect-ratio:16/10; height:auto; min-height:0; margin:0; }
.public-profile .pow-featured-img img { transition:transform .45s ease; }
.public-profile .pow-pub-card:hover .pow-featured-img img { transform:scale(1.035); }
.public-profile .pow-pub-top,.public-profile .pow-pub-title,.public-profile .pow-pub-desc,.public-profile .pow-pub-skills,.public-profile .pow-pub-bottom { margin-left:22px; margin-right:22px; }
.public-profile .pow-pub-top { margin-top:20px; }
.public-profile .pow-pub-title { margin-top:12px; font-size:1.45rem; line-height:1.18; letter-spacing:-.035em; }
.public-profile .pow-pub-desc { flex:1; color:var(--profile-muted); line-height:1.65; }
.public-profile .pow-pub-bottom { margin-top:16px; padding:14px 0 18px; border-top:1px solid var(--profile-line); }
.public-profile .pow-pub-card:not(:has(.pow-featured-img)) { padding-top:2px; }
.public-profile .pow-pub-card:not(:has(.pow-featured-img)) .pow-pub-top { margin-top:22px; }
@media(max-width:720px) {
  .public-profile .profile-content { width:calc(100% - 28px); margin-left:auto; margin-right:auto; }
  .public-profile .profile-main-card { grid-template-columns:92px minmax(0,1fr); column-gap:16px; padding:24px 20px 18px; }
  .public-profile .profile-main-card .profile-avatar-inner { width:88px; height:88px; }
  .public-profile .profile-main-card .profile-name { font-size:clamp(1.65rem,6vw,2.35rem); }
  .public-profile .profile-main-card .profile-stats-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .public-profile .pow-cards { grid-template-columns:minmax(0,1fr); }
  .public-profile .pow-featured-img { aspect-ratio:16/9; }
}
@media(max-width:480px) {
  .public-profile .profile-main-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:22px 18px 17px; }
  .public-profile .profile-main-card .profile-avatar-wrap { align-self:flex-start; margin-bottom:16px; }
  .public-profile .profile-main-card .profile-name,.public-profile .profile-main-card .profile-handle,.public-profile .profile-main-card .profile-bio,.public-profile .profile-main-card .profile-pills { align-self:flex-start; text-align:left; }
  .public-profile .profile-main-card .profile-divider { margin:20px 0 14px; }
  .public-profile .profile-main-card .profile-stats-strip { width:100%; }
  .public-profile .profile-main-card .profile-share-strip { align-items:flex-start; gap:10px; }
  .public-profile .portfolio-heading { align-items:flex-start; }
  .public-profile .portfolio-index { display:none; }
  .public-profile .pow-pub-top,.public-profile .pow-pub-title,.public-profile .pow-pub-desc,.public-profile .pow-pub-skills,.public-profile .pow-pub-bottom { margin-left:17px; margin-right:17px; }
}

/* Portfolio landing treatment inspired by editorial personal portfolio sites */
.public-profile .profile-banner {
  height:clamp(500px,68vw,700px);
  min-height:0;
  margin:0;
  background-color:#182b3a;
  background-image:radial-gradient(ellipse at 74% 22%,rgba(75,133,191,.35),transparent 36%),linear-gradient(130deg,#142536,#253f54 58%,#162c3d);
}
.public-profile .profile-banner::before {
  z-index:1;
  background:linear-gradient(90deg,rgba(9,19,29,.64),rgba(9,19,29,.24) 58%,rgba(9,19,29,.12)),linear-gradient(0deg,rgba(9,19,29,.28),transparent 60%);
}
.public-profile .profile-banner:has(.profile-cover-image)::before { background:linear-gradient(90deg,rgba(9,19,29,.74),rgba(9,19,29,.42) 55%,rgba(9,19,29,.18)),linear-gradient(0deg,rgba(9,19,29,.32),transparent 64%); }
.public-profile .profile-banner::after { content:"PORTFOLIO  /  SELECTED WORK"; left:max(calc((100vw - 1160px)/2),32px); bottom:28px; color:rgba(255,255,255,.64); }
.public-profile .portfolio-topbar { position:absolute; z-index:4; top:0; left:50%; transform:translateX(-50%); width:min(calc(100% - 64px),1160px); min-height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.23); }
.public-profile .portfolio-wordmark { color:#fff; font:700 1.1rem 'Space Grotesk',sans-serif; letter-spacing:-.04em; text-decoration:none; }
.public-profile .portfolio-wordmark span { color:#91c4ff; }
.public-profile .portfolio-topbar nav { display:flex; align-items:center; gap:clamp(18px,3vw,38px); }
.public-profile .portfolio-topbar nav a { color:rgba(255,255,255,.84); font-size:.88rem; font-weight:600; text-decoration:none; transition:color .2s; }
.public-profile .portfolio-topbar nav a:hover { color:#fff; }
.public-profile .profile-banner-actions { top:18px; right:max(calc((100vw - 1160px)/2),32px); bottom:auto; z-index:5; }
.public-profile .profile-banner-btn { min-height:42px; display:inline-flex; align-items:center; padding:0 16px; border:1px solid rgba(255,255,255,.48); border-radius:6px; color:#fff; background:rgba(255,255,255,.12); box-shadow:none; backdrop-filter:blur(10px); text-decoration:none; }
.public-profile .profile-banner-btn:hover { color:#fff; background:rgba(255,255,255,.22); }
.public-profile .portfolio-hero-copy { position:absolute; z-index:3; left:max(calc((100vw - 1160px)/2),32px); right:32px; bottom:clamp(82px,12vw,140px); width:min(760px,calc(100% - 64px)); color:#fff; }
.public-profile .portfolio-hero-kicker { display:flex; align-items:center; gap:10px; margin-bottom:22px; color:#c5d8ea; font-size:.72rem; font-weight:750; letter-spacing:.18em; text-transform:uppercase; }
.public-profile .portfolio-hero-copy h1 { max-width:760px; margin:0 0 18px; color:#fff; font:500 clamp(3.6rem,9vw,8.2rem)/.9 'Fraunces',Georgia,serif; letter-spacing:-.065em; text-wrap:balance; }
.public-profile .portfolio-hero-copy p { max-width:600px; margin:0 0 26px; color:rgba(255,255,255,.82); font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.75; }
.public-profile .portfolio-hero-link { display:inline-flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.7); color:#fff; font-size:.92rem; font-weight:700; text-decoration:none; }
.public-profile .portfolio-hero-link i { font-size:.8rem; transition:transform .2s; }
.public-profile .portfolio-hero-link:hover i { transform:translateY(4px); }
.public-profile .profile-content { display:flex; flex-direction:column; gap:0; width:min(calc(100% - 64px),1160px); max-width:1160px; margin:0 auto; padding:0 0 64px; }
.public-profile .pow-public-section { order:1; margin:0; padding:76px 0 34px; scroll-margin-top:24px; }
.public-profile .portfolio-heading { margin-bottom:28px; padding-bottom:20px; }
.public-profile .portfolio-heading h2 { font:500 clamp(2.6rem,5vw,4.1rem)/1 'Fraunces',Georgia,serif; letter-spacing:-.05em; }
.public-profile .portfolio-heading p { font-size:1rem; }
.public-profile .portfolio-kicker { display:block; color:var(--profile-accent); font-size:.68rem; font-weight:800; letter-spacing:.18em; }
.public-profile .portfolio-count { min-width:32px; height:32px; font-size:.88rem; }
.public-profile .pow-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.public-profile .pow-pub-card { background:var(--profile-surface); border:1px solid var(--profile-line); border-radius:4px; box-shadow:none; }
.public-profile .pow-pub-card:hover { border-color:color-mix(in srgb,var(--profile-accent) 45%,var(--profile-line)); box-shadow:0 20px 48px rgba(22,37,51,.11); }
.public-profile .pow-featured-img { aspect-ratio:1.58; background:var(--profile-soft); }
.public-profile .pow-pub-top,.public-profile .pow-pub-title,.public-profile .pow-pub-desc,.public-profile .pow-pub-skills,.public-profile .pow-pub-bottom { margin-left:26px; margin-right:26px; }
.public-profile .pow-pub-top { margin-top:24px; }
.public-profile .pow-pub-title { margin-top:14px; font:500 clamp(1.5rem,2.6vw,2.1rem)/1.12 'Fraunces',Georgia,serif; letter-spacing:-.035em; }
.public-profile .pow-pub-desc { margin-top:10px; font-size:.96rem; line-height:1.7; }
.public-profile .pow-pub-bottom { align-items:center; margin-top:22px; padding:16px 0 22px; }
.public-profile .profile-main-card { order:2; display:block; margin:26px 0 12px; padding:44px 0; border:0; border-top:1px solid var(--profile-line); border-bottom:1px solid var(--profile-line); border-radius:0; background:transparent; box-shadow:none; }
.public-profile .profile-main-card .profile-avatar-wrap,
.public-profile .profile-main-card .profile-name,
.public-profile .profile-main-card .profile-handle,
.public-profile .profile-main-card .profile-bio,
.public-profile .profile-main-card .profile-pills,
.public-profile .profile-main-card .profile-divider,
.public-profile .profile-main-card .profile-stats-strip { display:none; }
.public-profile .portfolio-about { max-width:780px; scroll-margin-top:30px; }
.public-profile .portfolio-about h2 { margin:12px 0 14px; color:var(--profile-text); font:500 clamp(2rem,4vw,3.15rem)/1.06 'Fraunces',Georgia,serif; letter-spacing:-.045em; }
.public-profile .portfolio-about p { max-width:700px; margin:0; color:var(--profile-muted); font-size:1.08rem; line-height:1.85; }
.public-profile .portfolio-location { display:inline-flex; gap:8px; margin-top:18px; color:var(--profile-muted); font-size:.9rem; }
.public-profile .profile-main-card .profile-share-strip { justify-content:flex-start; width:auto; margin-top:22px; padding:0; border:0; }
.public-profile .profile-main-card .views-badge { display:none; }
.public-profile .social-section,.public-profile .custom-links-section { order:3; margin-top:30px; scroll-margin-top:24px; }
.public-profile .social-section h3,.public-profile .custom-links-section h3 { margin-bottom:16px; color:var(--profile-text); font:500 1.65rem 'Fraunces',Georgia,serif; }
.public-profile .profile-footer-bar { order:4; margin-top:56px; }
.public-profile.theme-editorial .profile-main-card,.public-profile.theme-garden .profile-main-card { display:block; }
@media(max-width:720px) {
  .public-profile .profile-banner { height:590px; }
  .public-profile .portfolio-topbar { width:calc(100% - 40px); min-height:70px; }
  .public-profile .portfolio-topbar nav { gap:16px; }
  .public-profile .portfolio-topbar nav a { font-size:.82rem; }
  .public-profile .profile-banner-actions { right:20px; top:84px; }
  .public-profile .portfolio-hero-copy { left:22px; bottom:88px; width:calc(100% - 44px); }
  .public-profile .profile-banner::after { left:22px; bottom:26px; }
  .public-profile .profile-content { width:calc(100% - 40px); }
  .public-profile .pow-public-section { padding-top:54px; }
  .public-profile .pow-cards { grid-template-columns:minmax(0,1fr); gap:20px; }
  .public-profile .pow-featured-img { aspect-ratio:1.65; }
}
@media(max-width:480px) {
  .public-profile .profile-banner { height:560px; }
  .public-profile .portfolio-topbar { width:calc(100% - 32px); min-height:64px; }
  .public-profile .portfolio-wordmark { font-size:1rem; }
  .public-profile .portfolio-topbar nav { gap:12px; }
  .public-profile .portfolio-topbar nav a { font-size:.75rem; }
  .public-profile .profile-banner-actions { top:78px; right:16px; }
  .public-profile .profile-banner-btn { min-height:36px; padding:0 11px; font-size:.76rem; }
  .public-profile .portfolio-hero-copy { left:18px; bottom:82px; width:calc(100% - 36px); }
  .public-profile .portfolio-hero-kicker { margin-bottom:16px; font-size:.62rem; }
  .public-profile .portfolio-hero-copy h1 { font-size:clamp(3.15rem,15vw,5.2rem); }
  .public-profile .portfolio-hero-copy p { font-size:.97rem; }
  .public-profile .profile-content { width:calc(100% - 36px); padding-bottom:42px; }
  .public-profile .portfolio-heading { align-items:flex-start; }
  .public-profile .portfolio-index { display:none; }
  .public-profile .pow-pub-top,.public-profile .pow-pub-title,.public-profile .pow-pub-desc,.public-profile .pow-pub-skills,.public-profile .pow-pub-bottom { margin-left:18px; margin-right:18px; }
  .public-profile .profile-main-card { margin-top:12px; padding:34px 0; }
}

/* Final polish for portfolio-first public pages */
.public-profile #work .empty-state { padding:clamp(32px,7vw,72px) 24px; border:1px solid var(--profile-line); border-radius:4px; background:var(--profile-surface); text-align:center; }
.public-profile #work .empty-state .portfolio-kicker { margin-bottom:12px; }
.public-profile #work .empty-state h3 { margin:0 auto 10px; color:var(--profile-text); font:500 clamp(1.8rem,4vw,2.8rem)/1.08 'Fraunces',Georgia,serif; }
.public-profile #work .empty-state p { max-width:520px; margin:0 auto 20px; color:var(--profile-muted); line-height:1.7; }
.public-profile .portfolio-hero-copy h1 { max-width:680px; }
.public-profile .portfolio-hero-copy p { max-width:520px; }
.public-profile .portfolio-proof-strip { order:0; display:grid; grid-template-columns:repeat(3,minmax(100px,.72fr)) minmax(220px,1.55fr); align-items:center; gap:0; margin-top:-1px; padding:28px 30px; border:1px solid var(--profile-line); border-top:0; background:var(--profile-surface); animation:portfolio-enter .7s .16s both; }
.public-profile .portfolio-proof-item { display:flex; flex-direction:column; gap:5px; min-width:0; padding:4px 22px; border-right:1px solid var(--profile-line); }
.public-profile .portfolio-proof-item:first-child { padding-left:0; }
.public-profile .portfolio-proof-item strong { color:var(--profile-text); font:500 2rem/1 'Fraunces',Georgia,serif; }
.public-profile .portfolio-proof-item span { color:var(--profile-muted); font-size:.76rem; line-height:1.4; }
.public-profile .portfolio-proof-note { display:flex; flex-direction:column; gap:7px; padding-left:26px; }
.public-profile .portfolio-proof-note > span:last-child { max-width:310px; color:var(--profile-muted); font-size:.88rem; line-height:1.55; }
.public-profile .portfolio-about { padding-left:8%; }
.public-profile .portfolio-about h2 { max-width:720px; }
.public-profile .portfolio-about p { font-size:1.05rem; }
.public-profile .portfolio-heading { border-bottom:1px solid var(--profile-line); }
.public-profile .portfolio-heading > div { max-width:780px; }
.public-profile .pow-pub-type { text-transform:uppercase; font-size:.7rem; letter-spacing:.11em; font-weight:800; }
.public-profile .verified-chip { border-radius:3px; font-size:.68rem; letter-spacing:.03em; }
.public-profile .pow-pub-bottom { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.public-profile .pow-proof-link,.public-profile .pow-proof-file { border-radius:3px; font-weight:700; }
@keyframes portfolio-enter {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}
.public-profile .portfolio-topbar { animation:portfolio-enter .55s ease-out both; }
.public-profile .portfolio-hero-copy > * { animation:portfolio-enter .7s cubic-bezier(.2,.7,.2,1) both; }
.public-profile .portfolio-hero-kicker { animation-delay:.08s; }
.public-profile .portfolio-hero-copy h1 { animation-delay:.16s; }
.public-profile .portfolio-hero-copy p { animation-delay:.24s; }
.public-profile .portfolio-hero-link { animation-delay:.32s; }
.public-profile .portfolio-portrait { position:absolute; right:-230px; bottom:0; width:176px; height:218px; object-fit:cover; object-position:center 28%; border:5px solid rgba(255,255,255,.9); border-radius:3px; box-shadow:0 18px 54px rgba(0,0,0,.25); animation:portfolio-enter .8s .28s both; }
.public-profile .profile-banner-actions { top:auto; right:max(calc((100vw - 1160px)/2),32px); bottom:26px; }
.public-profile .portfolio-topbar a:focus-visible,.public-profile .profile-banner-btn:focus-visible,.public-profile .portfolio-hero-link:focus-visible,.public-profile .pow-pub-card a:focus-visible,.public-profile .social-section a:focus-visible { outline:3px solid #9bcaff; outline-offset:4px; }
.public-profile .pow-pub-card { animation:portfolio-enter .65s cubic-bezier(.2,.7,.2,1) both; }
.public-profile .pow-pub-card:nth-child(2) { animation-delay:.08s; }
.public-profile .pow-pub-card:nth-child(3) { animation-delay:.16s; }
.public-profile .pow-pub-card:nth-child(4) { animation-delay:.24s; }
.public-profile .pow-public-section,.public-profile .portfolio-about,.public-profile .social-section,.public-profile .custom-links-section { min-width:0; }
.public-profile .social-icons-row { display:flex; flex-wrap:wrap; gap:10px; }
.public-profile .social-section .soc-btn { border-radius:4px; transition:transform .18s ease,background-color .18s ease,border-color .18s ease; }
.public-profile .social-section .soc-btn:hover { transform:translateY(-2px); }
.public-profile .custom-link-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.public-profile .custom-link-item { min-width:0; border-radius:4px; transition:transform .18s ease,border-color .18s ease; }
.public-profile .custom-link-item:hover { transform:translateY(-2px); }
.public-profile .profile-footer-bar { border-top:1px solid var(--profile-line); padding-top:22px; }
.public-profile .profile-footer-bar p { letter-spacing:.04em; }
.public-profile .profile-footer-bar .create-yours-link { color:var(--profile-accent); }
@media(max-width:900px) {
  .public-profile .portfolio-portrait { right:-195px; width:150px; height:190px; }
}
@media(max-width:720px) {
  .public-profile .portfolio-proof-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:20px 16px; }
  .public-profile .portfolio-proof-item { padding:3px 12px; }
  .public-profile .portfolio-proof-item strong { font-size:1.65rem; }
  .public-profile .portfolio-proof-item span { font-size:.68rem; }
  .public-profile .portfolio-proof-note { grid-column:1/-1; margin-top:16px; padding:14px 0 0; border-top:1px solid var(--profile-line); }
  .public-profile .portfolio-proof-note > span:last-child { max-width:none; }
  .public-profile .portfolio-about { padding-left:0; }
  .public-profile .profile-banner-actions { top:auto; right:22px; bottom:22px; }
  .public-profile .portfolio-portrait { display:none; }
  .public-profile .custom-link-list { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:480px) {
  .public-profile .portfolio-proof-strip { grid-template-columns:repeat(3,minmax(0,1fr)); padding:18px 10px; }
  .public-profile .portfolio-proof-item { padding:3px 8px; }
  .public-profile .portfolio-proof-item strong { font-size:1.45rem; }
  .public-profile .portfolio-proof-item span { font-size:.62rem; }
  .public-profile .profile-banner-actions { right:18px; bottom:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .public-profile *, .public-profile *::before, .public-profile *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}