/* HerClarity launch boutique layer — visual only. Keeps launch functionality intact. */
:root{
  --boutique-berry:#632039;
  --boutique-wine:#4b172c;
  --boutique-rose:#dba7b1;
  --boutique-blush:#f2dfe3;
  --boutique-ivory:#fcf8f3;
  --boutique-paper:#f8f0e9;
  --boutique-champagne:#d7bea0;
  --boutique-champagne-soft:#eadcca;
  --boutique-ink:#261b1f;
  --boutique-shadow:0 22px 55px rgba(74,35,48,.13);
  --boutique-shadow-soft:0 10px 28px rgba(74,35,48,.07);
}

html,body{background:#eee5df}
.app-shell{background:var(--boutique-ivory);box-shadow:0 0 90px rgba(61,29,40,.16)}
.screen{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 91% 2%,rgba(219,167,177,.19),transparent 25%),
    radial-gradient(circle at 4% 78%,rgba(215,190,160,.15),transparent 28%),
    repeating-linear-gradient(0deg,rgba(75,23,44,.012) 0,rgba(75,23,44,.012) 1px,transparent 1px,transparent 5px),
    linear-gradient(180deg,#fcf8f3 0%,#f8f0e9 100%);
}
.screen:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:18px;
  width:42px;
  height:118px;
  opacity:.34;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(99,32,57,.08) 7px 8px,transparent 8px 14px,rgba(215,190,160,.14) 14px 16px);
  pointer-events:none;
}

/* Editorial brand details */
.wordmark,.member-brand,.mini-logo{color:var(--boutique-wine);text-shadow:0 1px 0 rgba(255,255,255,.65)}
.wordmark{font-size:clamp(53px,14vw,63px);letter-spacing:-.045em}
.tagline{color:#82334e;letter-spacing:.205em}
.brand-rule{height:2px;width:66px;background:linear-gradient(90deg,transparent,var(--boutique-champagne) 12%,var(--boutique-berry) 50%,var(--boutique-champagne) 88%,transparent)}
.page-title,.section-title,.welcome-name{color:#4c2634}
.page-title{letter-spacing:-.035em}
.section-title{position:relative;padding-top:4px}
.section-title:after{content:"";display:block;width:42px;height:1px;background:var(--boutique-champagne);margin-top:11px}
.center.section-title:after{margin-left:auto;margin-right:auto}
.eyebrow{display:flex;align-items:center;gap:8px;color:#7d314a;letter-spacing:.18em}
.eyebrow:before{
  content:"";
  width:25px;
  height:7px;
  flex:0 0 25px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--boutique-berry) 0 28%,var(--boutique-champagne) 28% 48%,var(--boutique-rose) 48% 70%,var(--boutique-wine) 70% 100%);
  box-shadow:inset 0 0 0 1px rgba(75,23,44,.05);
}

/* Paper/card materiality */
.card,.panel,.home-card,.mode-card,.resource-card,.option-card,.composer,.admin-card,.report-card{
  position:relative;
  background:
    repeating-linear-gradient(0deg,rgba(75,23,44,.012) 0,rgba(75,23,44,.012) 1px,transparent 1px,transparent 5px),
    rgba(255,253,249,.72);
  border-color:rgba(99,32,57,.14);
  box-shadow:var(--boutique-shadow-soft);
}
.card:before,.panel:before,.home-card:before,.mode-card:before,.resource-card:before,.option-card:before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--boutique-champagne),transparent);
  opacity:.78;
  pointer-events:none;
}
.card,.panel{border-radius:24px 9px 24px 24px}

