:root{
    --cream:#FFF8F0; --pink:#FF8FAB; --pink-deep:#E85D75; --blue:#8ECAE6; --blue-deep:#5FA8CC;
    --gold:#F5B942; --gold-deep:#B5790E; --plum:#3A2E39; --muted:#8B7E89; --white:#FFFFFF;
    --line:#F0E3E7; --good:#4FA37B;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{ font-family:'Quicksand', sans-serif; color:var(--plum); background:var(--cream); min-height:100vh; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font-family:inherit; }

  /* ================= HEADER ================= */
  header{ background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:80; }
  .header-top{ max-width:1280px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .cube-logo{ width:38px; height:38px; flex-shrink:0; }
  .brand-name{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:20px; color:var(--plum); }
  .brand-name span{ color:var(--pink-deep); }
  .header-search{ flex:1; max-width:380px; position:relative; display:none; }
  .header-search input{ width:100%; padding:10px 16px 10px 40px; border-radius:999px; border:2px solid var(--line); background:var(--cream); font-family:'Quicksand', sans-serif; font-size:14px; font-weight:500; color:var(--plum); outline:none; }
  .header-search input:focus{ border-color:var(--pink); background:var(--white); }
  .header-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); }
  .header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .btn-ghost{ padding:10px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--white); font-weight:700; font-size:13.5px; color:var(--plum); cursor:pointer; }
  .btn-ghost:hover{ border-color:var(--pink); color:var(--pink-deep); }
  .btn-solid{ padding:10px 20px; border-radius:999px; border:none; background:linear-gradient(120deg, var(--pink-deep), var(--pink)); color:var(--white); font-family:'Fredoka', sans-serif; font-weight:600; font-size:13.5px; cursor:pointer; box-shadow:0 8px 16px rgba(232,93,117,0.26); }
  .btn-solid:hover{ transform:translateY(-1px); }
  @media (min-width:760px){ .header-search{ display:block; } }

  nav.mainnav{ border-top:1px solid var(--line); }
  .nav-inner{ max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
  .nav-item{ position:relative; }
  .nav-link{ display:flex; align-items:center; gap:6px; padding:14px 15px; font-size:14px; font-weight:600; color:var(--plum); white-space:nowrap; border-bottom:2.5px solid transparent; }
  .nav-link .chev{ width:10px; height:10px; transition:transform .18s ease; }
  .nav-item.open .nav-link .chev{ transform:rotate(180deg); }
  .nav-item:hover .nav-link, .nav-item.open .nav-link, .nav-link.active{ color:var(--pink-deep); border-bottom-color:var(--pink-deep); }
  .dropdown{ position:absolute; top:100%; left:0; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 36px rgba(58,46,57,0.16); padding:10px; min-width:220px; display:none; grid-template-columns:1fr 1fr; gap:2px; z-index:60; }
  .nav-item:hover .dropdown, .nav-item.open .dropdown{ display:grid; }
  .dropdown a{ padding:8px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--plum); }
  .dropdown a:hover{ background:var(--cream); color:var(--pink-deep); }
  @media (max-width:1000px){ .nav-inner{ overflow-x:auto; flex-wrap:nowrap; } }

  /* ================= PAGE ================= */
  .page-banner{
    background:linear-gradient(155deg, var(--gold) 0%, #FFD98F 45%, var(--pink) 100%);
    padding:34px 24px 40px;
  }
  .banner-inner{ max-width:1200px; margin:0 auto; }
  .breadcrumb{ font-size:13px; font-weight:600; color:rgba(58,46,57,0.75); margin-bottom:12px; }
  .breadcrumb a{ color:var(--white); font-weight:700; }
  .banner-inner h1{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:clamp(24px,4vw,32px); color:var(--white); margin-bottom:12px; }
  .banner-inner p{ color:rgba(58,46,57,0.82); font-size:14.5px; max-width:1040px; line-height:1.6; font-weight:500; }

  main{ max-width:1200px; margin:0 auto; padding:36px 24px 90px; }
  .layout{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; }

  .content-card{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:30px; }
  .content-card > h2{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:18px; margin-bottom:22px; }

  /* Jump-to letter strip */
  .jump-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:30px; }
  .jump-row a{
    width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    background:var(--cream); font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px; color:var(--plum);
  }
  .jump-row a:hover{ background:var(--pink-deep); color:var(--white); }

  .origin-section{ margin-bottom:30px; scroll-margin-top:90px; }
  .origin-section:last-child{ margin-bottom:0; }
  .origin-letter-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
  .origin-badge{
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    background:linear-gradient(135deg, var(--pink), var(--gold));
    display:flex; align-items:center; justify-content:center;
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:14px; color:var(--white);
  }
  .origin-letter-head h3{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:16px; }
  .origin-list{ columns:3; column-gap:20px; }
  .origin-list a{
    display:block; padding:7px 0; font-size:13.5px; font-weight:600; color:var(--plum);
    break-inside:avoid;
  }
  .origin-list a:hover{ color:var(--pink-deep); }

  @media (max-width:700px){ .origin-list{ columns:2; } }
  @media (max-width:480px){ .origin-list{ columns:1; } }

  /* ---- Sidebar ---- */
  .sidebar{ display:flex; flex-direction:column; gap:18px; position:sticky; top:96px; }
  .side-card{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:20px; }
  .side-card h3{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; margin-bottom:14px; }

  .notd{ text-align:center; }
  .notd-avatar{
    width:64px; height:64px; border-radius:50%; margin:0 auto 12px;
    background:linear-gradient(135deg, var(--pink), var(--gold));
    display:flex; align-items:center; justify-content:center;
  }
  .notd-avatar svg{ width:28px; height:28px; color:var(--white); }
  .notd h4{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:19px; margin-bottom:6px; }
  .gender-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
  .gender-pill.girl{ background:#FFEFF2; color:var(--pink-deep); }
  .gender-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

  .cat-tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .cat-tags a{ padding:7px 13px; border-radius:999px; background:var(--cream); font-size:12.5px; font-weight:600; color:var(--plum); }
  .cat-tags a:hover{ background:#FFEFF2; color:var(--pink-deep); }

  .blog-mini{ /*display:flex; gap:11px;*/ margin-bottom:14px; }
  .blog-mini:last-child{ margin-bottom:0; }
.blog-mini-thumb{ width:300px; height:150px; border-radius:11px; /*flex-shrink:0;*/ }
  .blog-mini h5{ font-size:12.5px; font-weight:700; line-height:1.4; }
  .blog-mini h5:hover{ color:var(--pink-deep); }

  @media (max-width:900px){
    .layout{ grid-template-columns:1fr; }
    .sidebar{ position:static; }
  }

  /* ================= FOOTER ================= */
  /*footer{ background:var(--plum); color:rgba(255,255,255,0.86); padding:44px 24px 24px; }
  .footer-inner{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
  .footer-links{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; }
  .footer-links a:hover{ color:var(--gold); }
  .footer-bottom{ max-width:1200px; margin:22px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:rgba(255,255,255,0.5); }
  .footer-bottom a{ color:rgba(255,255,255,0.7); }*/
  /* A-Z filter */

  .az-row{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
  .az-row a{
    width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--white); border:1px solid var(--line);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:13.5px; color:var(--plum);
  }
  .az-row a:hover, .az-row a.active{ border-color:var(--pink); color:var(--white); background:var(--pink-deep); }

  /* Names table */
  .table-card{ background:var(--white); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:22px; }
  .table-card table{ width:100%; }
  .table-card thead th{
    text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
    color:var(--muted); padding:14px 22px; background:var(--cream); border-bottom:1px solid var(--line);
  }
  .table-card tbody td{ padding:13px 22px; font-size:14px; border-bottom:1px solid var(--line); }
  .table-card tbody tr:last-child td{ border-bottom:none; }
  .table-card tbody tr:hover{ background:#FFFBF6; }
  .table-card a.name-link{ font-weight:700; color:var(--plum); }
  .table-card a.name-link:hover{ color:var(--pink-deep); }
  .numero{ font-family:'Fredoka', sans-serif; font-weight:600; color:var(--gold-deep); }

  .pagination{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
  .pagination a, .pagination span{
    min-width:36px; height:36px; padding:0 10px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--plum);
    border:1px solid var(--line); background:var(--white);
  }
  .pagination a:hover{ border-color:var(--pink); color:var(--pink-deep); }
  .pagination .current{ background:var(--plum); border-color:var(--plum); color:var(--white); }
  .pagination .next{ gap:6px; padding:0 14px; }
  .pagination .next svg{ width:13px; height:13px; }


  /* ---- Sidebar ---- */
  .sidebar{ display:flex; flex-direction:column; gap:18px; position:sticky; top:96px; }
  .side-card{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:20px; }
  .side-card h3{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; margin-bottom:14px; }

  .birthday-row{ display:flex; align-items:center; gap:11px; }
  .birthday-avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#8ECAE6,#5FA8CC); display:flex; align-items:center; justify-content:center; color:var(--white); font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; flex-shrink:0; }
  .birthday-row h4{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px; }
  .birthday-row p{ font-size:12px; color:var(--muted); font-weight:600; }

  /* quick link */

  .quicklinks{ display:flex; flex-wrap:wrap; gap:9px; }
  .quicklinks a{
    background:rgba(255,255,255,0.9); color:var(--plum);
    font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px;
  }
  .quicklinks a:hover{ background:var(--white); color:var(--pink-deep); }
  .content-card p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--plum);
    margin-bottom: 14px;
}