:root{
      --teal:#86C2A6;    /* links/focus/success */
      --pink:#F6C2CB;    /* primary soft */
      --coral:#FF7A6E;   /* CTA pop */
      --lav:#EDE2F6;     /* lilac tint */
      --ink:#2B2B2F;     /* body text */
      --bg-grad: linear-gradient(180deg, #fff 0%, #fff7f9 40%, #f6fafe 100%);
    }

    html, body { color: var(--ink); }
    body {
      font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      background: var(--bg-grad);
    }
    .font-serif { font-family: Lora, Georgia, serif; }

    /* Sticky header */
    header.navbar-sticky { position:sticky; top:0; z-index:1030; backdrop-filter: saturate(180%) blur(8px); background:rgba(255,255,255,.85); border-bottom:1px solid #ffe3ea; }

    /* Chips / pills / buttons */
    .chip { display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(26,179,148,.18); background: rgba(26,179,148,.10); color:#0f766e; border-radius:999px; padding:.25rem .65rem; font-size:.875rem; }
    .badge-soft { background: rgba(134,194,166,.12); color: var(--teal); border:1px solid rgba(134,194,166,.30); }
    .btn-romantic { background: var(--pink); color:#fff; border:none; border-radius:999px; padding:.68rem 1.05rem; font-weight:700; box-shadow:0 8px 24px rgba(26,179,148,.10); }
    .btn-romantic:hover { background: var(--teal); color:#fff; box-shadow:0 12px 30px rgba(26,179,148,.25); }
    .btn-outline-teal { border:1.5px solid var(--teal); color: var(--teal); border-radius:999px; padding:.68rem 1.05rem; background:transparent; font-weight:700; }
    .btn-outline-teal:hover { background: rgba(26,179,148,.08); color: var(--teal); }
    .btn-ghost { border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:999px; padding:.68rem 1.05rem; }
    /* Disabled button styles for better visibility */
    .btn-romantic:disabled, .btn-romantic[aria-disabled="true"] { background: #EFA9B4; color:#fff; opacity:1; cursor:not-allowed; box-shadow:none; }
    .btn-outline-teal:disabled, .btn-outline-teal[aria-disabled="true"] { border-color: var(--teal); color:#6FAE99; background: rgba(134,194,166,.12); opacity:1; cursor:not-allowed; }
    .btn-ghost:disabled, .btn-ghost[aria-disabled="true"] { background:#f5f5f5; color:#9AA0A6; opacity:1; cursor:not-allowed; }


    .card-romance { border:1px solid rgba(0,0,0,.06); background:#fff; border-radius:1.25rem; box-shadow:0 8px 32px rgba(17,24,39,.06); }

    /* Photo boxes */
    .photo-box { position: relative; border-radius: 1rem; overflow: hidden; background: radial-gradient(120px 120px at 50% 40%, rgba(246,194,203,.55), rgba(134,194,166,.35)), var(--lav); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
    .photo-box .blur-pill { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--teal)); filter: blur(10px); }
    .photo-box img.photo { width:100%; height:100%; object-fit:cover; }
    .photo-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(0,0,0,.20)); color:#fff; font-weight:700; letter-spacing:.2px; opacity:0; transition: .15s ease; }
    .photo-private .photo-overlay { opacity:1; }
    .photo-clickable{ cursor: zoom-in; }
    .photo-zoom-btn{ border:0; background:transparent; padding:0; width:100%; display:block; cursor:zoom-in; }
    .photo-empty-note{ color:#6b7280; font-size:.92rem; }

    /* Mini section nav */
    .subnav { position:sticky; top:64px; z-index:50; background:rgba(255,255,255,.85); backdrop-filter: blur(8px); border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:.35rem; display:flex; gap:.25rem; }
    .subnav a { text-decoration:none; padding:.45rem .9rem; border-radius:999px; color:var(--ink); }
    .subnav a:hover, .subnav a.active { background: rgba(134,194,166,.14); color:#0f766e; }

    .shape-pink { position:absolute; width:18rem; height:18rem; border-radius:50%; background: var(--pink); filter: blur(60px); opacity:.18; z-index:0; }
    .shape-teal { position:absolute; width:20rem; height:20rem; border-radius:50%; background: var(--teal); filter: blur(70px); opacity:.16; z-index:0; }

        .romance-link {
            color: var(--teal);
            text-decoration: none;
        }

            .romance-link:hover {
                text-decoration: underline;
            }