/* Public page: oversized editorial photo + floating ivory story card */
.hero-photo{
  height:405px;
  border-radius:31px 31px 9px 31px;
  border:1px solid rgba(99,32,57,.20);
  box-shadow:0 24px 55px rgba(69,36,46,.18);
  background-position:center 39%;
}
.hero-photo:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,248,241,.78);
  border-radius:23px 23px 6px 23px;
  z-index:1;
  pointer-events:none;
}
.hero-photo:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:25%;
  background:linear-gradient(transparent,rgba(47,24,32,.11));
  border-radius:inherit;
}
.hero-copy{
  margin:-50px 9px 0 34px;
  padding:27px 23px 26px 29px;
  border-radius:26px 8px 26px 26px;
  background:
    repeating-linear-gradient(0deg,rgba(75,23,44,.012) 0,rgba(75,23,44,.012) 1px,transparent 1px,transparent 5px),
    rgba(252,248,243,.985);
  border:1px solid rgba(99,32,57,.18);
  box-shadow:var(--boutique-shadow);
}
.hero-copy:before{top:20px;bottom:20px;background:linear-gradient(var(--boutique-champagne),var(--boutique-berry),var(--boutique-champagne));width:3px}
.hero-copy h2{font-size:42px;color:#251a1e;margin-top:12px}
.hero-copy p{color:#68595f}
.public-proof{margin-top:34px;gap:12px}
.proof{border-top-color:rgba(99,32,57,.14);padding-top:15px}
.proof strong{font-size:24px;color:#61253a}

/* Buttons should feel tailored, not generic */
.btn{border-radius:17px;min-height:56px;letter-spacing:.005em}
.btn-primary,.btn-dark{
  background:linear-gradient(135deg,var(--boutique-wine),#702943 58%,#883850);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 14px 28px rgba(76,23,44,.20),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-outline{background:rgba(252,248,243,.74);border-color:rgba(99,32,57,.18)}
.btn-soft{background:linear-gradient(135deg,#f4e4e6,#f8efe9);border-color:rgba(99,32,57,.09)}
.text-button,.btn-link{color:#6f2942;text-decoration-thickness:1px;text-underline-offset:4px}

/* Forms: soft stationery treatment */
.form-group input,.form-group textarea,.form-group select,.field{
  background:rgba(255,253,249,.78);
  border-color:rgba(99,32,57,.18);
  border-radius:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus,.field:focus{border-color:#8a3b54;box-shadow:0 0 0 3px rgba(99,32,57,.09)}
.auth-tabs,.segmented{background:rgba(255,253,249,.56);border-color:rgba(99,32,57,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.auth-tab.active,.segment.active{background:linear-gradient(135deg,#5a1c32,#7b304a);box-shadow:0 8px 20px rgba(75,23,44,.16)}
.attestation,.privacy-note{background:linear-gradient(135deg,rgba(244,226,229,.76),rgba(248,239,233,.76));border-color:rgba(99,32,57,.12)}

/* Member home: boutique editorial dashboard */
.member-head{margin-bottom:24px}
.member-brand{font-size:38px;letter-spacing:-.035em}
.profile-dot{background:linear-gradient(145deg,#f5e4e7,#efe2d2);border-color:rgba(99,32,57,.16);box-shadow:0 6px 18px rgba(71,35,47,.08)}
.welcome-name{font-size:48px;max-width:340px}
.home-guide{
  margin:27px 0 16px;
  padding:25px 22px 24px;
  border-radius:27px 9px 27px 27px;
  background:
    radial-gradient(circle at 90% 5%,rgba(219,167,177,.17),transparent 27%),
    linear-gradient(138deg,#47162a 0%,#61213a 55%,#81364f 100%);
  border:1px solid rgba(215,190,160,.38);
  box-shadow:0 19px 40px rgba(75,23,44,.23);
}
.home-guide:before{content:"";position:absolute;inset:8px;border:1px solid rgba(234,220,202,.16);border-radius:20px 5px 20px 20px;pointer-events:none}
.home-guide:after{width:190px;height:190px;border-color:rgba(215,190,160,.18)}
.home-guide h2{font-size:38px;max-width:290px}
.home-guide button{background:rgba(250,239,231,.12);border:1px solid rgba(250,239,231,.18);padding:0 15px}
.home-grid{gap:12px}
.home-card{
  min-height:158px;
  padding:18px;
  border-radius:23px 8px 23px 23px;
  overflow:hidden;
}
.home-card:nth-child(2n){background:linear-gradient(145deg,rgba(255,253,249,.79),rgba(242,223,227,.45))}
.home-card:nth-child(2n+1){background:linear-gradient(145deg,rgba(255,253,249,.82),rgba(234,220,202,.32))}
.home-card:after{content:"";position:absolute;right:-33px;bottom:-44px;width:90px;height:90px;border-radius:50%;border:1px solid rgba(99,32,57,.07)}
.home-card h3{font-size:27px;margin-top:23px}
.support-strip{background:linear-gradient(135deg,#f8e8ea,#f6ede4);border-color:rgba(99,32,57,.13);box-shadow:var(--boutique-shadow-soft)}

/* Guide: private salon / letter-writing feel */
.guide-hero{padding:3px 0 6px}
.mode-grid{gap:13px}
.mode-card{
  padding:20px 18px 19px;
  min-height:100px;
  border-radius:24px 8px 24px 24px;
  background:linear-gradient(145deg,rgba(255,253,249,.86),rgba(244,228,231,.53));
  border:1px solid rgba(99,32,57,.14);
  box-shadow:var(--boutique-shadow-soft);
  text-align:left;
}
.mode-card strong{font-family:var(--serif);font-size:29px;font-weight:500;line-height:1;color:#4d2835;display:block;margin-bottom:7px}
.mode-card span{color:#74656a;font-size:12px;line-height:1.45}
.chat{position:relative}
.bubble{border:1px solid rgba(99,32,57,.12);box-shadow:var(--boutique-shadow-soft)}
.bubble.guide{border-radius:8px 24px 24px 24px;background:linear-gradient(145deg,#f3e1e4,#fcf7f2)}
.bubble.member{border-radius:24px 8px 24px 24px;background:rgba(255,253,249,.78)}
.bubble strong{letter-spacing:.16em;color:#6d2a41}
.guide-question{font-family:var(--serif);font-size:22px!important;line-height:1.18!important;color:#4b2634!important}
.moves{gap:12px}
.move{border-radius:22px 8px 22px 22px;background:linear-gradient(145deg,rgba(255,253,249,.86),rgba(240,226,211,.38));border-color:rgba(99,32,57,.12);box-shadow:var(--boutique-shadow-soft)}
.move b{font-family:var(--serif);font-size:22px;color:#6b2941}

/* Explore / resources / community */
.hub-grid,.option-grid,.resource-grid,.feed{gap:13px}
.hub-card,.option-card,.resource-card,.post,.composer{
  border-radius:24px 8px 24px 24px;
}
.hub-card{background:linear-gradient(145deg,rgba(255,253,249,.84),rgba(243,226,229,.42));padding:21px}
.hub-card h2,.option-card h3,.resource-card h3{font-family:var(--serif);font-weight:500;color:#4d2835}
.hub-card h2{font-size:31px;line-height:1.02}
.option-card h3,.resource-card h3{font-size:28px;line-height:1.04}
.resource-card.urgent{border-color:rgba(154,62,78,.20);background:linear-gradient(145deg,#fffaf7,#fae9eb)}
.resource-actions a,.resource-actions button,.entry-actions button,.post-actions button{border-radius:999px;background:rgba(244,226,229,.55);border:1px solid rgba(99,32,57,.10);color:#68253d}
.post{background:linear-gradient(145deg,rgba(255,253,249,.88),rgba(248,240,233,.76));padding:19px}
.post-title{font-family:var(--serif);font-size:29px;font-weight:500;color:#4d2835}
.anonymous-pill,.pill{background:#f2dfe3;border-color:rgba(99,32,57,.10);color:#6b2941}
.reply{border-bottom-color:rgba(99,32,57,.11)}
.avatar{background:linear-gradient(145deg,#f1dfe3,#eadcca);color:#65243c;border:1px solid rgba(99,32,57,.09)}

/* Private space should feel like stationery drawers, not settings cards */
.tool-grid,.private-grid{gap:13px}
.tool-panel,.private-card,.journal-entry,.clarity-plan,.saved-item{
  border-radius:24px 8px 24px 24px;
  background:linear-gradient(145deg,rgba(255,253,249,.87),rgba(248,240,233,.63));
  border-color:rgba(99,32,57,.13);
  box-shadow:var(--boutique-shadow-soft);
}
.mood-row{gap:10px}
.mood-btn{background:rgba(255,253,249,.74);border-color:rgba(99,32,57,.14);border-radius:17px;min-height:52px}
.mood-btn.selected{background:linear-gradient(135deg,#632039,#84364f);color:#fff;border-color:transparent;box-shadow:0 9px 22px rgba(75,23,44,.16)}

/* Navigation: warm ivory bar with jewelry-like selected state */
.bottom-nav{
  background:rgba(252,248,243,.965);
  border-top:1px solid rgba(99,32,57,.13);
  box-shadow:0 -14px 36px rgba(71,35,47,.10);
}
.bottom-nav:before{content:"";position:absolute;top:-1px;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,var(--boutique-champagne),transparent)}
.nav-item{border-radius:17px;color:#675a5f}
.nav-item.active{background:linear-gradient(145deg,#f4e2e5,#f3e8db);color:#702a43;box-shadow:inset 0 0 0 1px rgba(99,32,57,.06)}
.nav-item.active svg{stroke-width:1.95}

/* Modals and admin inherit the brand without becoming decorative */
.modal{border-radius:28px 9px 28px 28px;background:linear-gradient(180deg,#fcf8f3,#f7eee7);border:1px solid rgba(99,32,57,.16);box-shadow:0 30px 70px rgba(44,22,30,.25)}
.admin-card,.report-card{background:rgba(255,253,249,.80)}
.metrics .metric{background:linear-gradient(145deg,#fffdf9,#f4e6e8);border-color:rgba(99,32,57,.11);border-radius:20px 7px 20px 20px}

/* Keep Quick Exit functional but visually quiet. */
.quick-exit{background:rgba(252,248,243,.92);border-color:rgba(99,32,57,.15);color:#68253d;box-shadow:0 7px 20px rgba(71,35,47,.08)}

@media(max-width:390px){
  .screen{padding-left:18px;padding-right:18px}
  .hero-photo{height:365px}
  .hero-copy{margin-left:24px;margin-right:5px;padding:24px 19px 23px 24px}
  .hero-copy h2{font-size:37px}
  .wordmark{font-size:54px}
  .welcome-name{font-size:43px}
  .home-guide h2{font-size:34px}
  .home-card{min-height:146px;padding:16px}
  .home-card h3{font-size:24px}
}

@media(max-width:350px){
  .hero-photo{height:335px}
  .hero-copy h2{font-size:34px}
  .home-grid{grid-template-columns:1fr}
  .home-card{min-height:118px}
}