/* HLNI FINAL V8 — targeted UI overrides only */

/* Shared final badges / controls */
.family-work-badge,
.public-family-work-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  border:1px solid rgba(166,126,49,.34);
  background:#f6edd9;
  color:#755b24;
  border-radius:999px;
  padding:4px 8px;
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.02em;
  margin-top:6px;
}
.family-work-toggle{
  grid-template-columns:auto 1fr!important;
  align-items:flex-start;
  gap:11px!important;
  border:1px solid var(--line);
  background:#fbf8f0;
  border-radius:15px;
  padding:12px 14px;
}
.family-work-toggle input{
  width:20px;
  height:20px;
  margin:2px 0 0;
  accent-color:var(--green);
}
.family-work-toggle>span{display:block!important}
.family-work-toggle strong{display:block;font-size:.85rem;color:var(--ink)}
.family-work-toggle small{margin-top:3px!important}

/* Family Ulasan page */
.compact-section-heading{margin-bottom:10px!important}
.compact-review-toolbar{padding:14px;margin-bottom:8px;gap:10px}
.compact-review-toolbar input{padding:12px 13px}
.compact-star-filters{gap:6px;padding-bottom:0}
.compact-star-filters .pill{padding:7px 10px;font-size:.74rem;min-width:auto}
.review-hub-card{align-items:start}
.review-hub-main{min-width:0}
.review-book-meta{font-size:.74rem;color:var(--muted);margin-top:3px;line-height:1.35}
.review-byline{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px;font-size:.76rem}
.review-byline .stars{font-size:.78rem}
.review-snippet-clamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

