:root {
  --blue: #128bff;
  --blue-2: #53b7ff;
  --blue-deep: #0b2869;
  --blue-soft: #eaf7ff;
  --blue-pale: #f5fbff;
  --text: #526b98;
  --text-deep: #122b69;
  --line: #dfeef9;
  --white: #ffffff;
  --shadow: 0 22px 60px rgba(28, 94, 162, .13);
  --shadow-soft: 0 12px 34px rgba(23, 104, 185, .10);
  --container: 1280px;
  --header-h: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}
body.modal-lock { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.site-shell { overflow-x: clip; }

.site-header {
  position: relative;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { flex: 0 0 auto; }
.brand img { width: 220px; height: 56px; object-fit: contain; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.5vw, 34px); margin-left: auto; }
.main-nav a { position: relative; color: #61749a; font-size: 14px; font-weight: 500; transition: color .18s ease; white-space: nowrap; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--blue); border-radius: 999px; transform: scaleX(0); transform-origin: center; transition: transform .18s ease; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.active { color: var(--blue); }
.main-nav a.active::after, .main-nav a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.nav-login { min-height: 48px; padding: 0 10px; border: 0; background: transparent; color: var(--blue); font-weight: 800; cursor: pointer; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 0; background: transparent; padding: 8px; cursor: pointer; border-radius: 14px; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; border-radius: 99px; background: var(--blue-deep); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.btn {
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, .nav-login:focus-visible, .menu-toggle:focus-visible, .text-button:focus-visible { outline: 3px solid rgba(18,139,255,.22); outline-offset: 3px; }
.btn-primary { color: #fff; background: linear-gradient(135deg, #41adff, #0d83f8); box-shadow: 0 15px 30px rgba(13, 131, 248, .23); }
.btn-outline { color: var(--blue-deep); background: #fff; border: 2px solid #45a9ff; box-shadow: none; }
.full { width: 100%; }

.hero { position: relative; min-height: 670px; padding: 8px 0 22px; isolation: isolate; }
.hero-bg { position: absolute; pointer-events: none; z-index: -2; }
.hero-bg-left { left: 0; top: -10px; width: min(73vw, 990px); height: 590px; border-radius: 0 0 210px 0; background: radial-gradient(circle at 30% 25%, #fff 0%, #fbfdff 33%, #e9f7ff 100%); }
.hero-bg-right { right: -11%; top: 0; width: min(58vw, 820px); height: 650px; border-radius: 42% 0 0 45%; background: linear-gradient(155deg, #edf9ff 2%, #d7f0ff 43%, #5bbcf9 44%, #2fa6f3 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.hero-copy { position: relative; z-index: 4; padding: 62px 0 28px 16px; }
.eyebrow { margin-bottom: 24px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .29em; }
.hero h1 { margin: 0 0 22px; max-width: 730px; color: var(--blue-deep); font-size: clamp(54px, 5.45vw, 82px); line-height: .98; letter-spacing: -.055em; font-weight: 850; }
.hero h1 span { color: var(--blue); }
.hero-lead { max-width: 590px; margin: 0 0 28px; color: #6c7da0; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.65; }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 42px; }
.mini-features { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.1vw, 30px); }
.mini-feature { display: flex; align-items: center; gap: 9px; color: #60759d; font-size: 11px; font-weight: 600; line-height: 1.3; }
.mini-icon { width: 36px; height: 36px; padding: 9px; border-radius: 50%; display: grid; place-items: center; color: var(--blue); background: #edf7ff; box-shadow: 0 6px 16px rgba(23,139,255,.08); }

.hero-visual { position: relative; min-height: 585px; display: grid; place-items: center; z-index: 3; }
.product-stage { position: relative; z-index: 3; width: min(62%, 355px); margin-top: 18px; }
.product-stage picture, .product-stage img { width: 100%; }
.product-stage img { height: auto; filter: drop-shadow(0 30px 28px rgba(11, 49, 107, .25)); user-select: none; -webkit-user-drag: none; }
.visual-ring { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.ring-one { width: 510px; aspect-ratio: 1; right: 7%; top: 17px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.13); }
.ring-two { width: 660px; aspect-ratio: 1; right: -16%; bottom: -160px; border: 1px solid rgba(255,255,255,.26); }
.float-card { position: absolute; z-index: 5; width: 205px; padding: 18px; display: flex; align-items: flex-start; gap: 13px; background: rgba(255,255,255,.96); border: 1px solid rgba(217,235,249,.88); border-radius: 24px; box-shadow: var(--shadow); }
.float-icon { flex: 0 0 auto; width: 46px; height: 46px; padding: 12px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #eaf6ff; }
.float-card h3 { margin: 1px 0 6px; color: var(--blue-deep); font-size: 16px; line-height: 1.12; }
.float-card p { margin: 0; color: #7b8cab; font-size: 12px; line-height: 1.45; }
.card-natural { left: -4px; top: 58px; }
.card-quality { right: -6px; top: 138px; }
.card-community { right: -6px; bottom: 54px; }
.orb { position: absolute; z-index: 4; width: 54px; height: 54px; padding: 14px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #46b0ff, #0c83f8); box-shadow: 0 12px 24px rgba(13,131,248,.22); }
.orb-heart { top: 72px; right: 140px; }
.orb-growth { left: 34px; bottom: 108px; }

.stats-section { position: relative; z-index: 8; margin-top: -20px; padding-bottom: 28px; }
.stats-card { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); background: rgba(255,255,255,.96); border: 1px solid rgba(220,237,249,.95); border-radius: 28px; box-shadow: var(--shadow); padding: 27px 34px; }
.stat-item { min-width: 0; display: flex; align-items: center; gap: 19px; padding: 4px 30px; border-right: 1px solid var(--line); }
.stat-item:first-child { padding-left: 6px; }
.stat-item:last-child { border-right: 0; padding-right: 6px; }
.stat-icon { flex: 0 0 auto; width: 60px; height: 60px; padding: 16px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #edf7ff; }
.stat-item strong { display: block; margin-bottom: 5px; color: #14378c; font-size: clamp(28px, 2.7vw, 40px); line-height: 1; letter-spacing: -.04em; }
.stat-item span { display: block; color: #788bad; font-size: 13px; line-height: 1.35; }

.foundation-strip { padding: 4px 0 28px; }
.foundation-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 26px; background: rgba(255,255,255,.82); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); }
.foundation-inner > div { display: grid; gap: 5px; }
.foundation-kicker { color: var(--blue); font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.foundation-inner strong { color: var(--blue-deep); font-size: 16px; }
.text-button { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--blue); font-weight: 800; cursor: pointer; }

.site-footer { padding: 18px 0 calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e7f1f9; background: rgba(255,255,255,.72); }
.footer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-logo { width: 170px; height: auto; }
.footer-wrap p { margin: 0; color: #91a2bd; font-size: 12px; }

.modal { position: fixed; inset: 0; z-index: 100; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(9,35,82,.30); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal-card { position: relative; z-index: 1; width: min(100%, 420px); max-height: calc(100dvh - 32px); overflow: auto; padding: 32px; border: 1px solid #e2eef8; border-radius: 26px; background: #fff; box-shadow: 0 30px 80px rgba(13,48,105,.25); transform: translateY(12px) scale(.985); transition: transform .22s ease; }
.modal.is-open .modal-card { transform: none; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1f8fe; color: #52709b; font-size: 24px; line-height: 1; cursor: pointer; }
.modal-badge { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 17px; color: #fff; font-weight: 900; background: linear-gradient(135deg, var(--blue-2), var(--blue)); }
.modal-card h2 { margin: 18px 0 8px; color: var(--blue-deep); font-size: 28px; }
.modal-card > p { margin: 0 0 18px; color: #778aa9; font-size: 14px; line-height: 1.55; }
.modal-card form { display: grid; gap: 14px; }
.modal-card label { display: grid; gap: 7px; color: #48648f; font-size: 12px; font-weight: 800; }
.modal-card input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #dcebf7; border-radius: 14px; outline: 0; background: #fbfdff; color: var(--blue-deep); font-size: 16px; }
.modal-card input:focus { border-color: #68baff; box-shadow: 0 0 0 4px rgba(18,139,255,.08); }
.modal-message { min-height: 20px; margin-top: 12px; color: var(--blue); font-size: 13px; line-height: 1.45; font-weight: 700; }
.modal-message.error { color: #cf3d50; }
.modal-message.success { color: #16875d; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (min-width: 1440px) {
  :root { --container: 1360px; }
  .hero { min-height: 700px; }
  .hero-visual { min-height: 610px; }
  .product-stage { width: min(61%, 385px); }
  .card-natural { left: 12px; }
  .card-quality, .card-community { right: 4px; }
}

@media (max-width: 1180px) {
  .brand img { width: 190px; }
  .main-nav { gap: 20px; }
  .nav-actions { gap: 10px; }
  .nav-join { padding-inline: 20px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); }
  .hero-copy { padding-left: 0; }
  .float-card { width: 190px; }
  .card-natural { left: -22px; }
  .card-quality, .card-community { right: -22px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .container { width: min(calc(100% - 36px), var(--container)); }
  .menu-toggle { display: block; order: 3; }
  .nav-actions { margin-left: auto; }
  .main-nav {
    position: absolute; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); left: 18px; right: 18px;
    display: grid; gap: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 22px;
    background: rgba(255,255,255,.98); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .18s ease;
  }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { padding: 13px 14px; border-bottom: 1px solid #edf4fa; }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a::after { display: none; }

  .hero { padding-top: 8px; min-height: 0; }
  .hero-bg-left { width: 100%; height: 580px; border-radius: 0 0 180px 0; }
  .hero-bg-right { top: 520px; right: -20%; width: 110%; height: 720px; border-radius: 45% 0 0 25%; }
  .hero-grid { grid-template-columns: 1fr; gap: 4px; }
  .hero-copy { padding: 52px 14px 8px; text-align: center; }
  .hero h1 { margin-inline: auto; max-width: 790px; font-size: clamp(54px, 8vw, 78px); }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .mini-features { justify-content: center; }
  .hero-visual { min-height: 680px; max-width: 760px; width: 100%; margin-inline: auto; }
  .product-stage { width: min(48%, 350px); }
  .ring-one { right: 15%; }
  .ring-two { right: -4%; }
  .card-natural { left: 2%; top: 76px; }
  .card-quality { right: 1%; top: 148px; }
  .card-community { right: 0; bottom: 70px; }
  .orb-heart { right: 19%; }
  .orb-growth { left: 14%; bottom: 122px; }
  .stats-section { margin-top: -8px; }
  .stats-card { padding: 24px; }
  .stat-item { padding-inline: 20px; }
}

@media (max-width: 768px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .brand img { width: 176px; height: auto; }
  .nav-login { display: none; }
  .nav-join { display: none; }
  .hero-bg-left { height: 520px; border-radius: 0 0 120px 0; }
  .hero-bg-right { top: 490px; height: 680px; right: -38%; width: 138%; }
  .hero-copy { padding: 40px 4px 0; }
  .eyebrow { font-size: 10px; letter-spacing: .22em; }
  .hero h1 { font-size: clamp(46px, 12vw, 64px); line-height: 1; }
  .hero-lead { font-size: 16px; max-width: 560px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { min-width: 210px; }
  .mini-features { gap: 12px 18px; }
  .mini-feature { width: calc(50% - 10px); justify-content: center; font-size: 11px; }
  .hero-visual { min-height: 620px; }
  .product-stage { width: min(51%, 320px); margin-top: 36px; }
  .float-card { width: 176px; padding: 14px; border-radius: 20px; gap: 10px; }
  .float-icon { width: 38px; height: 38px; padding: 10px; }
  .float-card h3 { font-size: 14px; }
  .float-card p { font-size: 10.5px; }
  .card-natural { left: 0; top: 52px; }
  .card-quality { right: 0; top: 118px; }
  .card-community { right: 0; bottom: 52px; }
  .orb { width: 46px; height: 46px; padding: 12px; }
  .orb-heart { top: 54px; right: 17%; }
  .orb-growth { left: 9%; bottom: 110px; }
  .stats-card { grid-template-columns: 1fr; gap: 0; border-radius: 24px; padding: 14px 20px; }
  .stat-item, .stat-item:first-child, .stat-item:last-child { padding: 18px 4px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-item:last-child { border-bottom: 0; }
  .stat-icon { width: 54px; height: 54px; padding: 14px; }
  .stat-item strong { font-size: 30px; }
  .foundation-inner { flex-direction: column; align-items: flex-start; }
  .footer-wrap { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  :root { --header-h: 68px; }
  .container { width: min(calc(100% - 22px), var(--container)); }
  .brand img { width: 155px; }
  .menu-toggle { width: 44px; height: 44px; }
  .main-nav { left: 11px; right: 11px; }
  .hero-bg-left { height: 470px; border-radius: 0 0 90px 0; }
  .hero-bg-right { top: 455px; height: 640px; right: -58%; width: 170%; }
  .hero-copy { padding-top: 32px; }
  .eyebrow { margin-bottom: 18px; }
  .hero h1 { font-size: clamp(41px, 13vw, 56px); letter-spacing: -.045em; }
  .hero-lead { font-size: 15px; line-height: 1.58; }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 330px); margin: 0 auto 30px; }
  .hero-actions .btn { width: 100%; min-width: 0; }
  .mini-features { max-width: 360px; margin-inline: auto; }
  .mini-feature { justify-content: flex-start; }
  .hero-visual { min-height: 565px; }
  .product-stage { width: min(56%, 270px); margin-top: 48px; }
  .ring-one { width: 390px; right: -12%; }
  .ring-two { width: 520px; right: -58%; bottom: -130px; }
  .float-card { width: 148px; padding: 12px; border-radius: 18px; }
  .float-icon { width: 34px; height: 34px; padding: 9px; }
  .float-card h3 { font-size: 12.5px; }
  .float-card p { font-size: 9px; }
  .card-natural { left: -3px; top: 44px; }
  .card-quality { right: -3px; top: 112px; }
  .card-community { right: -3px; bottom: 42px; }
  .orb-heart { width: 40px; height: 40px; padding: 10px; right: 11%; top: 52px; }
  .orb-growth { width: 40px; height: 40px; padding: 10px; left: 4%; bottom: 105px; }
  .stats-section { padding-bottom: 20px; }
  .stat-item { gap: 14px; }
  .stat-item span { font-size: 12px; }
  .foundation-inner { padding: 18px; border-radius: 20px; }
  .modal-card { padding: 28px 20px 22px; border-radius: 22px; }
}

@media (max-width: 390px) {
  .brand img { width: 142px; }
  .hero h1 { font-size: 40px; }
  .mini-feature { width: 100%; max-width: 160px; }
  .mini-features { justify-content: center; }
  .hero-visual { min-height: 535px; }
  .product-stage { width: 58%; }
  .float-card { width: 136px; }
  .card-natural { left: -5px; }
  .card-quality, .card-community { right: -5px; }
}

@media (hover: none) {
  .btn:hover { transform: none; }
  .main-nav a:hover::after { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Owner panel foundation */
.owner-page{min-height:100vh;background:linear-gradient(145deg,#f8fcff,#eaf6ff);display:grid;place-items:center;padding:24px;color:#16326f}
.owner-shell{width:min(100%,760px)}
.owner-card{background:#fff;border:1px solid #dceeff;border-radius:32px;padding:clamp(28px,5vw,56px);box-shadow:0 30px 80px rgba(29,101,180,.14)}
.owner-logo{width:220px;max-width:70%;margin-bottom:36px}
.owner-kicker{font-size:12px;letter-spacing:.2em;font-weight:800;color:#168bff}
.owner-card h1{font-size:clamp(34px,6vw,58px);line-height:1;margin:14px 0;color:#16326f}
.owner-card p{font-size:16px;line-height:1.7;color:#60769e;max-width:620px}
.owner-status,.owner-meta{color:#60769e;font-weight:600}
.owner-meta{padding:14px 18px;background:#f1f8ff;border-radius:14px;margin:22px 0}
.owner-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}



/* ================= BASIC PYRAMID / MEMBER PORTAL ================= */
.portal-page{
  min-height:100vh;
  background:linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%);
}
.portal-header{
  padding:16px 0;
  border-bottom:1px solid #e5f0fb;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:40;
}
.portal-header .nav-wrap{min-height:auto}
.portal-main{padding:32px 0 64px}
.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.page-intro h1{margin:0;font-size:clamp(30px,3.6vw,48px);line-height:1;color:var(--blue-deep)}
.page-intro p{margin:10px 0 0;color:#6c81a5;max-width:760px;line-height:1.7}
.breadcrumb-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue);font-size:14px}
.portal-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.portal-column{display:grid;gap:24px}
.side-column{display:grid;gap:24px}
.surface-card{background:#fff;border:1px solid #e4f0fb;border-radius:30px;box-shadow:0 18px 50px rgba(17,75,140,.08)}
.surface-card.card-padding{padding:26px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.section-head h2,.section-head h3{margin:0;color:var(--blue-deep)}
.section-head p{margin:6px 0 0;color:#7d8ead;font-size:14px;line-height:1.6}
.section-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#edf6ff;color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.summary-card{padding:18px 20px;border:1px solid #e6f1fb;border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.summary-card span{display:block;font-size:13px;font-weight:700;color:#7d8ead;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.summary-card strong{display:block;font-size:34px;line-height:1;color:var(--blue-deep);margin-bottom:6px}
.summary-card small{display:block;color:#6c81a5;font-size:14px;line-height:1.5}
.tab-switch{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.tab-switch button{border:none;padding:12px 18px;border-radius:999px;background:#eef6ff;color:#55739e;font-weight:700;cursor:pointer}
.tab-switch button.active{background:linear-gradient(135deg,#4aa9ff,#0d86ff);color:#fff;box-shadow:0 10px 24px rgba(13,134,255,.22)}
.tab-panel[hidden]{display:none !important}
.pyramid-card{padding:24px}
.pyramid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.depth-select{display:flex;align-items:center;gap:10px;color:#6c81a5;font-weight:700}
.depth-select select{min-height:42px;border:1px solid #d8e8fb;border-radius:14px;padding:0 12px;background:#fff;color:#37527e}
.pyramid-scroller{overflow:auto;padding-bottom:6px}
.pyramid-stage{min-width:780px;padding:12px 8px 24px}
.pyramid-level{display:flex;justify-content:center;gap:18px;align-items:flex-start;margin-top:22px;position:relative}
.pyramid-level:first-child{margin-top:0}
.pyramid-node, .pyramid-empty{width:150px;min-height:112px;border-radius:22px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:.2s ease;position:relative}
.pyramid-node{cursor:pointer;background:#fff;border:1px solid #deecfb;box-shadow:0 12px 26px rgba(15,77,141,.08)}
.pyramid-node:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(13,86,160,.14)}
.pyramid-node.male{border-color:#beddff;background:linear-gradient(180deg,#ffffff 0%,#eef8ff 100%)}
.pyramid-node.female{border-color:#ffd5e4;background:linear-gradient(180deg,#ffffff 0%,#fff1f7 100%)}
.pyramid-empty{border:1px dashed #d9e8f8;color:#9aacc7;background:rgba(244,249,255,.85)}
.node-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:#fff;margin-bottom:10px;box-shadow:0 10px 20px rgba(16,76,137,.18)}
.pyramid-node.male .node-avatar{background:linear-gradient(135deg,#44a5ff,#0b83ff)}
.pyramid-node.female .node-avatar{background:linear-gradient(135deg,#ff698d,#ef3b68)}
.node-name{font-weight:800;color:var(--blue-deep);font-size:14px;line-height:1.35;max-width:100%;word-break:break-word}
.node-meta{margin-top:6px;font-size:12px;color:#7184a8;line-height:1.45}
.node-badge{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:6px 10px;border-radius:999px;background:#eef6ff;color:var(--blue);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.pyramid-empty .node-badge{background:#f5f9fd;color:#8aa0c1}
.detail-card{padding:24px}
.detail-hero{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.detail-avatar{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;font-size:32px;color:#fff}
.detail-avatar.male{background:linear-gradient(135deg,#44a5ff,#0b83ff)}
.detail-avatar.female{background:linear-gradient(135deg,#ff698d,#ef3b68)}
.detail-name{font-size:26px;line-height:1.1;color:var(--blue-deep);margin:0 0 6px}
.detail-sub{margin:0;color:#7084a8}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.detail-grid .stat-box{padding:16px;border-radius:20px;background:#f7fbff;border:1px solid #e3f0fb}
.detail-grid .stat-box span{display:block;font-size:12px;font-weight:700;color:#7d8ead;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.detail-grid .stat-box strong{display:block;font-size:18px;color:var(--blue-deep)}
.claims-list{display:grid;gap:14px}
.claim-card{padding:18px;border-radius:24px;border:1px solid #deebfa;background:#fff;box-shadow:0 12px 24px rgba(17,75,140,.05)}
.claim-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.claim-top h3{margin:0;font-size:21px;color:var(--blue-deep)}
.claim-top p{margin:4px 0 0;color:#6d81a5;font-size:14px}
.claim-status{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.claim-status.available{background:#ecf8f0;color:#148048}
.claim-status.submitted{background:#fff4dd;color:#9f6b00}
.claim-status.paid{background:#eef6ff;color:var(--blue)}
.claim-status.expired,.claim-status.rejected{background:#ffe9ee;color:#c73359}
.claim-amount{font-size:32px;font-weight:900;color:var(--blue-deep)}
.claim-meta{display:flex;gap:18px;flex-wrap:wrap;color:#7084a8;font-size:13px;margin-top:10px}
.inline-action{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}
.inline-action.secondary{background:#edf6ff;color:var(--blue)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full-span{grid-column:1 / -1}
.card-form label{display:grid;gap:8px;font-weight:700;color:#476184;font-size:14px}
.card-form input,.card-form select,.card-form textarea{min-height:52px;border:1px solid #d8e8fb;border-radius:16px;padding:12px 14px;background:#fff;color:#2e466c;outline:none}
.card-form textarea{min-height:110px;resize:vertical}
.card-form input:focus,.card-form select:focus,.card-form textarea:focus{border-color:#69b4ff;box-shadow:0 0 0 4px rgba(23,139,255,.08)}
.form-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:8px}
.message-box{min-height:18px;font-size:14px;font-weight:700;color:#486488}
.message-box.success{color:#178048}
.message-box.error{color:#c73359}
.empty-state{padding:28px;border-radius:24px;border:1px dashed #dbeafb;background:#f9fcff;color:#6d82a6;text-align:center}
.owner-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.owner-stack{display:grid;gap:24px}
.data-table-wrap{overflow:auto;border:1px solid #e4effb;border-radius:24px;background:#fff}
.data-table{width:100%;border-collapse:collapse;min-width:760px}
.data-table th,.data-table td{padding:14px 16px;border-bottom:1px solid #eef4fb;text-align:left;font-size:14px;color:#4a6288;vertical-align:top}
.data-table th{background:#f8fbff;color:#27467c;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.data-table td strong{color:var(--blue-deep)}
.data-table tr:last-child td{border-bottom:none}
.badge-soft{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;background:#eef6ff;color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.badge-soft.paid{background:#ecf8f0;color:#148048}
.badge-soft.submitted{background:#fff4dd;color:#9f6b00}
.badge-soft.expired,.badge-soft.rejected{background:#ffe9ee;color:#c73359}
.badge-soft.owner{background:#ecf8f0;color:#178048}
.badge-soft.member{background:#eef6ff;color:var(--blue)}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.table-actions button{border:none;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer;background:#edf6ff;color:var(--blue)}
.table-actions button.reject{background:#ffe9ee;color:#c73359}
.helper-text{font-size:13px;color:#7a8ead;line-height:1.6;margin-top:8px}
.payout-method-panels{display:grid;gap:12px}
.payout-panel[hidden]{display:none !important}
.owner-mini-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.owner-mini-card{padding:18px;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border:1px solid #e5f0fb}
.owner-mini-card span{display:block;font-size:12px;font-weight:700;color:#7d8ead;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.owner-mini-card strong{font-size:30px;color:var(--blue-deep)}
.owner-mini-card small{display:block;color:#6d82a6;margin-top:6px}
@media (max-width: 1180px){
  .portal-grid,.owner-grid{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 820px){
  .summary-grid,.owner-mini-cards,.detail-grid,.form-grid{grid-template-columns:1fr}
  .pyramid-stage{min-width:680px}
  .page-intro h1{font-size:34px}
}
@media (max-width: 680px){
  .portal-main{padding:24px 0 56px}
  .surface-card.card-padding,.pyramid-card,.detail-card{padding:20px}
  .pyramid-node,.pyramid-empty{width:130px;min-height:104px;padding:12px}
  .node-avatar{width:50px;height:50px;font-size:24px}
  .detail-hero{align-items:flex-start}
}


/* ================= UI POLISH: ACCOUNT + MODERN PYRAMID SAMPLE TEST ================= */
.account-chip{
  display:inline-flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1px;
  min-width:118px;
  line-height:1.05;
  text-align:left;
  padding:5px 10px !important;
  border-radius:14px;
}
.account-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7b91b4}
.account-name{font-size:14px;font-weight:800;color:#1287f6;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pyramid-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.sample-mode-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#fff7df;color:#9b6a00;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.modern-tree-scroll{overflow:auto;padding:18px 8px 30px}
.modern-binary-tree{min-width:960px;display:flex;justify-content:center;padding:8px 18px 28px}
.tree-branch{display:flex;flex-direction:column;align-items:center;position:relative;min-width:max-content}
.tree-node-wrap{position:relative;z-index:2;display:flex;justify-content:center}
.tree-children{display:grid;grid-template-columns:1fr 1fr;gap:28px;position:relative;padding-top:34px;margin-top:0}
.tree-children::before{content:"";position:absolute;top:0;left:50%;width:2px;height:18px;background:#b8d9f7;transform:translateX(-50%)}
.tree-child{position:relative;padding:18px 12px 0}
.tree-child::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#b8d9f7}
.tree-child:first-child::before{left:50%}
.tree-child:last-child::before{right:50%}
.tree-child::after{content:"";position:absolute;top:0;left:50%;width:2px;height:18px;background:#b8d9f7;transform:translateX(-50%)}
.tree-user-card{position:relative;width:154px;min-height:170px;border:none;border-radius:26px;padding:16px 12px 14px;background:#fff;box-shadow:0 16px 38px rgba(21,84,149,.12);border:1px solid #deebf8;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transition:.2s ease}
.tree-user-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(21,84,149,.18)}
.tree-user-card.male{border-color:#b8dcff;background:linear-gradient(180deg,#ffffff 0%,#eef8ff 100%)}
.tree-user-card.female{border-color:#ffc9da;background:linear-gradient(180deg,#ffffff 0%,#fff0f5 100%)}
.tree-user-card.sample-user{outline:2px dashed #f4c75c;outline-offset:3px}
.tree-user-card.empty-user-card{cursor:default;opacity:.82;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border-style:dashed}
.tree-avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 10px 22px rgba(34,76,122,.13);overflow:hidden}
.tree-avatar.male{background:linear-gradient(135deg,#4ab0ff,#0d86ff)}
.tree-avatar.female{background:linear-gradient(135deg,#ff6c94,#ed3d6b)}
.tree-avatar.neutral{background:#555c68}
.person-silhouette{position:relative;display:block;width:52px;height:52px}
.person-silhouette::before{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);width:21px;height:21px;border-radius:50%;background:#fff}
.person-silhouette::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:43px;height:24px;border-radius:22px 22px 8px 8px;background:#fff}
.person-silhouette i{display:none}
.tree-user-name{font-size:14px;font-weight:800;color:#173875;text-align:center;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-user-cycle{margin-top:7px;font-size:12px;font-weight:700;color:#7288aa}
.sample-ribbon{position:absolute;top:9px;right:9px;padding:4px 7px;border-radius:999px;background:#fff0bd;color:#956600;font-size:9px;font-weight:900;letter-spacing:.06em}
.detail-avatar .person-silhouette{width:48px;height:48px}
.detail-avatar .person-silhouette::before{width:19px;height:19px}
.detail-avatar .person-silhouette::after{width:39px;height:22px}
.test-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.test-metrics>div{padding:18px;border-radius:22px;background:#f8fbff;border:1px solid #e1eefb}
.test-metrics span{display:block;color:#7b8ead;font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;margin-bottom:7px}
.test-metrics strong{display:block;color:#173875;font-size:28px}
.sample-form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.sample-actions{justify-content:flex-end}
.card-form,.card-form *{box-sizing:border-box}
.form-grid>*{min-width:0}
.card-form input,.card-form select,.card-form textarea{width:100%;max-width:100%;min-width:0}
.side-column{min-width:0}
.side-column .surface-card{min-width:0;overflow:hidden}
.claim-card-panel{overflow:hidden}
.claim-form-grid{grid-template-columns:1fr !important}
.claim-form-grid .full-span{grid-column:auto}
@media (max-width:1100px){
  .sample-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modern-binary-tree{min-width:820px}
}
@media (max-width:720px){
  .account-chip{min-width:96px}
  .account-name{max-width:100px}
  .pyramid-controls{justify-content:flex-start}
  .test-metrics,.sample-form-grid{grid-template-columns:1fr}
  .modern-binary-tree{min-width:760px;padding-inline:8px}
  .tree-user-card{width:134px;min-height:158px}
  .tree-avatar{width:66px;height:66px}
}


/* ================= PYRAMID ALIGNMENT + RESPONSIVE FIX ================= */
.member-dashboard-layout{
  display:grid;
  gap:24px;
  min-width:0;
}
.pyramid-main-card{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.pyramid-view-frame{
  width:100%;
  min-width:0;
  overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(68,166,255,.07), transparent 34%),
    linear-gradient(180deg,#fbfdff 0%,#f8fbff 100%);
  border:1px solid #e8f2fc;
}
.modern-tree-scroll{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:24px 20px 30px;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:#b9d9f6 transparent;
}
.modern-tree-scroll::-webkit-scrollbar{height:8px}
.modern-tree-scroll::-webkit-scrollbar-track{background:transparent}
.modern-tree-scroll::-webkit-scrollbar-thumb{
  background:#b9d9f6;
  border-radius:999px;
}
.modern-binary-tree{
  width:max-content;
  min-width:100%;
  margin:0 auto;
  padding:4px 18px 18px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.tree-branch{
  min-width:0;
}
.tree-children{
  gap:18px;
  padding-top:28px;
}
.tree-child{
  padding:16px 8px 0;
}
.tree-children::before,
.tree-child::after{
  height:16px;
}
.tree-user-card{
  width:124px;
  min-height:142px;
  border-radius:22px;
  padding:12px 10px 11px;
}
.tree-avatar{
  width:60px;
  height:60px;
  margin-bottom:9px;
}
.person-silhouette{
  width:42px;
  height:42px;
}
.person-silhouette::before{
  top:2px;
  width:17px;
  height:17px;
}
.person-silhouette::after{
  bottom:3px;
  width:35px;
  height:20px;
  border-radius:18px 18px 7px 7px;
}
.tree-user-name{
  font-size:12.5px;
  line-height:1.25;
}
.tree-user-cycle{
  margin-top:5px;
  font-size:11px;
}
.sample-ribbon{
  top:7px;
  right:7px;
  padding:3px 5px;
  font-size:8px;
}
.pyramid-mobile-hint{
  display:none;
  margin:10px 2px 0;
  color:#8093b1;
  font-size:12px;
  text-align:center;
}
.member-lower-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  gap:24px;
  align-items:start;
  min-width:0;
}
.member-side-stack{
  display:grid;
  gap:24px;
  min-width:0;
}
.member-side-stack > .surface-card{
  min-width:0;
  overflow:hidden;
}
.claim-card-panel .card-form,
.claim-card-panel .form-grid,
.claim-card-panel label{
  min-width:0;
  width:100%;
}
.claim-card-panel input,
.claim-card-panel select,
.claim-card-panel textarea{
  width:100%;
  max-width:100%;
  min-width:0;
}
.detail-avatar{
  flex:0 0 auto;
}
.detail-grid{
  min-width:0;
}
.detail-grid .stat-box{
  min-width:0;
  overflow:hidden;
}
.detail-grid .stat-box strong{
  overflow-wrap:anywhere;
}
@media (max-width:1180px){
  .member-lower-grid{
    grid-template-columns:1fr;
  }
  .member-side-stack{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:900px){
  .modern-tree-scroll{
    padding-inline:14px;
  }
  .modern-binary-tree{
    min-width:max-content;
    padding-inline:12px;
  }
  .tree-user-card{
    width:116px;
    min-height:136px;
  }
  .tree-avatar{
    width:56px;
    height:56px;
  }
  .tree-children{
    gap:12px;
  }
  .tree-child{
    padding-inline:6px;
  }
  .pyramid-mobile-hint{
    display:block;
  }
}
@media (max-width:720px){
  .pyramid-toolbar{
    align-items:flex-start;
  }
  .pyramid-controls{
    width:100%;
    justify-content:space-between;
  }
  .sample-mode-badge{
    font-size:9px;
    padding:7px 10px;
  }
  .depth-select{
    font-size:12px;
  }
  .depth-select select{
    min-height:38px;
  }
  .modern-tree-scroll{
    padding:20px 10px 24px;
  }
  .modern-binary-tree{
    min-width:max-content;
    justify-content:flex-start;
    padding:2px 10px 14px;
  }
  .tree-user-card{
    width:104px;
    min-height:124px;
    border-radius:19px;
    padding:10px 8px;
  }
  .tree-avatar{
    width:50px;
    height:50px;
  }
  .person-silhouette{
    width:36px;
    height:36px;
  }
  .person-silhouette::before{
    width:15px;
    height:15px;
  }
  .person-silhouette::after{
    width:30px;
    height:17px;
  }
  .tree-user-name{
    font-size:11.5px;
  }
  .tree-user-cycle{
    font-size:10px;
  }
  .tree-children{
    gap:8px;
    padding-top:24px;
  }
  .tree-child{
    padding:14px 4px 0;
  }
  .tree-children::before,
  .tree-child::after{
    height:14px;
  }
  .member-side-stack{
    grid-template-columns:1fr;
  }
}
@media (max-width:420px){
  .tree-user-card{
    width:96px;
    min-height:118px;
  }
  .tree-avatar{
    width:46px;
    height:46px;
  }
  .tree-user-name{
    font-size:11px;
  }
  .modern-tree-scroll{
    padding-inline:8px;
  }
  .member-dashboard-layout{
    gap:18px;
  }
}