/* ---------- Profile page ---------- */
  main.profile { max-width: 1040px; padding-top: 14px; }
  .back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-soft); font-weight: 700; font-size: 14px; text-decoration: none;
    padding: 8px 14px 8px 12px; border-radius: 999px;
    border: 1.5px solid var(--card-border); background: var(--warm-white);
    box-shadow: 0 2px 8px #D4A84B10;
  }
  .back:hover { border-color: var(--gold-soft); color: var(--ink); }
  .back .arr { color: var(--gold); font-size: 16px; line-height: 1; }

  .hero {
    display: grid; grid-template-columns: 400px 1fr; gap: 52px; align-items: center;
    margin-top: 22px;
  }

  /* Ofrenda portrait */
  .ofrenda { position: relative; padding-top: 30px; }
  .picado {
    position: absolute; top: 0; left: 6px; right: 6px; height: 46px; z-index: 3;
    display: flex; justify-content: space-between; align-items: flex-start;
  }
  .picado::before {
    content: ''; position: absolute; top: 3px; left: -6px; right: -6px; height: 2px;
    background: linear-gradient(90deg, transparent, #D4A84B88 8%, #D4A84B88 92%, transparent);
    border-radius: 2px;
  }
  .flag {
    position: relative; width: 38px; height: 40px; margin-top: 4px;
    clip-path: polygon(0 0,100% 0,100% 78%,88% 100%,75% 78%,62% 100%,50% 78%,38% 100%,25% 78%,12% 100%,0 78%);
    opacity: .85;
    -webkit-mask: radial-gradient(circle 3px at 50% 40%, transparent 98%, #000 100%),
                  linear-gradient(#000,#000);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .flag::after {
    content: ''; position: absolute; inset: 6px 7px 12px;
    background:
      radial-gradient(circle 2.5px at 25% 30%, #FFFCF7 96%, transparent 100%),
      radial-gradient(circle 2.5px at 75% 30%, #FFFCF7 96%, transparent 100%),
      radial-gradient(circle 4px at 50% 55%, #FFFCF7 96%, transparent 100%),
      radial-gradient(circle 2px at 25% 82%, #FFFCF7 96%, transparent 100%),
      radial-gradient(circle 2px at 75% 82%, #FFFCF7 96%, transparent 100%);
    opacity: .9;
  }
  .flag.g { background: var(--gold-soft); }
  .flag.b { background: var(--blush-deep); }
  .flag.s { background: var(--sage); }
  .flag.l { background: var(--lavender); }

  .frame {
    position: relative; z-index: 2;
    padding: 14px; border-radius: 200px 200px 26px 26px;
    background: linear-gradient(160deg, #FFF8E8, #F5E6C0);
    border: 2px solid var(--gold-soft);
    box-shadow: 0 0 0 6px #FFFCF7, 0 0 0 7.5px #E8D9C4, 0 18px 44px #3D342918, 0 0 40px #D4A84B33;
  }
  .frame img {
    display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
    border-radius: 186px 186px 16px 16px;
    border: 1.5px solid #E8C97A;
  }
  .garland {
    position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); z-index: 4;
    display: flex; gap: 2px; font-size: 24px; white-space: nowrap;
    filter: drop-shadow(0 2px 6px #D4A84B44);
  }
  .garland span:nth-child(even) { font-size: 18px; transform: translateY(5px); }
  .side-candle {
    position: absolute; bottom: 4px; z-index: 3; width: 20px; height: 60px;
    border-radius: 4px 4px 3px 3px;
    background: linear-gradient(90deg, #F3E6CF, #FFFCF5 45%, #EAD9BC);
    border: 1px solid #E8D9C4; box-shadow: 0 4px 10px #3D342914;
  }
  .side-candle::before {
    content: ''; position: absolute; left: 50%; top: -21px; width: 12px; height: 19px; transform: translateX(-50%);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 70%, #FFF6D8 0%, #F5C26B 55%, #E8A33A 100%);
    box-shadow: 0 0 14px 5px #F5C26B77;
  }
  .side-candle::after {
    content: ''; position: absolute; left: 50%; top: -3px; width: 1.5px; height: 4px; transform: translateX(-50%);
    background: #6B5E52;
  }
  .side-candle.l { left: -36px; } .side-candle.r { right: -36px; }
  .side-candle.r { height: 46px; }
  .hero-copy { min-width: 0; }
  .kicker-line {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gold); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  }
  .dog-name {
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600;
    font-size: 72px; line-height: 1; color: var(--sage-deep); margin-top: 8px; letter-spacing: -.01em;
  }
  .years-line {
    margin-top: 10px; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: .04em;
  }
  .years-line::after {
    content: ''; display: block; width: 160px; height: 3px; margin-top: 14px; border-radius: 4px;
    background: linear-gradient(90deg, var(--gold-soft), var(--blush-deep), transparent);
    box-shadow: 0 0 10px #D4A84B33;
  }
  .forever {
    margin-top: 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
    font-size: 24px; font-weight: 500; color: var(--ink-soft); line-height: 1.3;
  }
  .shared-by {
    display: flex; align-items: center; gap: 10px; margin-top: 16px;
    font-size: 13.5px; color: var(--ink-soft); font-weight: 600;
  }
  .avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
    background: linear-gradient(135deg, var(--blush), var(--gold-pale)); color: var(--ink);
    border: 1.5px solid var(--card-border);
  }
  .shared-by b { color: var(--ink); font-weight: 800; }

  .candle-card {
    margin-top: 24px; padding: 18px 20px;
    background: linear-gradient(105deg, #FFFCF8 0%, #FFF8F0 50%, #F8F5EE 100%);
    border: 1.5px solid var(--card-border); border-radius: 18px;
    box-shadow: 0 4px 24px #D4A84B18, inset 0 1px 0 #fff;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  }
  .total { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
  .total-num { font-size: 34px; font-weight: 900; color: var(--ink); line-height: 1; }
  .total-label { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
  .btn-candle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    color: #3D3429; border: 0; border-radius: 999px;
    padding: 13px 22px; font: 800 15px Nunito, system-ui, sans-serif;
    box-shadow: 0 4px 18px #D4A84B66, inset 0 1px 0 #FFF4DE;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-candle:hover { transform: translateY(-1px); box-shadow: 0 6px 24px #D4A84B88; }
  .row-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
  .lit-today.inline { margin: 0; padding: 6px 16px 6px 6px; gap: 10px; }
  .lit-today.inline .lit-flame { width: 34px; height: 34px; font-size: 16px; }
  .lit-today.inline .lit-count { font-size: 21px; }
  .lit-today.inline .lit-label { font-size: 11px; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: var(--warm-white); color: var(--ink-soft);
    border: 1.5px solid var(--card-border); border-radius: 999px;
    padding: 10px 16px; font: 700 13.5px Nunito, system-ui, sans-serif;
    box-shadow: 0 2px 8px #D4A84B10;
  }
  .btn-ghost:hover { border-color: var(--gold-soft); color: var(--ink); }

  .sections {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; margin-top: 64px; align-items: start;
  }
  .panel {
    background: linear-gradient(160deg, #FFFEFB 0%, #FFFAF3 100%);
    border: 1.5px solid var(--card-border); border-radius: 22px;
    box-shadow: 0 4px 24px #D4A84B14, inset 0 1px 0 #fff;
    padding: 26px 28px 28px;
  }
  .panel h2 {
    display: flex; align-items: center; gap: 10px;
    font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.01em;
  }
  .panel h2 .accent {
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600;
    color: var(--sage-deep); font-size: 1.12em;
  }
  .panel h2 .bloom { font-size: 18px; }
  .panel h2 .count {
    margin-left: auto; font-size: 12px; font-weight: 800; color: var(--ink-mute);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .panel h2::after { display: none; }
  .rule {
    height: 2px; margin: 14px 0 18px; border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-soft), var(--blush-deep) 40%, transparent);
    opacity: .7;
  }
  .story p {
    font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); font-weight: 600;
  }
  .story p + p { margin-top: 12px; }
  .story .quote {
    margin-top: 20px; padding: 16px 20px; border-radius: 16px;
    background: linear-gradient(105deg, #FFF8E8, #FDF1EC);
    border: 1.5px solid #F0DDBA;
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
    font-size: 21px; line-height: 1.4; color: var(--ink); text-align: center;
  }
  .story .quote small {
    display: block; margin-top: 6px; font-family: Nunito, system-ui, sans-serif; font-style: normal;
    font-size: 12px; font-weight: 700; color: var(--ink-mute); letter-spacing: .03em;
  }
  .mock-tag {
    display: inline-block; margin-top: 16px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-mute);
    border: 1px dashed var(--card-border); border-radius: 999px; padding: 4px 10px;
  }

  .notes { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .note {
    display: grid; grid-template-columns: 36px 1fr; gap: 12px;
    padding: 14px 16px; border-radius: 16px;
    background: var(--warm-white); border: 1.5px solid #EFE3D1;
  }
  .note .mark {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 17px; background: radial-gradient(circle at 40% 35%, #FFF8E8, #F5E6C0); border: 1.5px solid #E8C97A;
  }
  .note .mark.flower { background: radial-gradient(circle at 40% 35%, #FFF6F3, #F3D5D0); border-color: var(--blush-deep); }
  .note .who { font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .note .who span { font-weight: 600; color: var(--ink-mute); font-size: 12px; margin-left: 6px; }
  .note .txt { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); font-weight: 600; }
  .note.new { border-color: var(--gold-soft); box-shadow: 0 0 0 3px #D4A84B1F; }

  .leave { margin-top: 18px; }
  .leave label { display: block; font-size: 12.5px; font-weight: 800; color: var(--gold); margin-bottom: 8px; letter-spacing: .02em; }
  .leave-row { display: flex; gap: 10px; }
  .leave input {
    flex: 1; min-width: 0; height: 46px; border-radius: 999px; padding: 0 18px;
    border: 1.5px solid var(--card-border); background: var(--warm-white);
    font: 600 14px Nunito, system-ui, sans-serif; color: var(--ink); outline: none;
    box-shadow: inset 0 1px 3px #3D342908;
  }
  .leave input:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 3px #D4A84B22; }
  .leave input::placeholder { color: var(--ink-mute); }
  .btn-note {
    height: 46px; padding: 0 18px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: linear-gradient(135deg, #FFF8E8, #F5E6C0); color: var(--ink);
    border: 1.5px solid var(--gold-soft); font: 800 14px Nunito, system-ui, sans-serif;
    box-shadow: 0 2px 12px #D4A84B33;
  }

  .back-to {
    text-align: center; margin-top: 44px; font-size: 14px; font-weight: 700; color: var(--ink-mute);
  }
  .back-to a { color: var(--sage-deep); text-decoration: none; border-bottom: 1.5px solid #A8B89A88; padding-bottom: 1px; }
  .back-to a:hover { color: var(--ink); }

  .toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0;
    background: var(--ink); color: #FFF8F0; padding: 10px 18px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; z-index: 10; transition: all .25s ease; pointer-events: none;
  }
  .toast.on { opacity: 1; transform: translate(-50%, 0); }

  @media (max-width: 900px) {
    header { padding: 14px 16px 4px; gap: 12px; }
    .search { max-width: 200px; }
    .hero { grid-template-columns: 320px 1fr; gap: 36px; }
    .dog-name { font-size: 58px; }
    .sections { grid-template-columns: 1fr; }
  }
  @media (max-width: 700px) {
    main.profile { padding: 12px 16px 56px; }
    .header-icons { display: none; }
    .search { max-width: none; min-width: 0; }
    .side-candle { width: 16px; height: 46px; } .side-candle.r { height: 36px; }
    .hero { grid-template-columns: 1fr; gap: 30px; margin-top: 14px; }
    .ofrenda { width: 100%; max-width: 262px; margin: 0 auto; }
    .flag { width: 30px; height: 32px; }
    .side-candle.l { left: -24px; } .side-candle.r { right: -24px; }
    .hero-copy { text-align: center; }
    .dog-name { font-size: 54px; }
    .years-line { font-size: 18px; }
    .years-line::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, transparent, var(--gold-soft), var(--blush-deep), var(--gold-soft), transparent); }
    .forever { font-size: 21px; }
    .shared-by { justify-content: center; }
    .candle-card { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; padding: 16px; }
    .total { justify-content: center; }
    .btn-candle { justify-content: center; }
    .row-actions { justify-content: center; flex-wrap: nowrap; gap: 8px; margin-top: 12px; }
    .lit-today.inline { padding-right: 12px; gap: 8px; }
    .lit-today.inline .lit-label { font-size: 10px; letter-spacing: .04em; }
    .btn-ghost { padding: 9px 13px; }
    .dog-name { margin-top: 4px; }
    .forever { margin-top: 10px; }
    .shared-by { margin-top: 10px; }
    .candle-card { margin-top: 16px; }
    .sections { margin-top: 28px; gap: 18px; }
    .panel { padding: 22px 18px 22px; border-radius: 20px; }
    .story p { font-size: 15px; }
    .leave-row { flex-direction: column; }
    .btn-note { width: 100%; }
    .footer-blooms { left: 12px; right: 12px; font-size: 22px; }
  }