:root { --tl-accent:#5c3d2e; --tl-bg:#faf6f0; --tl-fg:#1c1917; }
button.bg-jgreen, a.bg-jgreen, .bg-jgreen { background-color:#5d3a1a !important; color:#fff !important; }
.glass-card .bg-jgreen, button.bg-jgreen, a.bg-jgreen { color:#fff !important; }
.glass-card .bg-jgreen svg, button.bg-jgreen svg { color:#d4af37 !important; }
.glass-card .bg-jgold, button.bg-jgold { color:#1a1a1a !important; }
.tl-toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px); background:#1c1917; color:#fff; padding:0.65rem 1rem; border-radius:999px; font-size:0.78rem; font-weight:700; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999; }
.tl-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }
/* Tools index + detail shell (Redesign v2) */
.tl { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.tl-hero {
  text-align: center;
  padding: 3.5rem 1.25rem 2rem;
  background: linear-gradient(180deg, #f9f5f0 0%, #fff 100%);
  margin-bottom: 2rem;
  border-radius: 0 0 1.5rem 1.5rem;
}
.tl-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #5c3d2e;
  margin: 0 0 0.75rem;
}
.tl-hero p { color: #57534e; font-size: 1.05rem; max-width: 36rem; margin: 0 auto; line-height: 1.6; }

.tl-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .tl-grid { grid-template-columns: 1fr 1fr; } }

.tl-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #f0efed;
  border-radius: 1.25rem;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tl-card:hover {
  transform: translateY(-2px);
  border-color: rgba(92, 61, 46, 0.2);
  box-shadow: 0 16px 36px -12px rgba(92, 61, 46, 0.14);
}
.tl-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.04);
}
.tl-card__body { min-width: 0; flex: 1; }
.tl-card h2 {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.tl-card:hover h2 { color: #5c3d2e; }
.tl-card p {
  font-size: 0.8125rem;
  color: #78716c;
  line-height: 1.55;
  margin: 0 0 0.5rem;
  font-weight: 500;
}
.tl-card__cta {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5c3d2e;
}

/* ——— Detail ——— */
.tl-detail { max-width: 84rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.tl-detail__layout--minimal {
  padding-top: 1rem;
}
@media (min-width: 1024px) {
  .tl-detail__layout--minimal {
    grid-template-columns: 1fr 20rem;
    gap: 2.5rem;
  }
}
.tl-side-card--compact {
  padding: 1rem !important;
}

.tl-detail__layout {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .tl-detail__layout { grid-template-columns: 1fr 18rem; gap: 2rem; }
}

.tl-mount {
  min-height: 28rem;
  margin-bottom: 2rem;
  background: #fff;
  border: 1px solid #f0efed;
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 8px 28px -12px rgba(92, 61, 46, 0.1);
  contain: layout;
}
.tl-mount__placeholder {
  text-align: center;
  padding: 2rem 1rem;
  color: #78716c;
  font-size: 0.875rem;
}
.tl-mount__hint { font-size: 0.75rem; color: #a8a29e; margin-top: 0.5rem; }

.tl-article {
  background: #fcfbfa;
  border: 1px solid #f0efed;
  border-radius: 1.25rem;
  padding: 1.5rem 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #44403c;
}
.tl-article h2, .tl-article h3 {
  font-family: var(--font-serif);
  color: #5c3d2e;
  margin: 1.25rem 0 0.5rem;
}
.tl-article h2:first-child, .tl-article h3:first-child { margin-top: 0; }
.tl-article p { margin: 0 0 0.85rem; }
.tl-article ul { padding-left: 1.25rem; margin: 0 0 0.85rem; }

.tl-side-card {
  background: #fff;
  border: 1px solid #f0efed;
  border-radius: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.06);
}
.tl-side-card h2 {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5c3d2e;
  margin: 0 0 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #f0efed;
}
.tl-side-card--cta p {
  font-size: 0.8125rem;
  color: #78716c;
  margin: 0 0 0.85rem;
  line-height: 1.5;
}
.tl-side-btn {
  display: inline-flex;
  background: #5c3d2e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  text-decoration: none;
}
.tl-side-btn:hover { background: #4a3125; }

.tl-related { display: flex; flex-direction: column; gap: 0.65rem; }
.tl-related__item {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  background: #faf8f5;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.tl-related__item:hover {
  border-color: rgba(92, 61, 46, 0.15);
  background: #fff;
}
.tl-related__item strong {
  display: block;
  font-size: 0.8125rem;
  color: #1a1a1a;
  margin-bottom: 0.2rem;
}
.tl-related__item span {
  display: block;
  font-size: 0.75rem;
  color: #78716c;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .tl-detail__side { position: sticky; top: 5rem; }
}

/* ——— Tool sidebar products (DB) ——— */
.tl-products { display: flex; flex-direction: column; gap: 0.65rem; }
.tl-product {
  display: flex;
  gap: 0.65rem;
  padding: 0.55rem;
  border-radius: 0.85rem;
  background: #faf8f5;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.tl-product:hover {
  border-color: rgb(92 61 46 / 0.15);
  background: #fff;
  transform: translateY(-1px);
}
.tl-product__media {
  width: 3rem;
  height: 4rem;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #f5f5f4;
  flex-shrink: 0;
}
.tl-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-product__ph { width: 100%; height: 100%; background: linear-gradient(135deg, #faf8f5, #f5f5f4); }
.tl-product__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
}
.tl-product__body strong {
  font-size: 0.8125rem;
  color: #1a1a1a;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-product__body span {
  font-size: 0.75rem;
  color: #b45309;
  font-weight: 700;
}
.tl-side-btn--ghost {
  display: inline-block;
  background: transparent;
  color: #5c3d2e;
  border: 1px solid #e7e5e4;
  margin-top: 0.65rem;
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
}
.tl-side-btn--ghost:hover { background: #faf8f5; border-color: #5c3d2e; }

/* Temporarily restored - used by 5-8 tools (LDR, calendar etc) */
.tl-tool { display:flex; flex-direction:column; gap:1rem; }
.tl-tool__form { display:flex; flex-direction:column; gap:0.85rem; }
.tl-tool__form { display:flex; flex-direction:column; gap:0.85rem; }
.tl-tool__form label { font-size:0.78rem; font-weight:700; color:#44403c; }
.tl-input { width:100%; padding:0.7rem 0.85rem; border:1px solid #e7e5e4; border-radius:0.75rem; font-size:0.85rem; font-weight:600; background:#fff; }
.tl-input--sm { text-align:center; }
.tl-three { display:flex; gap:0.4rem; }
.tl-row2 { display:grid; grid-template-columns:1fr 1fr; gap:0.65rem; }
.tl-actions { display:flex; gap:0.65rem; }
.tl-btn { display:inline-flex; align-items:center; justify-content:center; padding:0.7rem 1rem; border-radius:0.85rem; font-size:0.8rem; font-weight:700; border:1px solid transparent; cursor:pointer; transition:background .15s; text-decoration:none; }
.tl-btn--primary { background:#5c3d2e; color:#fff; flex:1; }
.tl-btn--primary:hover { background:#4a3125; }
.tl-btn--ghost { background:#fff; border-color:#e7e5e4; color:#57534e; }
.tl-btn--gold { background:#d4af37; color:#1c1917; width:100%; margin-top:0.5rem; }
.tl-btn--sm { padding:0.35rem 0.65rem; font-size:0.7rem; border:1px solid #e7e5e4; background:#fff; }
.tl-range-row { display:flex; justify-content:space-between; font-size:0.78rem; font-weight:600; color:#44403c; margin-bottom:0.25rem; }
.tl-check { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:600; }
.tl-checks { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; background:#faf8f5; padding:0.75rem; border-radius:0.75rem; font-size:0.78rem; }
.tl-result { display:flex; flex-direction:column; gap:0.75rem; }
.tl-kicker { font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#a16207; margin:0; }
.tl-result h2 { font-size:1.5rem; font-weight:800; color:#1c1917; margin:0; line-height:1.2; }
.tl-muted { font-size:0.78rem; color:#78716c; }
.tl-accent { font-size:0.78rem; font-weight:700; color:#854d0e; }
.tl-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.tl-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.6rem; }
.tl-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }
.tl-box { background:#faf8f5; border:1px solid #f0efed; border-radius:0.85rem; padding:0.75rem 0.85rem; display:flex; flex-direction:column; gap:0.2rem; }
.tl-box--accent { background:#fffbeb; border-color:#fde68a; }
.tl-box--diag { text-align:center; background:#fff; border:1px dashed #e7e5e4; }
.tl-box--center { text-align:center; align-items:center; }
.tl-box__head { display:flex; justify-content:space-between; align-items:center; }
.tl-box .tl-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; color:#a8a29e; letter-spacing:0.04em; }
.tl-box strong { font-size:0.95rem; font-weight:800; color:#1c1917; line-height:1.2; }
.tl-box small { font-size:0.72rem; color:#78716c; }
.tl-box b { font-weight:700; }
.tl-box p { font-size:0.82rem; color:#44403c; margin:0; line-height:1.5; }
.tl-note { font-size:0.74rem; color:#78716c; background:#f5f5f4; border-radius:0.6rem; padding:0.6rem 0.75rem; }
.tl-bar { height:0.5rem; background:#e7e5e4; border-radius:999px; overflow:hidden; margin:0.4rem 0; }
.tl-bar div { height:100%; background:#5c3d2e; border-radius:999px; transition:width .5s; }
.tl-badge { font-size:0.62rem; font-weight:800; padding:0.15rem 0.45rem; border-radius:999px; text-transform:uppercase; }
.tl-badge--gray { background:#f5f5f4; color:#a8a29e; }
.tl-badge--gold { background:#fef3c7; color:#92400e; }
.tl-badge--muted { background:#faf8f5; color:#78716c; border:1px solid #f0efed; }
.tl-badge--baik { background:#dcfce7; color:#166534; }
.tl-badge--hindari { background:#fee2e2; color:#991b1b; }
.tl-badge--boleh { background:#faf8f5; color:#57534e; border:1px solid #e7e5e4; }
.tl-chips { display:flex; flex-wrap:wrap; gap:0.5rem; }
.tl-chip { display:flex; align-items:center; gap:0.3rem; padding:0.45rem 0.7rem; background:#fff; border:1px solid #e7e5e4; border-radius:0.7rem; font-size:0.78rem; font-weight:700; cursor:pointer; transition:background .15s; }
.tl-chip:hover { background:#f5f5f4; }
.tl-chip.copied { background:#dcfce7; border-color:#bbf7d0; }
.tl-section-title { font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#a16207; margin:1rem 0 0.5rem; padding-bottom:0.35rem; border-bottom:1px solid #f0efed; }
.tl-legend { display:flex; gap:0.75rem; align-items:center; font-size:0.7rem; color:#78716c; margin-bottom:0.5rem; flex-wrap:wrap; }
.tl-legend .dot { width:0.7rem; height:0.7rem; border-radius:0.2rem; display:inline-block; }
.tl-pills { display:flex; flex-wrap:wrap; gap:0.35rem; }
.tl-pill { display:inline-flex; padding:0.25rem 0.6rem; background:#fffbeb; border:1px solid #fde68a; border-radius:999px; font-size:0.72rem; font-weight:700; color:#92400e; }
.tl-tool--wide { max-width:none; }
.tl-cal-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:768px){ .tl-cal-grid{ grid-template-columns:1fr 1fr; } }
.tl-cal { background:#fff; border:1px solid #f0efed; border-radius:0.85rem; overflow:hidden; }
.tl-cal__head { padding:0.65rem 0.85rem; background:#faf8f5; border-bottom:1px solid #f0efed; display:flex; flex-direction:column; }
.tl-cal__head strong { font-size:0.85rem; color:#1c1917; }
.tl-cal__head small { font-size:0.68rem; color:#a8a29e; }
.tl-cal table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.tl-cal th { padding:0.4rem 0.2rem; font-size:0.64rem; font-weight:800; color:#a8a29e; text-transform:uppercase; background:#faf8f5; border-bottom:1px solid #f0efed; text-align:center; }
.tl-cal td { padding:0.35rem 0.15rem; text-align:center; border:1px solid #f5f5f4; cursor:pointer; height:2.5rem; vertical-align:top; }
.tl-cal td.empty { background:#fafaf9; cursor:default; }
.tl-cal td.is-baik { background:rgba(74,138,74,0.15); }
.tl-cal td.is-hindari { background:rgba(192,80,80,0.13); }
.tl-cal td.is-boleh { background:#fff; }
.tl-cal td .num { font-weight:800; display:block; line-height:1.1; }
.tl-cal td .pas { font-size:0.56rem; color:#a8a29e; display:block; }
.tl-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1rem; }
.tl-modal[hidden] { display:none !important; }
.tl-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.tl-modal__box { position:relative; background:#fff; border-radius:1rem; padding:1.25rem; max-width:22rem; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.25); z-index:1; }
.tl-modal__close { position:absolute; top:0.6rem; right:0.75rem; font-size:1.4rem; background:none; border:none; cursor:pointer; color:#a8a29e; }
.tl-modal__date { font-size:1.1rem; font-weight:800; color:#92400e; }
.tl-modal__weton { font-size:0.82rem; font-weight:600; color:#57534e; margin-bottom:0.5rem; }
.tl-modal__rows { display:flex; flex-direction:column; margin-top:0.75rem; border-top:1px solid #f5f5f4; }
.tl-modal__rows div { display:flex; justify-content:space-between; padding:0.4rem 0; border-bottom:1px solid #f5f5f4; font-size:0.78rem; }
.tl-modal__rows span { color:#a8a29e; }
.tl-modal__reasons { margin-top:0.75rem; padding:0.6rem 0.75rem; background:#fef2f2; border:1px solid #fecaca; border-radius:0.6rem; font-size:0.74rem; color:#991b1b; line-height:1.5; }
.tl-stars span { font-size:0.75rem; color:#e7e5e4; }
.tl-stars span.on { color:#d4af37; }

/* ——— Cek Weton v2 Heritage ——— */
.cw { display:flex; flex-direction:column; gap:1.25rem; }
.cw-paper { position:relative; background:#fffdf7; border:1px solid #f0e6d3; border-radius:1.5rem; padding:1.5rem 1.25rem; overflow:hidden; box-shadow:0 12px 32px -16px rgba(92,61,46,0.18); }
.cw-paper__batik { position:absolute; inset:0; opacity:0.06; background-image:radial-gradient(#5c3d2e 1.5px, transparent 1.5px); background-size:18px 18px; pointer-events:none; }
.cw-head { position:relative; margin-bottom:1.1rem; }
.cw-kicker { font-size:0.62rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#b45309; display:block; margin-bottom:0.35rem; }
.cw-head h2 { font-family:var(--font-serif); font-size:1.65rem; font-weight:800; color:#2e1f18; line-height:1.05; margin:0 0 0.25rem; }
.cw-head p { font-size:0.82rem; color:#78716c; margin:0; }
.cw-field label { font-size:0.72rem; font-weight:700; color:#57534e; display:block; margin-bottom:0.3rem; }
.cw-input { width:100%; padding:0.85rem 0.9rem; border:1px solid #e7d9be; border-radius:0.9rem; background:#fff; font-size:0.88rem; font-weight:600; }
.cw-actions { display:flex; gap:0.6rem; margin-top:0.9rem; }
.cw-btn { display:inline-flex; align-items:center; justify-content:center; padding:0.85rem 1.1rem; border-radius:0.9rem; font-size:0.82rem; font-weight:800; border:1px solid transparent; cursor:pointer; background:#2e1f18; color:#fdf6e3; flex:1; transition:transform .12s, background .15s; }
.cw-btn:hover { transform:translateY(-1px); background:#1c120d; }
.cw-btn--ghost { background:#fff; color:#57534e; border-color:#e7d9be; flex:0 0 auto; }
.cw-btn--share { background:#d4af37; color:#2e1f18; }
.cw-pasaran-wheel { position:relative; width:112px; height:112px; margin:1rem auto 0; border:1px dashed #e7d9be; border-radius:999px; }
.cw-wheel__dot { position:absolute; left:50%; top:50%; width:1.6rem; height:1.6rem; margin:-0.8rem; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #f0e6d3; border-radius:999px; font-size:0.7rem; font-weight:800; transform:rotate(var(--a)) translate(42px) rotate(calc(-1*var(--a))); transition:all .2s; }
.cw-wheel__dot.is-active { background:#2e1f18; color:#fdf6e3; border-color:#2e1f18; transform:rotate(var(--a)) translate(46px) rotate(calc(-1*var(--a))) scale(1.15); }
.cw-wheel__center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.82rem; font-weight:800; color:#5c3d2e; }
.cw-result { display:flex; flex-direction:column; gap:1rem; animation:cwIn .45s ease; }
@keyframes cwIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.cw-result__hero { display:flex; gap:1rem; align-items:center; background:#fff; border:1px solid #f0e6d3; border-radius:1.2rem; padding:1rem; }
.cw-neptu-dial { position:relative; width:72px; height:72px; flex-shrink:0; }
.cw-neptu-dial svg { width:100%; height:100%; transform:rotate(-90deg); }
.cw-dial__bg { fill:none; stroke:#f5e9c9; stroke-width:8; }
.cw-dial__fg { fill:none; stroke:#d4af37; stroke-width:8; stroke-linecap:round; stroke-dasharray:263; stroke-dashoffset:calc(263 - 263*var(--p)/100); transition:stroke-dashoffset .6s ease; }
.cw-dial__num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cw-dial__num b { font-size:1.25rem; font-weight:800; color:#2e1f18; line-height:1; }
.cw-dial__num small { font-size:0.58rem; font-weight:700; color:#a8a29e; text-transform:uppercase; letter-spacing:0.06em; }
.cw-weton-name { font-family:var(--font-serif); font-size:1.35rem; font-weight:800; color:#2e1f18; line-height:1.1; }
.cw-masehi { font-size:0.78rem; color:#78716c; margin-top:0.15rem; }
.cw-meta-row { display:flex; gap:0.4rem; margin-top:0.5rem; flex-wrap:wrap; }
.cw-chip { font-size:0.62rem; font-weight:700; padding:0.25rem 0.5rem; border-radius:999px; background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.cw-chip--outline { background:#fff; color:#57534e; border-color:#e7d9be; }
.cw-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.cw-card { background:#fff; border:1px solid #f0e6d3; border-radius:0.9rem; padding:0.75rem 0.85rem; }
.cw-card__kicker { font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#a8a29e; }
.cw-card p { font-size:0.82rem; color:#44403c; margin:0.25rem 0 0; line-height:1.45; }
.cw-quote { display:flex; gap:0.75rem; background:#2e1f18; color:#fdf6e3; border-radius:1rem; padding:1rem; }
.cw-quote__icon { width:2rem; height:2rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#d4af37; color:#2e1f18; border-radius:0.6rem; font-weight:800; }
.cw-quote p { color:#f5f5f4; font-style:italic; font-size:0.84rem; line-height:1.5; margin:0.2rem 0 0; }
.cw-share-row { display:flex; gap:0.6rem; }
.cw-jawa-cal { margin-top:0.25rem; background:#fffefb; border:1px dashed #e7d9be; border-radius:0.9rem; padding:0.65rem 0.75rem; }
.cw-jawa-row { display:flex; gap:0.35rem; }
.cw-jawa-row span { flex:1; text-align:center; padding:0.35rem 0; border-radius:0.5rem; font-size:0.72rem; font-weight:700; background:#fff; border:1px solid #f0e6d3; }
.cw-jawa-row span.is-active { background:#2e1f18; color:#fdf6e3; border-color:#2e1f18; }

/* ——— Hashtag Wedding v2 GenZ ——— */
.hw { display:flex; flex-direction:column; gap:1rem; }
.hw-card { position:relative; background:#fff; border:1px solid #ffe4d6; border-radius:1.8rem; overflow:hidden; box-shadow:0 20px 50px -24px rgba(244,63,94,0.25); }
.hw-card__confetti { position:absolute; top:-10px; right:18px; display:flex; gap:6px; pointer-events:none; }
.hw-card__confetti span { font-size:1.6rem; opacity:0.18; transform:rotate(12deg); }
.hw-card__head { padding:1.5rem 1.4rem 1rem; }
.hw-kicker { font-size:0.62rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#f43f5e; display:block; margin-bottom:0.5rem; }
.hw-card__head h2 { font-family:var(--font-serif); font-size:1.8rem; font-weight:800; line-height:0.95; color:#1c1917; margin:0 0 0.35rem; letter-spacing:-0.02em; }
.hw-card__head p { font-size:0.82rem; color:#78716c; margin:0; }
.hw-form { padding:0 1.1rem 1.1rem; display:flex; flex-direction:column; gap:0.75rem; }
.hw-pill-row { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.hw-pill { display:flex; flex-direction:column; gap:0.3rem; background:#fff7ed; border:1px solid #ffedd5; border-radius:1rem; padding:0.6rem 0.75rem; }
.hw-pill span { font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#fb923c; }
.hw-pill input { border:none; background:transparent; font-size:0.9rem; font-weight:800; color:#1c1917; outline:none; width:100%; }
.hw-pill--year { flex-direction:row; align-items:center; justify-content:space-between; }
.hw-pill--year input { width:5rem; text-align:center; }
.hw-year-step { display:flex; gap:0.25rem; }
.hw-year-step button { width:1.6rem; height:1.6rem; border-radius:999px; border:1px solid #ffedd5; background:#fff; font-weight:800; cursor:pointer; }
.hw-actions { display:flex; gap:0.6rem; }
.hw-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.35rem; padding:0.85rem 1rem; border-radius:1rem; font-size:0.82rem; font-weight:800; border:1px solid transparent; cursor:pointer; transition:transform .12s; }
.hw-btn:hover { transform:translateY(-1px); }
.hw-btn--primary { background:#1c1917; color:#fff; flex:1; flex-direction:column; line-height:1.1; }
.hw-btn--primary small { font-size:0.68rem; font-weight:600; opacity:0.7; margin-top:0.15rem; }
.hw-btn--primary.is-loading { opacity:0.7; pointer-events:none; }
.hw-btn--ghost { background:#fff; border-color:#ffe4d6; color:#57534e; }
.hw-btn--sm { background:#1c1917; color:#fff; padding:0.45rem 0.75rem; font-size:0.7rem; border-radius:0.7rem; }
.hw-loading { text-align:center; padding:1rem; }
.hw-dots { display:flex; justify-content:center; gap:0.35rem; margin-bottom:0.5rem; }
.hw-dots span { width:0.5rem; height:0.5rem; border-radius:999px; background:#f43f5e; animation:hwBounce 0.8s infinite alternate; }
.hw-dots span:nth-child(2){ animation-delay:.15s; } .hw-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes hwBounce { from{transform:translateY(0);} to{transform:translateY(-6px);} }
.hw-result { padding:0 1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.9rem; animation:cwIn .4s ease; }
.hw-result__head { display:flex; justify-content:space-between; align-items:center; padding-bottom:0.6rem; border-bottom:1px dashed #ffe4d6; }
.hw-result__head strong { font-size:0.85rem; font-weight:800; }
.hw-result__head small { display:block; font-size:0.68rem; color:#a8a29e; font-weight:600; }
.hw-chip-grid { display:flex; flex-wrap:wrap; gap:0.45rem; }
.hw-chip { display:inline-flex; align-items:center; gap:0.35rem; padding:0.5rem 0.75rem; background:#fff; border:1px solid #ffe4d6; border-radius:999px; font-size:0.8rem; font-weight:700; cursor:pointer; transition:all .15s; }
.hw-chip:hover { transform:translateY(-1px) scale(1.02); border-color:#f43f5e; }
.hw-chip.is-copied { background:#1c1917; color:#fff; border-color:#1c1917; }
.hw-caption { background:#fff7ed; border:1px solid #ffedd5; border-radius:1rem; padding:0.85rem; }
.hw-caption__label { font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#fb923c; display:block; margin-bottom:0.35rem; }
.hw-caption p { font-size:0.8rem; line-height:1.5; color:#44403c; margin:0 0 0.6rem; }
.hw-confetti-burst { position:absolute; pointer-events:none; z-index:9999; }
.hw-confetti-burst span { position:absolute; width:8px; height:8px; background:#f43f5e; border-radius:2px; animation:hwConf .8s ease-out forwards; }
.hw-confetti-burst span:nth-child(odd){ background:#f59e0b; }
.hw-confetti-burst span:nth-child(3n){ background:#ec4899; }
@keyframes hwConf { 0%{ transform:translate(0,0) rotate(0deg); opacity:1; } 100%{ transform:translate(var(--x), 80px) rotate(var(--r)); opacity:0; } }

/* ——— Selamatan v2 Solemn Timeline ——— */
.sl { display:flex; flex-direction:column; gap:1.1rem; }
.sl-paper { background:#fff; border:1px solid #e7e5e4; border-radius:1.4rem; padding:1.25rem 1.15rem; box-shadow:0 8px 24px -16px rgba(0,0,0,0.12); }
.sl-head h2 { font-family:var(--font-serif); font-size:1.55rem; font-weight:800; color:#1e293b; margin:0.15rem 0 0.25rem; line-height:1; }
.sl-head p { font-size:0.8rem; color:#78716c; margin:0; }
.sl-kicker { font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:#78716c; }
.sl-field label { font-size:0.7rem; font-weight:700; color:#44403c; display:block; margin-bottom:0.3rem; }
.sl-input { width:100%; padding:0.8rem 0.85rem; border:1px solid #e7e5e4; border-radius:0.8rem; font-size:0.85rem; font-weight:600; background:#fafaf9; }
.sl-actions { display:flex; gap:0.5rem; margin-top:0.75rem; }
.sl-btn { display:inline-flex; align-items:center; justify-content:center; padding:0.8rem 1rem; border-radius:0.8rem; font-size:0.8rem; font-weight:700; border:1px solid transparent; background:#1e293b; color:#fff; cursor:pointer; flex:1; }
.sl-btn--ghost { background:#fff; color:#44403c; border-color:#e7e5e4; }
.sl-preset { display:flex; gap:0.4rem; align-items:center; margin-top:0.75rem; flex-wrap:wrap; font-size:0.7rem; color:#a8a29e; }
.sl-preset span { font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.sl-preset button { padding:0.3rem 0.6rem; border-radius:999px; border:1px solid #e7e5e4; background:#fff; font-size:0.7rem; font-weight:700; cursor:pointer; }
.sl-preset button:hover { background:#f8fafc; }
.sl-count { background:#f8fafc; border:1px solid #e2e8f0; border-radius:1rem; padding:1rem; text-align:center; animation:cwIn .4s ease; }
.sl-count__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; margin:0.75rem 0 0.5rem; }
.sl-count__grid div { background:#fff; border:1px solid #e2e8f0; border-radius:0.7rem; padding:0.5rem; }
.sl-count__grid b { display:block; font-size:1.15rem; font-weight:800; color:#1e293b; line-height:1; }
.sl-count__grid small { font-size:0.6rem; font-weight:700; text-transform:uppercase; color:#94a3b8; letter-spacing:0.06em; }
.sl-count__meta { font-size:0.72rem; color:#64748b; margin-top:0.35rem; }
.sl-timeline { display:flex; flex-direction:column; gap:0; }
.sl-tl__item { display:flex; gap:0.75rem; position:relative; }
.sl-tl__line { display:flex; flex-direction:column; align-items:center; width:1.1rem; }
.sl-tl__dot { width:0.6rem; height:0.6rem; border-radius:999px; background:#cbd5e1; border:2px solid #fff; box-shadow:0 0 0 1px #cbd5e1; margin-top:0.35rem; flex-shrink:0; }
.sl-tl__item.is-today .sl-tl__dot { background:#f59e0b; box-shadow:0 0 0 2px #fef3c7, 0 0 0 4px #fff; animation:slPulse 1.8s infinite; }
.sl-tl__item.is-past .sl-tl__dot { background:#e2e8f0; }
.sl-tl__item.is-future .sl-tl__dot { background:#1e293b; }
@keyframes slPulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.25);} }
.sl-tl__stem { width:1px; flex:1; background:#e2e8f0; margin-top:0.25rem; min-height:1.2rem; }
.sl-tl__body { flex:1; background:#fff; border:1px solid #e2e8f0; border-radius:0.8rem; padding:0.65rem 0.75rem; margin-bottom:0.7rem; }
.sl-tl__head { display:flex; justify-content:space-between; align-items:center; }
.sl-tl__head strong { font-size:0.82rem; font-weight:800; color:#1e293b; }
.sl-tl__meta { font-size:0.72rem; color:#64748b; margin-top:0.2rem; }
.sl-badge { font-size:0.58rem; font-weight:800; padding:0.15rem 0.45rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em; }
.sl-badge--past { background:#f8fafc; color:#94a3b8; }
.sl-badge--today { background:#fef3c7; color:#92400e; }
.sl-badge--future { background:#e0f2fe; color:#0c4a6e; }
.sl-share-row { display:flex; gap:0.5rem; margin-top:0.6rem; }

/* ——— Gamon Widget Style ——— */
.gm { display:flex; flex-direction:column; gap:1rem; }
.gm-card { background:#fff; border:1px solid var(--tl-border); border-radius:1.5rem; padding:1.5rem 1.25rem; box-shadow:0 10px 30px -15px rgba(92, 61, 46, 0.08); }
.gm-card__head { margin-bottom: 1.25rem; border-bottom: 1px solid var(--tl-border); padding-bottom: 0.85rem; }
.gm-card__head h2 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 800; color: var(--tl-accent); margin: 0 0 0.25rem; }
.gm-card__head p { font-size: 0.82rem; color: #78716c; margin: 0; }
.gm-form { display: flex; flex-direction: column; gap: 1rem; }
.gm-range { width: 100%; height: 6px; background: var(--tl-bg); border-radius: 999px; outline: none; -webkit-appearance: none; }
.gm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 999px; background: var(--tl-accent); cursor: pointer; }
.gm-checks-wrap { background: var(--tl-bg); border: 1px solid var(--tl-border); border-radius: 1rem; padding: 0.85rem; }
.gm-checks { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.45rem; }
@media(min-width:640px) { .gm-checks { grid-template-columns: 1fr 1fr; } }
.gm-checks label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #57534e; cursor: pointer; font-weight: 600; }
.gm-checks input { width: 0.95rem; height: 0.95rem; accent-color: var(--tl-accent); }
.gm-result { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; animation: cwIn .4s ease; }

/* Legacy tl- classes for heavy calendar tools (5-8) */
.tl-tool { display:flex; flex-direction:column; gap:1rem; }
.tl-tool__form { display:flex; flex-direction:column; gap:0.85rem; }
.tl-tool__form label, .tl-label { font-size:0.78rem; font-weight:700; color:#44403c; }
.tl-input { width:100%; padding:0.7rem 0.85rem; border:1px solid #e7e5e4; border-radius:0.75rem; font-size:0.85rem; font-weight:600; background:#fff; }
.tl-input--sm { text-align:center; }
.tl-three { display:flex; gap:0.4rem; }
.tl-row2 { display:grid; grid-template-columns:1fr 1fr; gap:0.65rem; }
.tl-actions { display:flex; gap:0.65rem; }
.tl-btn { display:inline-flex; align-items:center; justify-content:center; padding:0.7rem 1rem; border-radius:0.85rem; font-size:0.8rem; font-weight:700; border:1px solid transparent; cursor:pointer; transition:background .15s; text-decoration:none; }
.tl-btn--primary { background:#5c3d2e; color:#fff; flex:1; }
.tl-btn--primary:hover { background:#4a3125; }
.tl-btn--ghost { background:#fff; border-color:#e7e5e4; color:#57534e; }
.tl-btn--gold { background:#d4af37; color:#1c1917; width:100%; margin-top:0.5rem; }
.tl-btn--sm { padding:0.35rem 0.65rem; font-size:0.7rem; border:1px solid #e7e5e4; background:#fff; }
.tl-range-row { display:flex; justify-content:space-between; font-size:0.78rem; font-weight:600; color:#44403c; margin-bottom:0.25rem; }
.tl-check { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:600; }
.tl-checks { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; background:#faf8f5; padding:0.75rem; border-radius:0.75rem; font-size:0.78rem; }
.tl-result { display:flex; flex-direction:column; gap:0.75rem; }
.tl-kicker { font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#a16207; margin:0; }
.tl-result h2 { font-size:1.5rem; font-weight:800; color:#1c1917; margin:0; line-height:1.2; }
.tl-muted { font-size:0.78rem; color:#78716c; }
.tl-accent { font-size:0.78rem; font-weight:700; color:#854d0e; }
.tl-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.tl-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.6rem; }
.tl-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }
.tl-box { background:#faf8f5; border:1px solid #f0efed; border-radius:0.85rem; padding:0.75rem 0.85rem; display:flex; flex-direction:column; gap:0.2rem; }
.tl-box--accent { background:#fffbeb; border-color:#fde68a; }
.tl-box--diag { text-align:center; background:#fff; border:1px dashed #e7e5e4; }
.tl-box--center { text-align:center; align-items:center; }
.tl-box__head { display:flex; justify-content:space-between; align-items:center; }
.tl-box .tl-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; color:#a8a29e; letter-spacing:0.04em; }
.tl-box strong { font-size:0.95rem; font-weight:800; color:#1c1917; line-height:1.2; }
.tl-box small { font-size:0.72rem; color:#78716c; }
.tl-box b { font-weight:700; }
.tl-box p { font-size:0.82rem; color:#44403c; margin:0; line-height:1.5; }
.tl-note { font-size:0.74rem; color:#78716c; background:#f5f5f4; border-radius:0.6rem; padding:0.6rem 0.75rem; }
.tl-bar { height:0.5rem; background:#e7e5e4; border-radius:999px; overflow:hidden; margin:0.4rem 0; }
.tl-bar div { height:100%; background:#5c3d2e; border-radius:999px; transition:width .5s; }
.tl-badge { font-size:0.62rem; font-weight:800; padding:0.15rem 0.45rem; border-radius:999px; text-transform:uppercase; }
.tl-badge--gray { background:#f5f5f4; color:#a8a29e; }
.tl-badge--gold { background:#fef3c7; color:#92400e; }
.tl-badge--muted { background:#faf8f5; color:#78716c; border:1px solid #f0efed; }
.tl-badge--baik { background:#dcfce7; color:#166534; }
.tl-badge--hindari { background:#fee2e2; color:#991b1b; }
.tl-badge--boleh { background:#faf8f5; color:#57534e; border:1px solid #e7e5e4; }
.tl-chips { display:flex; flex-wrap:wrap; gap:0.5rem; }
.tl-chip { display:flex; align-items:center; gap:0.3rem; padding:0.45rem 0.7rem; background:#fff; border:1px solid #e7e5e4; border-radius:0.7rem; font-size:0.78rem; font-weight:700; cursor:pointer; transition:background .15s; }
.tl-chip:hover { background:#f5f5f4; }
.tl-chip.copied { background:#dcfce7; border-color:#bbf7d0; }
.tl-section-title { font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#a16207; margin:1rem 0 0.5rem; padding-bottom:0.35rem; border-bottom:1px solid #f0efed; }
.tl-legend { display:flex; gap:0.75rem; align-items:center; font-size:0.7rem; color:#78716c; margin-bottom:0.5rem; flex-wrap:wrap; }
.tl-legend .dot { width:0.7rem; height:0.7rem; border-radius:0.2rem; display:inline-block; }
.tl-pills { display:flex; flex-wrap:wrap; gap:0.35rem; }
.tl-pill { display:inline-flex; padding:0.25rem 0.6rem; background:#fffbeb; border:1px solid #fde68a; border-radius:999px; font-size:0.72rem; font-weight:700; color:#92400e; }
.tl-tool--wide { max-width:none; }
.tl-cal-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:768px){ .tl-cal-grid{ grid-template-columns:1fr 1fr; } }
.tl-cal { background:#fff; border:1px solid #f0efed; border-radius:0.85rem; overflow:hidden; }
.tl-cal__head { padding:0.65rem 0.85rem; background:#faf8f5; border-bottom:1px solid #f0efed; display:flex; flex-direction:column; }
.tl-cal__head strong { font-size:0.85rem; color:#1c1917; }
.tl-cal__head small { font-size:0.68rem; color:#a8a29e; }
.tl-cal table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.tl-cal th { padding:0.4rem 0.2rem; font-size:0.64rem; font-weight:800; color:#a8a29e; text-transform:uppercase; background:#faf8f5; border-bottom:1px solid #f0efed; text-align:center; }
.tl-cal td { padding:0.35rem 0.15rem; text-align:center; border:1px solid #f5f5f4; cursor:pointer; height:2.5rem; vertical-align:top; }
.tl-cal td.empty { background:#fafaf9; cursor:default; }
.tl-cal td.is-baik { background:rgba(74,138,74,0.15); }
.tl-cal td.is-hindari { background:rgba(192,80,80,0.13); }
.tl-cal td.is-boleh { background:#fff; }
.tl-cal td .num { font-weight:800; display:block; line-height:1.1; }
.tl-cal td .pas { font-size:0.56rem; color:#a8a29e; display:block; }
.tl-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1rem; }
.tl-modal[hidden] { display:none !important; }
.tl-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.tl-modal__box { position:relative; background:#fff; border-radius:1rem; padding:1.25rem; max-width:22rem; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.25); z-index:1; }
.tl-modal__close { position:absolute; top:0.6rem; right:0.75rem; font-size:1.4rem; background:none; border:none; cursor:pointer; color:#a8a29e; }
.tl-modal__date { font-size:1.1rem; font-weight:800; color:#92400e; }
.tl-modal__weton { font-size:0.82rem; font-weight:600; color:#57534e; margin-bottom:0.5rem; }
.tl-modal__rows { display:flex; flex-direction:column; margin-top:0.75rem; border-top:1px solid #f5f5f4; }
.tl-modal__rows div { display:flex; justify-content:space-between; padding:0.4rem 0; border-bottom:1px solid #f5f5f4; font-size:0.78rem; }
.tl-modal__rows span { color:#a8a29e; }
.tl-modal__reasons { margin-top:0.75rem; padding:0.6rem 0.75rem; background:#fef2f2; border:1px solid #fecaca; border-radius:0.6rem; font-size:0.74rem; color:#991b1b; line-height:1.5; }
.tl-stars span { font-size:0.75rem; color:#e7e5e4; }
.tl-stars span.on { color:#d4af37; }
.gm-result__score { text-align: center; background: var(--tl-bg); border: 1px solid var(--tl-border); border-radius: 1.25rem; padding: 1.15rem; }
.gm-result__score h2 { font-size: 2.85rem; font-weight: 900; color: var(--tl-accent); line-height: 1; margin: 0.25rem 0 0.5rem; }
.gm-diag { display: flex; gap: 0.85rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 1.25rem; padding: 1rem; color: #92400e; }
.gm-diag__icon { width: 2.5rem; height: 2.5rem; background: #fff; border: 1px solid #fde68a; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gm-diag__body { display: flex; flex-direction: column; justify-content: center; }
.gm-diag__body strong { font-size: 0.85rem; font-weight: 800; }
.gm-diag__body p { font-size: 0.78rem; line-height: 1.45; margin: 0.15rem 0 0; font-style: italic; opacity: 0.85; }
.gm-stars { display: flex; gap: 0.15rem; color: #d6d3d1; margin-top: 0.25rem; }
.gm-star.is-active { color: var(--tl-gold); }