/* Public premium landing */
.public-v8{
  background:#f5f0e5;
  color:#1a2721;
}
.public-shell-v8{
  max-width:1180px;
  padding:22px 24px 70px;
}
.public-header-v8{
  padding:8px 2px 24px;
  align-items:center;
}
.public-brand-v8{gap:14px;min-width:0}
.public-brand-v8 .public-logo{
  width:62px;
  height:62px;
  border-radius:17px;
  box-shadow:0 5px 18px rgba(31,59,50,.12);
}
.public-brand-v8 h1{
  font-family:Georgia,"Times New Roman",serif;
  color:#15392f;
  font-size:clamp(1.2rem,2.1vw,1.65rem);
  line-height:1.05;
  letter-spacing:-.015em;
}
.public-brand-v8 p{
  margin:5px 0 0;
  font-size:.82rem;
  color:#77776e;
}
.public-login-v8{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  border-radius:13px;
  background:#183f34;
  color:#ead6a4;
  padding:12px 16px;
  font-weight:800;
  font-size:.82rem;
  border:1px solid rgba(201,169,101,.22);
  box-shadow:0 5px 15px rgba(31,59,50,.11);
}
.public-login-v8 svg{width:18px;height:18px;flex:none}
.public-login-v8:hover{background:#214b3f}

.public-hero-v8{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:390px;
  border-radius:28px;
  padding:42px 46px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);
  align-items:center;
  gap:30px;
  background:
    radial-gradient(circle at 82% 62%,rgba(194,155,79,.16),transparent 22%),
    linear-gradient(112deg,#123d31 0%,#174638 55%,#0d2f27 100%);
  color:#fffaf0;
  box-shadow:0 12px 34px rgba(31,59,50,.13);
}
.public-hero-v8::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,35,28,.04) 0%,rgba(8,35,28,.03) 50%,rgba(8,35,28,.28) 100%);
}
.public-hero-copy-v8{max-width:650px}
.public-hero-eyebrow{
  color:#d9b971!important;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.22em;
  margin:0 0 17px;
}
.public-hero-v8 h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.8rem,6vw,5.4rem);
  line-height:.96;
  margin:0;
  letter-spacing:-.035em;
  font-weight:600;
}
.public-hero-v8 h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.35rem,2.8vw,2rem);
  line-height:1.12;
  font-weight:500;
  margin:13px 0 0;
  color:#f1e8d5;
}
.public-hero-body{
  max-width:610px;
  font-size:clamp(.95rem,1.5vw,1.08rem);
  line-height:1.7;
  color:#e3ddce!important;
  margin:24px 0 0!important;
}
.public-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.public-cta{
  border-radius:13px;
  padding:12px 17px;
  font-weight:850;
  font-size:.85rem;
  border:1px solid transparent;
  transition:transform .16s ease,background .16s ease;
}
.public-cta:hover{transform:translateY(-1px)}
.public-cta-primary{background:#dfbf79;color:#17392f}
.public-cta-secondary{background:transparent;color:#e5cb91;border-color:rgba(229,203,145,.65)}
.public-hero-atmosphere{
  min-height:275px;
  align-self:stretch;
  opacity:.78;
  border-radius:18px;
  background:
    radial-gradient(ellipse at 72% 64%,rgba(217,177,96,.45) 0 6%,rgba(217,177,96,.12) 7% 17%,transparent 18%),
    linear-gradient(90deg,transparent 0 15%,rgba(232,216,180,.10) 15% 17%,transparent 17% 27%,rgba(232,216,180,.08) 27% 30%,transparent 30% 42%,rgba(232,216,180,.11) 42% 45%,transparent 45% 54%,rgba(232,216,180,.07) 54% 58%,transparent 58% 100%),
    repeating-linear-gradient(0deg,transparent 0 58px,rgba(216,190,137,.12) 59px 62px),
    linear-gradient(180deg,rgba(5,27,22,.05),rgba(5,27,22,.48));
  mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%);
}

/* Compact public stats = feature strip */
.public-stats-v8{
  grid-template-columns:repeat(4,1fr)!important;
  gap:10px;
  margin:12px 0 18px;
}
.public-stat-card{
  min-height:92px;
  border-radius:17px;
  padding:14px 16px;
  background:#fffdf8;
  border:1px solid #dfd6c5;
  box-shadow:none;
}
.public-stat-card .stat-label{font-size:.72rem;color:#76776f}
.public-stat-card strong{font-size:1.65rem;margin-top:8px;color:#172d25}

/* Public tabs */
.public-section-nav-v8{
  position:relative!important;
  top:auto!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:5px!important;
  padding:5px!important;
  margin:16px 0 18px!important;
  border:1px solid #ddd4c3!important;
  border-radius:16px!important;
  background:#fffdf8!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.public-section-nav-v8 .public-section-btn{
  border-radius:11px;
  padding:10px 12px;
  font-size:.8rem;
  min-height:42px;
}
.public-section-nav-v8 .public-section-btn.active{background:#173f34;color:#fff}

.public-content-section{scroll-margin-top:16px}
.public-search-panel-v8{
  position:relative!important;
  top:auto!important;
  z-index:1!important;
  padding:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;
  gap:10px!important;
  align-items:start;
}
.public-search-panel-v8>input,
.public-review-toolbar-v8>input{
  border-radius:14px;
  border-color:#ddd4c3;
  background:#fffdf8;
  min-height:48px;
}
.public-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.public-filter-grid select{min-height:48px;background:#fffdf8;border-color:#ddd4c3}

.compact-public-heading{margin:8px 0 10px}
.compact-public-heading .eyebrow{margin-bottom:5px}
.compact-public-heading h2{font-size:1.7rem;color:#183d32}
.public-review-toolbar-v8{gap:9px;margin:0 0 3px}
.public-review-toolbar-v8 .compact-star-filters{padding-bottom:0}

/* Public book cards */
.public-grid{gap:11px}
.public-book-card{
  border-radius:17px;
  border-color:#dfd6c5;
  padding:11px;
  box-shadow:none;
  transition:border-color .16s ease,transform .16s ease;
}
.public-book-card:hover{border-color:#cdbd9d;transform:translateY(-1px)}
.public-book-card-main{min-width:0}
.public-book-title-line{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap}
.public-book-title-line h3{flex:1;min-width:140px;margin:0}
.public-family-work-badge{margin:0;font-size:.59rem;padding:3px 6px}
.public-card-meta{margin-top:2px}

/* Public Ulasan cards */
.public-reading-list{gap:11px;margin-top:10px}
.public-review-list-card{
  border-radius:17px;
  border-color:#dfd6c5;
  box-shadow:none;
  padding:13px;
}
.public-review-list-card .reading-cover{width:66px;height:96px}
.public-reading-book h3{
  font-size:.98rem!important;
  line-height:1.28;
  margin:0 0 3px!important;
}
.public-reading-book p{font-size:.76rem!important;margin-bottom:8px!important}
.public-review-list-head{align-items:center}
.public-reviewer-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.public-reviewer-line strong{font-size:.8rem}
.public-reviewer-line .stars{font-size:.78rem}
.public-reading-review{font-size:.82rem;line-height:1.55}
.review-text-clamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
  margin-bottom:5px!important;
}
.review-text-clamp.expanded{display:block;overflow:visible}
.review-expand-btn{
  border:0;
  background:transparent;
  padding:2px 0 6px;
  color:#315548;
  font-size:.74rem;
  font-weight:850;
  text-align:left;
}
.public-review-card-detail .public-reviewer-line strong{font-size:.86rem}

/* Dialog refinements */
.public-v8 .public-dialog{max-height:88svh;overflow:auto}
.public-v8 .public-detail{padding-bottom:26px}
.public-v8 .detail-grid{grid-template-columns:repeat(3,1fr)}

@media (max-width:820px){
  .public-shell-v8{padding:18px 18px 56px}
  .public-hero-v8{grid-template-columns:1.35fr .65fr;padding:34px 32px;min-height:350px}
  .public-stats-v8{grid-template-columns:repeat(2,1fr)!important}
  .public-search-panel-v8{grid-template-columns:1fr!important}
  .public-filter-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  .public-shell-v8{padding:12px 12px 46px}
  .public-header-v8{padding:7px 1px 15px;gap:9px}
  .public-brand-v8{gap:9px}
  .public-brand-v8 .public-logo{width:46px;height:46px;border-radius:13px}
  .public-brand-v8 h1{font-size:1rem;line-height:1.08}
  .public-brand-v8 p{font-size:.66rem;margin-top:3px}
  .public-login-v8{padding:9px 10px;font-size:.68rem;border-radius:11px;gap:5px}
  .public-login-v8 svg{width:15px;height:15px}

  .public-hero-v8{
    grid-template-columns:1fr;
    min-height:auto;
    padding:27px 22px 25px;
    border-radius:22px;
  }
  .public-hero-v8 h1{font-size:clamp(2.55rem,13vw,3.55rem)}
  .public-hero-v8 h2{font-size:1.25rem;margin-top:9px}
  .public-hero-body{font-size:.9rem;line-height:1.63;margin-top:18px!important}
  .public-hero-eyebrow{font-size:.62rem;margin-bottom:13px}
  .public-hero-actions{margin-top:20px;gap:8px}
  .public-cta{padding:10px 13px;font-size:.76rem}
  .public-hero-atmosphere{display:none}

  .public-stats-v8{gap:7px;margin:9px 0 13px}
  .public-stat-card{min-height:67px!important;padding:10px 12px!important;border-radius:14px!important}
  .public-stat-card .stat-label{font-size:.64rem}
  .public-stat-card strong{font-size:1.3rem!important;margin-top:5px!important}

  .public-section-nav-v8{margin:11px 0 14px!important;padding:4px!important;gap:3px!important}
  .public-section-nav-v8 .public-section-btn{padding:8px 6px;font-size:.69rem;min-height:38px}

  .public-filter-grid{grid-template-columns:1fr 1fr;gap:7px}
  .public-filter-grid select{font-size:.78rem;padding:11px 9px}
  .public-search-panel-v8>input{font-size:.86rem}
  .public-note{margin:8px 1px 11px}

  .compact-public-heading{margin:3px 1px 8px}
  .compact-public-heading h2{font-size:1.45rem}
  .public-review-toolbar-v8>input{font-size:.86rem}
  .compact-star-filters{gap:5px}
  .compact-star-filters .pill{font-size:.69rem;padding:6px 9px}

  .public-review-list-card{grid-template-columns:58px 1fr!important;padding:11px!important;gap:10px!important}
  .public-review-list-card .reading-cover{width:58px!important;height:84px!important}
  .public-reading-book h3{font-size:.91rem!important}
  .public-review-list-head{align-items:flex-start;gap:5px}
  .public-reviewer-line{gap:6px}
  .public-reviewer-line strong{font-size:.75rem}
  .public-reviewer-line .stars{font-size:.73rem}
  .reading-badge{font-size:.56rem;padding:4px 6px}
  .review-text-clamp{-webkit-line-clamp:5}
  .public-reading-review{font-size:.78rem}
  .review-expand-btn{font-size:.7rem}

  .public-v8 .detail-grid{grid-template-columns:1fr 1fr}

  .family-work-toggle{padding:11px 12px}
  .compact-review-toolbar{padding:12px}
  .review-hub-card{grid-template-columns:50px 1fr auto;padding:10px;gap:10px}
  .review-hub-card .book-cover{width:50px;height:70px}
  .review-hub-card .book-title{font-size:.88rem}
  .review-snippet-clamp{-webkit-line-clamp:4}
}

@media (max-width:390px){
  .public-brand-v8 p{display:none}
  .public-login-v8 span{max-width:92px;line-height:1.15;text-align:center}
  .public-filter-grid{grid-template-columns:1fr}
  .public-section-nav-v8 .public-section-btn{font-size:.64rem}
  .public-v8 .detail-grid{grid-template-columns:1fr}
}