/* layout-base.css - stiluri comune pentru layout_classic.php si layout_modern.php.
 * Variabilele de culoare si stilurile specifice fiecarui layout raman inline, in <style>-ul
 * din layout, care se incarca DUPA acest fisier (deci il poate suprascrie).
 * Fisier generat automat din cele doua layout-uri; ordinea regulilor e cea originala. */
    /* Enhanced Reset */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: clamp(14px, 1.5vw, 16px);
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      color: var(--text);
      background: 
        radial-gradient(1400px 900px at 85% -15%, rgba(79,209,197,0.18), transparent 65%),
        radial-gradient(1200px 800px at -5% 110%, rgba(122,162,255,0.20), transparent 65%),
        radial-gradient(800px 600px at 50% 50%, rgba(249,168,38,0.08), transparent 70%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
      background-attachment: fixed;
      line-height: 1.6;
      letter-spacing: 0.01em;
      overflow-x: hidden;
    }

    a {
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition-fast);
    }

    a:hover {
      color: var(--primary-light);
      text-decoration: underline;
    }

    .container {
      width: min(1200px, 94%);
      margin: 0 auto;
      padding: 0 var(--spacing);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      gap: 1rem;
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      text-decoration: none;
      color: inherit;
    }

    .logo {
      width: 32px;
      height: 32px;
      border-radius: 10px;
	  background-image: url("/assets/cool.png");
	  background-size: cover;
      box-shadow: 0 8px 20px rgba(79, 209, 197, 0.4);
      position: relative;
      overflow: hidden;
    }

    .logo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
      transform: translateX(-100%);
      animation: shimmer 3s infinite;
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .nav .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, var(--cta), var(--cta-light));
      color: var(--bg);
      font-weight: 600;
      border: none;
      border-radius: 12px;
      padding: 12px 18px;
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: var(--transition);
      font-size: 14px;
    }

    .nav .cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 40px rgba(249, 168, 38, 0.4);
    }

    /* Enhanced Hero Section */
    .hero {
      padding: clamp(48px, 8vh, 80px) 0 clamp(32px, 6vh, 64px);
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 100%;
      background: radial-gradient(600px 400px at 50% 20%, rgba(79,209,197,0.15), transparent);
      pointer-events: none;
      z-index: -1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: clamp(24px, 5vw, 48px);
      align-items: flex-start;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: 12px;
      background: rgba(79, 209, 197, 0.1);
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid rgba(79, 209, 197, 0.2);
      margin-bottom: 16px;
    }

    .creation-effort {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: 0.01em;
    }

    .contributors-hero {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 8px 0 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
      font-weight: 500;
    }

    .contributors-avatars {
      display: inline-flex;
      align-items: center;
      padding-left: 2px;
    }

    .contributors-avatar.has-photo {
      padding: 0;
      background: rgba(255, 255, 255, 0.08);
    }

    .contributors-avatar-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .contributors-avatar:first-child,
    .contributors-overflow:first-child {
      margin-left: 0;
    }

    .contributors-avatar.is-new {
      opacity: 0;
      transform: translateY(4px) scale(0.95);
    }

    .contributors-avatar.is-new.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .viewer-greeting {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 16px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid rgba(79, 209, 197, 0.28);
      background: rgba(79, 209, 197, 0.10);
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.25;
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    .viewer-greeting[hidden],
    .viewer-greeting:empty {
      display: none !important;
    }

    .surprise-signature {
      color: var(--muted-light);
      font-size: clamp(17px, 2.1vw, 22px);
      font-weight: 600;
      font-style: italic;
      margin-top: 10px;
      letter-spacing: 0.01em;
    }

    .surprise-message {
      font-size: clamp(18px, 2.2vw, 24px);
      line-height: 1.6;
      font-style: italic;
      color: var(--text-secondary);
    }

    h1 {
      font-size: clamp(36px, 6vw, 72px);
      line-height: 1.05;
      margin: 0 0 20px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--text), var(--primary-light), var(--accent-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
    }

    .hero-title-wrap {
      position: relative;
      display: inline-block;
      max-width: 100%;
      margin: 0 0 20px;
    }

    /* When the hero title is editable, make the wrapper behave as a block
       so the inline edit form can take the full column width next to the photo */
    .hero-title-wrap.owner-editable-zone {
      display: block;
      width: 100%;
    }

    .hero-mobile-medallion img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .hero-reveal-block {
      position: relative;
      margin: 0 0 16px;
      border-radius: 16px;
      overflow: hidden;
    }

    .hero-reveal-content {
      transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    }

    .hero-reveal-content.is-masked {
      filter: blur(7px);
      opacity: 0.2;
      transform: scale(0.995);
      pointer-events: none;
      user-select: none;
    }

    .hero-title-wrap h1 {
      margin: 0;
    }

    .tap-reveal.is-done {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .hero-title-hidden {
      display: block;
      filter: blur(7px);
      opacity: 0.18;
      transform: scale(0.99);
      transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
    }

    .hero-title-revealed {
      display: block;
      filter: blur(0);
      opacity: 1;
      transform: scale(1);
      animation: titleReveal 0.55s ease;
    }

    @keyframes titleReveal {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .h-sub {
      color: var(--muted-light);
      max-width: 65ch;
      font-size: clamp(16px, 2.5vw, 18px);
      line-height: 1.7;
      margin-bottom: 32px;
    }

    /* Enhanced Cards */
    .card {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
      opacity: 0;
      transition: var(--transition);
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: var(--shadow-heavy);
    }

    .card:hover::before {
      opacity: 1;
    }

    .photo-card {
      padding: 20px;
      display: grid;
      gap: 16px;
    }

    .photo-frame {
      width: 100%;
      /* --photo-ratio e setat din JS dupa proportia reala a fotografiei (limitata intre 4:5 si 16:9). */
      aspect-ratio: var(--photo-ratio, 4 / 5);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.05);
      transition: var(--transition);
    }

    .photo-card.is-landscape .photo-frame {
      aspect-ratio: var(--photo-ratio, 16 / 10);
    }

    .photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: var(--photo-focus, 50% 50%);
      transition: var(--transition);
    }

    /* Fotografia umple mereu cadrul (fara dungi). Cadrul se adapteaza la proportia ei,
       deci se decupeaza doar pozele foarte inalte sau foarte late, si doar putin. */
    .photo-card.is-landscape .photo {
      object-fit: cover;
    }

    .photo-frame:hover .photo {
      transform: scale(1.02);
    }

    .photo-caption {
      font-size: 14px;
      color: var(--muted);
      text-align: center;
      line-height: 1.5;
    }

    .praise .item {
      padding: 24px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .qualities-zone .item {
      background: var(--panel, #f5f5f5);
      border-color: rgba(255, 255, 255, 0.10);
      color: var(--text);
    }

    .praise .item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--accent), var(--cta));
      opacity: 0;
      transition: var(--transition);
    }

    .praise .item:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .praise .item:hover::before {
      opacity: 1;
    }

    .praise .item b {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .praise .item p {
      color: var(--muted-light);
      line-height: 1.6;
    }

    /* Enhanced Buttons */
    .cta-wrap {
      margin: 32px 0 24px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .owner-inline-editor {
      margin-top: 16px;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
    }

    .owner-inline-editor h3 {
      margin: 0 0 10px;
      font-size: 18px;
      color: var(--text);
    }

    .owner-inline-editor .helper {
      margin: 0 0 14px;
      color: var(--muted-light);
      font-size: 14px;
    }

    .owner-inline-grid {
      display: grid;
      gap: 12px;
    }

    .owner-inline-editor textarea,
    .owner-inline-editor input[type="text"] {
      width: 100%;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(3, 8, 20, 0.5);
      color: var(--text);
      padding: 12px;
      font: inherit;
    }

    .owner-inline-editor textarea {
      min-height: 96px;
      resize: vertical;
    }

    .owner-inline-qualities {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 8px;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.02);
      max-height: 240px;
      overflow: auto;
    }

    .owner-inline-qualities label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--muted-light);
    }

    .owner-inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 8px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 24px;
      border-radius: 14px;
      border: none;
      cursor: pointer;
      font-weight: 600;
      font-size: 15px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: #07121f;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
      box-shadow: var(--shadow);
      transition: var(--transition);
      text-decoration: none;
      position: relative;
      overflow: hidden;
    }

    .button::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.10));
      opacity: 0;
      transition: var(--transition);
    }

    .button:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 40px rgba(79, 209, 197, 0.4);
      color: #030a13;
    }

    .button:hover::before {
      opacity: 0.35;
    }

    .button > * {
      position: relative;
      z-index: 1;
    }

    .button.secondary {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .button.secondary::before {
      background: rgba(255, 255, 255, 0.12);
    }

    .button.secondary:hover {
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
    }

    .button.secondary:hover::before {
      opacity: 0.55;
    }

    .like-button {
      min-width: 240px;
      justify-content: center;
    }

    .photo-like-wrap {
      display: flex;
      justify-content: center;
      margin-top: 4px;
    }

    .like-button.is-liked {
      border-color: rgba(81, 207, 102, 0.5);
      background: rgba(81, 207, 102, 0.12);
    }

    .like-button:disabled {
      cursor: default;
      opacity: 0.8;
      transform: none;
    }

    .like-count {
      display: none;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      line-height: 1.2;
    }

    /* Enhanced Sections */
    .section {
      padding: clamp(40px, 8vh, 80px) 0;
    }

    .section h2 {
      font-size: clamp(28px, 4vw, 42px);
      margin: 0 0 12px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--text), var(--primary-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section .muted {
      color: var(--muted-light);
      font-size: 18px;
      margin-bottom: 32px;
    }

    .comment-cta-wrap {
      text-align: center;
    }

    .comment-invite-text {
      margin: 14px auto 10px;
      max-width: 760px;
      color: var(--muted-light);
      font-size: 15px;
      line-height: 1.65;
    }

    .comment-invite-link {
      display: inline-block;
      margin-top: 8px;
      color: var(--primary-light);
      font-weight: 600;
      word-break: break-all;
    }

    .comment-invite-actions {
      margin-top: 12px;
      display: flex;
      justify-content: center;
    }

    /* Enhanced Steps */
    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 32px;
    }

    .step {
      padding: 32px 24px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.04);
      transition: var(--transition);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .step::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(from 0deg, var(--primary), var(--accent), var(--cta), var(--primary));
      opacity: 0;
      transition: var(--transition);
      animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .step::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 16px;
      transition: var(--transition);
    }

    .step:hover::before {
      opacity: 0.1;
    }

    .step:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .step > * {
      position: relative;
      z-index: 1;
    }

    .step .num {
      display: inline-grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: var(--bg);
      font-weight: 800;
      font-size: 20px;
      margin-bottom: 16px;
      box-shadow: 0 8px 20px rgba(79, 209, 197, 0.3);
    }

    .step .muted {
      font-size: 14px;
      line-height: 1.5;
    }

    /* Enhanced Gallery */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 16px;
      margin-top: 32px;
    }

    .gallery img:hover {
      opacity: 1;
      transform: translateY(-4px) scale(1.02);
      border-color: rgba(79, 209, 197, 0.5);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

    /* Enhanced Stats */
    .stats {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 24px;
    }

    .stat {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.05);
      transition: var(--transition);
      font-size: 14px;
      font-weight: 500;
    }

    .stat:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

    /* Enhanced Share Bar */
    .sharebar {
      position: sticky;
      bottom: 20px;
      z-index: 40;
      margin: 0 var(--spacing);
      opacity: 0;
      visibility: hidden;
      transform: translateY(16px);
      pointer-events: none;
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    }

    .sharebar.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .exit-intent-bar {
      position: fixed;
      left: 50%;
      top: calc(12px + env(safe-area-inset-top, 0px));
      transform: translate(-50%, -18px) scale(0.97);
      width: min(720px, calc(100% - 24px));
      z-index: 58;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
    }

    .exit-intent-bar.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0) scale(1);
    }

    .exit-intent-bar-card {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 12px;
      align-items: center;
      background:
        linear-gradient(135deg, rgba(249, 168, 38, 0.22), rgba(79, 209, 197, 0.18)),
        rgba(13, 20, 33, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 16px;
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
      backdrop-filter: blur(10px);
      padding: 14px 14px 14px 16px;
    }

    .exit-intent-copy {
      font-size: 14px;
      line-height: 1.45;
      color: #eaf4ff;
      letter-spacing: 0.01em;
    }

    .exit-intent-action {
      white-space: nowrap;
      border: 0;
      border-radius: 11px;
      padding: 10px 14px;
      font-weight: 700;
      color: #0b1220;
      background: linear-gradient(135deg, #f9c34d, #4fd1c5);
      box-shadow: 0 10px 24px rgba(79, 209, 197, 0.26);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .exit-intent-action:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(79, 209, 197, 0.34);
    }

    .exit-intent-close {
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.06);
      color: #d8e7ff;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      transition: background 0.2s ease;
    }

    .exit-intent-close:hover {
      background: rgba(255, 255, 255, 0.14);
    }
    @media (max-width: 760px) {
      .exit-intent-bar-card {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          'copy close'
          'cta cta';
      }

      .exit-intent-copy {
        grid-area: copy;
      }

      .exit-intent-close {
        grid-area: close;
        justify-self: end;
      }

      .exit-intent-action {
        grid-area: cta;
        width: 100%;
      }    }

    /* Enhanced Footer */
    footer {
      padding: 60px 0 40px;
      color: var(--muted);
      text-align: center;
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    footer .container {
      display: grid;
      justify-items: center;
      gap: 10px;
    }

    .footer-meta {
      max-width: 890px;
      line-height: 1.6;
    }

    .footer-actions {
      margin-top: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 0;
      border: 0;
      background: transparent;
      backdrop-filter: none;
    }

    .footer-toggle-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted-light);
      cursor: pointer;
      font-size: 12px;
      font-weight: 400;
      opacity: 0.72;
    }

    .footer-toggle-label input {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--primary);
    }

    .footer-separator {
      color: rgba(255, 255, 255, 0.16);
      user-select: none;
    }

    .footer-action-link {
      color: var(--muted-light);
      text-decoration: none;
      opacity: 0.48;
      font-weight: 500;
      font-size: 12px;
      transition: var(--transition);
      border-bottom: 1px solid transparent;
      line-height: 1.2;
    }
    @media (max-width: 760px) {
      .footer-actions {
        gap: 6px;
        line-height: 1.7;
      }

      .footer-separator {
        display: none;
      }

      .footer-action-link,
      .footer-toggle-label {
        font-size: 11px;
      }    }

    footer a {
      color: var(--primary);
      font-weight: 500;
    }

    /* Enhanced Modal */
    .modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      z-index: 60;
      opacity: 0;
      transition: opacity 0.3s ease;
      padding: 16px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    .modal.open {
      display: flex;
      opacity: 1;
    }

    html.modal-open,
    body.modal-open {
      overflow: hidden;
      overscroll-behavior: none;
      height: 100%;
    }

    body.modal-open {
      position: fixed;
      inset: 0;
      width: 100%;
    }

    .modal .panel {
      width: min(600px, 94%);
      max-height: calc(var(--modal-vh, 100vh) - 32px);
      background: rgba(16, 24, 38, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 20px;
      box-shadow: var(--shadow-heavy);
      padding: 32px;
      overflow: auto;
      transform: scale(0.95);
      transition: transform 0.3s ease;
    }

    #builder-modal .panel {
      position: relative;
      padding-top: 44px;
      width: min(600px, 100%);
      max-width: 100%;
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }

    #builder-modal .form,
    #builder-modal .form > *,
    #builder-modal .file-upload-wrap,
    #builder-modal #preview,
    #builder-modal .preview-content,
    #builder-modal .preview-text,
    #builder-modal .preview-actions {
      min-width: 0;
      max-width: 100%;
    }

    #builder-modal .preview-content {
      flex-wrap: wrap;
    }

    #builder-modal .preview-text {
      overflow-wrap: anywhere;
    }

    .modal-close-top {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .modal-close-top:hover {
      background: rgba(255, 255, 255, 0.16);
      transform: translateY(-1px);
    }

    body.modal-open.modal-keyboard-open .modal {
      align-items: flex-start;
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 260px);
    }

    #comment-modal .panel.comment-panel {
      width: min(860px, 96%);
      height: min(86vh, 760px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .comment-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(9, 14, 23, 0.86);
    }

    .comment-modal-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    .comment-modal-close {
      border: 1px solid rgba(255, 255, 255, 0.20);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      width: 38px;
      height: 38px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
      transition: var(--transition);
    }

    .comment-modal-close:hover {
      background: rgba(255, 255, 255, 0.14);
      transform: translateY(-1px);
    }

    .comment-modal-frame {
      flex: 1;
      width: 100%;
      border: 0;
      background: transparent;
    }

    #full-comment-modal .panel.full-comment-panel {
      width: min(720px, 94vw);
      max-height: 86vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .full-comment-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(9, 14, 23, 0.86);
    }

    .full-comment-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    .full-comment-close {
      border: 1px solid rgba(255, 255, 255, 0.20);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      width: 38px;
      height: 38px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
      transition: var(--transition);
    }

    .full-comment-close:hover {
      background: rgba(255, 255, 255, 0.14);
      transform: translateY(-1px);
    }

    .full-comment-body {
      padding: 18px 20px 22px;
      overflow: auto;
      display: grid;
      gap: 12px;
    }

    .full-comment-author {
      color: var(--primary-light);
      font-weight: 700;
      font-size: 14px;
    }

    .full-comment-content {
      margin: 0;
      white-space: pre-wrap;
      line-height: 1.7;
      color: var(--text-secondary);
      font-size: 15px;
    }

    #wall-image-lightbox-modal .panel {
      width: min(1100px, 96vw);
      padding: 12px;
      position: relative;
      background: rgba(6, 8, 12, 0.98);
    }

    .wall-image-lightbox-image {
      display: block;
      width: 100%;
      max-width: 100%;
      max-height: calc(var(--modal-vh, 100vh) - 56px);
      object-fit: contain;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.02);
    }

    .modal.open .panel {
      transform: scale(1);
    }

    .modal h3 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--text-secondary);
    }

    .modal p {
      color: var(--muted);
      margin-bottom: 24px;
    }

    .form {
      display: grid;
      gap: 20px;
      margin-top: 16px;
    }

    .form label {
      font-size: 14px;
      color: var(--muted-light);
      font-weight: 500;
      margin-bottom: 6px;
    }

    .form input,
    .form select,
    .form textarea {
      width: 100%;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      transition: var(--transition);
      font-size: 14px;
      font-family: inherit;
    }

    .file-upload-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.04);
      flex-wrap: wrap;
    }

    .file-upload-input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      white-space: nowrap;
      clip-path: inset(50%);
      clip: rect(0 0 0 0);
      overflow: hidden;
    }

    .file-upload-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(79, 209, 197, 0.4);
      background: rgba(79, 209, 197, 0.14);
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .file-upload-trigger:hover {
      background: rgba(79, 209, 197, 0.24);
      border-color: rgba(79, 209, 197, 0.55);
    }

    .file-upload-name {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      word-break: break-word;
    }

    .form select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      background-image: linear-gradient(45deg, transparent 50%, var(--muted-light) 50%), linear-gradient(135deg, var(--muted-light) 50%, transparent 50%);
      background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
      padding-right: 40px;
    }

    .form select option {
      background-color: #101826;
      color: #eaf0f7;
    }

    .form input:focus,
    .form select:focus,
    .form textarea:focus {
      outline: none;
      border-color: var(--primary);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.15);
    }

    .form .actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 8px;
    }

    .form .actions .button {
      padding: 12px 20px;
    }

    /* Preview Card in Modal */
    #preview {
      margin-top: 20px;
      animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    #preview .preview-content {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 20px;
    }

    #preview-img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 12px;
      border: 2px solid rgba(255, 255, 255, 0.15);
    }

    #preview .preview-text h4 {
      margin: 0 0 4px;
      font-size: 18px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    #preview .preview-text .url {
      font-family: 'Space Grotesk', monospace;
      color: var(--muted);
      font-size: 14px;
    }

    #preview .preview-text .main-title {
      margin: 10px 0 6px;
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
    }

    #preview .preview-text .main-message {
      margin: 0;
      color: var(--muted-light);
      font-size: 13px;
      line-height: 1.5;
      max-width: 52ch;
      white-space: pre-wrap;
    }

    #preview .preview-text .main-signature {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    #preview .preview-actions {
      padding: 16px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }

    .notification.show {
      transform: translateX(0);
    }

    /* Loading States */
    .loading {
      position: relative;
      overflow: hidden;
    }

    .loading::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
      transform: translateX(-100%);
      animation: loading 2s infinite;
    }

    @keyframes loading {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* Responsive Design */
    @media (max-width: 900px) {
      .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .hero-title-wrap {
        margin-top: 0;
      }

      .steps {
        grid-template-columns: 1fr;
      }

      .stats {
        justify-content: center;
      }

      .cta-wrap {
        justify-content: center;
      }    }

    @media (max-width: 600px) {
      .container {
        width: min(100%, 95%);
        padding: 0 16px;
      }

      .nav {
        padding: 12px 0;
        gap: 8px;
      }

      .nav .cta {
        padding: 10px 14px;
        font-size: 13px;
      }

      .stats {
        flex-direction: column;
        align-items: center;
      }

      .modal .panel {
        width: 100%;
        padding: 24px 20px;
      }

      #builder-modal .panel {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
      }

      #builder-modal .preview-content {
        flex-direction: column;
        align-items: stretch;
      }

      #builder-modal #preview-img {
        width: 80px;
        max-width: 100%;
      }

      .modal {
        align-items: flex-start;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
      }

      .form .actions {
        flex-direction: column;
      }

      #comment-modal .panel.comment-panel {
        width: min(100%, 100%);
        height: calc(var(--modal-vh, 100vh) - 16px);
        border-radius: 0;
      }    }

	
	    /* responsive */
    @media (max-width: 920px) {
      .hero { grid-template-columns: 1fr; }
      .purpose { grid-template-columns: 1fr; }
      .grid { grid-template-columns: 1fr 1fr; }
      .testimonial-card { min-width: 300px; }    }

    @media (max-width: 620px) {
      .grid { grid-template-columns: 1fr; }
      .testimonial-card { min-width: 280px; }    }

	
    /* testimonials carousel */
    .testimonials { padding: 10px 0 36px; }
    .testimonials h2 { text-align: center; margin-bottom: 32px; }
    .carousel-container { position: relative; overflow: hidden; }
    .carousel-track { display: flex; gap: 20px; transition: transform 0.5s ease; }
    .testimonials.all-visible .carousel-track {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-flow: dense;
      gap: 22px;
      transform: none !important;
      align-items: stretch;
    }
    .testimonials.all-visible .carousel-container { overflow: visible; }
    .testimonials.all-visible .testimonial-card {
      min-width: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    }
    .testimonials.all-visible .carousel-nav { display: none; }
    .testimonials.all-visible .testimonial-card.brick-wide { grid-column: span 2; }
    .testimonials.all-visible .testimonial-card::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.08), transparent 55%);
      opacity: 0.55;
    }
    .testimonials.all-visible .testimonial-card > * {
      position: relative;
      z-index: 1;
    }
    .testimonials.all-visible .testimonial-card.brick-tone-1 {
      border-color: rgba(79, 209, 197, 0.28);
      box-shadow: 0 14px 36px rgba(79, 209, 197, 0.10), 0 10px 32px rgba(0,0,0,0.28);
    }
    .testimonials.all-visible .testimonial-card.brick-tone-2 {
      border-color: rgba(122, 162, 255, 0.30);
      box-shadow: 0 14px 36px rgba(122, 162, 255, 0.12), 0 10px 32px rgba(0,0,0,0.28);
    }
    .testimonials.all-visible .testimonial-card.brick-tone-3 {
      border-color: rgba(249, 168, 38, 0.28);
      box-shadow: 0 14px 36px rgba(249, 168, 38, 0.10), 0 10px 32px rgba(0,0,0,0.28);
    }
    .testimonials.all-visible .testimonial-card.brick-lift {
      transform: translateY(-8px);
    }
    .testimonials.all-visible .testimonial-card.brick-drop {
      transform: translateY(8px);
    }
    .testimonials.all-visible .testimonial-text {
      font-size: 15px;
      line-height: 1.72;
      color: #d4dcea;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .testimonial-card { 
      min-width: 340px; background: var(--card); 
      border: 1px solid rgba(255,255,255,0.08); 
      border-radius: 18px; padding: 24px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    }
    .testimonial-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
    .testimonial-avatar { 
      width: 48px; height: 48px; border-radius: 50%; 
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      display: grid; place-items: center; font-weight: 800; color: #0a0a0f;
      font-size: 18px;
    }
    .testimonial-name { font-weight: 700; margin: 0; }
    .testimonial-role { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
    .testimonial-text {
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
    }
    .testimonial-text.is-truncated {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .testimonial-read-more {
      margin-top: 10px;
      display: inline-block;
      color: var(--primary-light);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px dashed rgba(110, 231, 220, 0.5);
      cursor: pointer;
    }
    .testimonial-read-more:hover {
      color: var(--text);
      border-bottom-color: rgba(230, 241, 255, 0.65);
    }
    @media (max-width: 1200px) {
      .testimonials.all-visible .carousel-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }    }

    @media (max-width: 860px) {
      .testimonials.all-visible .carousel-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .testimonials.all-visible .testimonial-card.brick-wide { grid-column: span 1; }
      .testimonials.all-visible .testimonial-card.brick-lift,
      .testimonials.all-visible .testimonial-card.brick-drop { transform: none; }    }

    @media (max-width: 620px) {
      .testimonials.all-visible .carousel-track { grid-template-columns: 1fr; }    }

    .carousel-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 18px;
    }
    .carousel-btn {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08);
      color: var(--text);
      cursor: pointer;
      transition: var(--transition);
      font-size: 18px;
      line-height: 1;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
    }
    .carousel-btn:hover {
      background: rgba(255,255,255,0.14);
      transform: translateY(-1px);
    }
    .carousel-btn:disabled {
      opacity: 0.35;
      cursor: default;
      transform: none;
    }
    .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
    .carousel-nav .carousel-dots { margin-top: 0; }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s ease; }
    .dot.active { background: var(--primary); width: 24px; border-radius: 4px; }
    @media (max-width: 620px) {
      .carousel-btn {
        width: 42px;
        height: 42px;
      }    }

    /* Enhanced Confetti Animation */
    #confetti {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 10;
    }

    #cinematic-underlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    #cinematic-underlay.is-fading {
      opacity: 0;
      visibility: hidden;
    }

    #fake-loading[aria-hidden="true"] {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    #fake-loading.is-cinematic .fake-loading-box {
      width: min(640px, 94vw);
      padding: 34px 28px;
    }

    .fake-loading-title {
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      font-weight: 700;
      margin-bottom: 10px;
    }

    .fake-loading-text {
      font-size: clamp(18px, 3vw, 26px);
      font-weight: 700;
      color: var(--text-secondary);
      min-height: 1.6em;
    }

    .fake-loading-name-big.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .fake-loading-avatars {
      margin: 18px 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding-left: 6px;
    }

    .fake-loading-avatar.has-photo {
      padding: 0;
      background: rgba(255,255,255,0.03);
    }

    .fake-loading-avatar-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 999px;
    }

    .fake-loading-avatar:first-child,
    .fake-loading-overflow:first-child {
      margin-left: 0;
    }

    .fake-loading-avatar.is-visible,
    .fake-loading-overflow.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .fake-loading-reveal {
      margin-top: 10px;
      color: var(--muted-light);
      font-size: 14px;
      opacity: 0;
      transition: opacity 0.45s ease;
    }

    .fake-loading-reveal.is-visible {
      opacity: 1;
    }

    .fake-loading-count.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    #fake-loading.cinematic-pass-through {
      background:
        radial-gradient(900px 600px at 20% 0%, rgba(79, 209, 197, 0.12), transparent 65%),
        radial-gradient(900px 600px at 100% 100%, rgba(249, 168, 38, 0.10), transparent 65%),
        linear-gradient(180deg, rgba(9, 14, 23, 0.40), rgba(6, 10, 18, 0.56));
    }

    .testimonials.cinematic-pending .testimonial-card {
      opacity: 0;
      transform: translateY(18px) scale(0.98);
      pointer-events: none;
      transition: opacity 0.65s ease, transform 0.65s ease;
    }

    .testimonials.cinematic-pending .testimonial-card.cinematic-reveal {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      animation: letterOpen 0.95s cubic-bezier(.2,.8,.2,1);
    }

    @keyframes letterOpen {
      0% { opacity: 0; transform: translateY(20px) scale(0.96) rotateX(-8deg); }
      65% { opacity: 1; transform: translateY(-2px) scale(1.01) rotateX(0deg); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }    }

    /* Focus styles */
    *:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    /* High contrast mode support */

    /* Pagina finală - pentru sărbători */
    .celebrated-page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .celebrated-header {
      text-align: center;
      padding: 60px 20px 40px;
      font-size: 28px;
      font-weight: 700;
      background: linear-gradient(135deg, rgba(249, 168, 38, 0.15), rgba(79, 209, 197, 0.1));
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .celebrated-reveal-counter {
      text-align: center;
      padding: 40px 20px;
      font-size: 24px;
      font-weight: 600;
      color: var(--primary-light);
      animation: fadeInScale 0.6s ease;
    }

    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.95);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .celebrated-messages-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 40px 20px;
      overflow-y: auto;
    }

    .celebrated-message-card {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      display: flex;
      gap: 16px;
      animation: slideInUp 0.5s ease var(--delay, 0s);
    }

    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .celebrated-message-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      display: grid;
      place-items: center;
      font-weight: 800;
      color: #0a0a0f;
      font-size: 20px;
    }

    .celebrated-message-content {
      flex: 1;
    }

    .celebrated-message-author {
      font-weight: 700;
      margin-bottom: 4px;
    }

    .celebrated-message-role {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .celebrated-message-text {
      color: var(--muted);
      line-height: 1.6;
      position: relative;
      padding-left: 16px;
    }

    .celebrated-message-text::before {
      content: '❤️';
      position: absolute;
      left: 0;
      top: 0;
    }

    .celebrated-footer {
      text-align: center;
      padding: 60px 20px;
      background: linear-gradient(135deg, rgba(249, 168, 38, 0.1), rgba(79, 209, 197, 0.05));
    }

    .celebrated-emotional-text {
      font-size: 20px;
      font-weight: 600;
      line-height: 1.8;
      margin-bottom: 40px;
      color: var(--text);
    }

    .celebrated-emotional-text strong {
      color: var(--primary-light);
    }

    .celebrated-cta-soft {
      font-size: 16px;
      color: var(--muted);
      margin-top: 24px;
    }

    .celebrated-reply-special {
      margin-top: 8px;
    }

    .celebrated-reply-card {
      max-width: 760px;
      margin: 0 auto;
      background: #f6efe3;
      color: #4a4239;
      border: 1px solid #e4d6bf;
      border-radius: 10px;
      padding: 34px 34px 28px;
      box-shadow: 0 16px 34px rgba(10, 8, 4, 0.22);
      position: relative;
    }

    .celebrated-reply-card::before {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px dashed rgba(130, 108, 78, 0.35);
      border-radius: 6px;
      pointer-events: none;
    }

    .celebrated-reply-emoji {
      display: block;
      text-align: center;
      font-size: 56px;
      line-height: 1;
      margin-bottom: 16px;
    }

    .celebrated-reply-text {
      margin: 0;
      color: #4a4239;
      line-height: 1.85;
      white-space: pre-line;
      font-size: clamp(23px, 3.2vw, 31px);
      font-style: italic;
      text-align: center;
      letter-spacing: 0.01em;
      font-family: "Georgia", "Times New Roman", serif;
    }

    .celebrated-reply-signature {
      margin-top: 22px;
      color: #5a4f43;
      text-align: right;
      font-style: italic;
      font-family: "Georgia", "Times New Roman", serif;
    }

    .celebrated-reply-signature-name {
      display: block;
      font-size: 26px;
      line-height: 1.2;
    }

    .celebrated-reply-signature-date {
      display: block;
      margin-top: 2px;
      font-size: 14px;
      color: #6a5f53;
    }
    @media (max-width: 760px) {
      .celebrated-reply-card {
        padding: 28px 20px 24px;
      }

      .celebrated-reply-emoji {
        font-size: 48px;
      }

      .celebrated-reply-signature-name {
        font-size: 22px;
      }    }

    .celebrated-reply-prompt.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .celebrated-reply-prompt-copy {
      margin: 0 0 12px;
      color: var(--text);
      font-size: 14px;
      line-height: 1.45;
    }

    .celebrated-reply-actions,
    .celebrated-reply-form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .celebrated-reply-btn {
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 13px;
      cursor: pointer;
    }

    .celebrated-reply-form {
      display: none;
      gap: 10px;
      flex-direction: column;
    }

    .celebrated-reply-form.is-open {
      display: flex;
    }

    .celebrated-reply-textarea {
      width: 100%;
      min-height: 110px;
      resize: vertical;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      padding: 10px 12px;
      font: inherit;
      line-height: 1.45;
    }

    .celebrated-reply-reactions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .celebrated-reply-reaction {
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      padding: 6px 10px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
    }

    .celebrated-reply-reaction.is-active {
      border-color: rgba(249, 168, 38, 0.65);
      background: rgba(249, 168, 38, 0.14);
    }

    /* Timed Reveal Container */
    .reveal-countdown-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      background: 
        radial-gradient(1400px 900px at 85% -15%, rgba(79, 209, 197, 0.18), transparent 65%),
        radial-gradient(1200px 800px at -5% 110%, rgba(122, 162, 255, 0.20), transparent 65%),
        linear-gradient(180deg, rgba(9, 14, 23, 0.95), rgba(6, 10, 18, 1));
    }

    .reveal-countdown-box {
      max-width: 580px;
      width: 100%;
      text-align: center;
      padding: 60px 40px;
      border: 1px solid rgba(79, 209, 197, 0.25);
      border-radius: 24px;
      background: rgba(16, 24, 38, 0.45);
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(79, 209, 197, 0.1);
    }
    @media (max-width: 600px) {
      .reveal-countdown-box {
        padding: 40px 28px;
      }    }

    .reveal-countdown-message {
      font-size: clamp(18px, 4vw, 28px);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 16px;
      line-height: 1.3;
    }

    .reveal-countdown-personalized {
      font-size: clamp(14px, 3vw, 18px);
      color: var(--muted-light);
      font-style: italic;
      margin-bottom: 48px;
      line-height: 1.5;
    }

    .reveal-countdown-label {
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      font-weight: 700;
      margin-bottom: 14px;
      opacity: 0.85;
    }

    .reveal-countdown-timer {
      font-size: clamp(48px, 12vw, 72px);
      font-weight: 900;
      color: var(--primary-light);
      font-family: 'Space Grotesk', monospace;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      margin-bottom: 10px;
      letter-spacing: -0.02em;
      text-shadow: 0 4px 20px rgba(79, 209, 197, 0.3);
    }

    .reveal-countdown-days {
      font-size: clamp(22px, 5vw, 34px);
      font-weight: 800;
      color: var(--text-secondary);
      margin-bottom: 14px;
    }

    .reveal-countdown-subtext {
      font-size: 14px;
      color: var(--muted-light);
      margin-bottom: 40px;
    }

    .reveal-countdown-emoji {
      display: inline-block;
      font-size: clamp(32px, 8vw, 48px);
      margin-bottom: 20px;
      animation: bobbing 3s ease-in-out infinite;
    }

    @keyframes bobbing {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    /* Inline Editing Styles */
    .owner-editable-zone {
      position: relative;
    }

    .main-message-zone {
      background: var(--panel, #f5f5f5);
      padding: 16px;
      border-radius: 8px;
      margin: 16px 0;
    }

    .main-message-zone .owner-editable-content {
      min-height: 40px;
    }

    .main-message-zone .owner-edit-textarea {
      width: 100%;
      min-height: 120px;
      padding: 8px;
      border: 1px solid var(--accent, #ccc);
      border-radius: 4px;
      font-family: inherit;
      font-size: inherit;
      box-sizing: border-box;
    }

    .qualities-zone .owner-editable-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
    }

    .qualities-zone .item {
      padding: 12px;
      background: var(--panel, #f5f5f5);
      border-radius: 6px;
      position: relative;
    }

    .photo-frame-wrapper {
      position: relative;
      min-width: 0;
      max-width: 100%;
    }

    .hero-grid > *,
    .photo-card,
    .photo-frame,
    .photo,
    .owner-edit-form,
    .owner-edit-photo-file {
      min-width: 0;
      max-width: 100%;
    }

    .photo {
      display: block;
    }

    .owner-edit-status {
      font-size: 12px;
      color: var(--muted, #999);
      margin-top: 4px;
    }

    .owner-edit-status.success {
      color: var(--accent, #4CAF50);
    }

    .owner-edit-status.error {
      color: var(--error, #f44336);
    }

    /* "Clipe de neuitat" (wall-of-love) - mutat aici din mijlocul body-ului,
       unde era un <style> inline separat; regulile sunt neschimbate. */
    .wall-of-love { padding-top: clamp(30px, 6vh, 62px); }
    .wall-header { text-align: center; margin-bottom: 20px; }
    .wall-item.wide { grid-column: span 2; min-height: 170px; }

    /* ------------------------------------------------------------------
       Formulare de editare (comentariu + fotografie "Clipe de neuitat").
       Culorile vin din variabilele --edit-* definite inline in fiecare layout;
       valorile de dupa virgula sunt doar fallback (tema intunecata).
       ------------------------------------------------------------------ */
    .button.button--sm {
      padding: 9px 16px;
      font-size: 13px;
      gap: 6px;
    }

    .fc-edit-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    /* --- Butonul creion de pe fotografie --- */
    .fc-wall-edit-trigger {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background: var(--edit-trigger-bg, rgba(9, 14, 23, 0.72));
      color: var(--edit-trigger-color, #fff);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
      cursor: pointer;
      opacity: 0.88;
      transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .wall-item:hover .fc-wall-edit-trigger,
    .fc-wall-edit-trigger:focus-visible {
      opacity: 1;
      transform: scale(1.06);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    }

    .wall-item.is-editing .fc-wall-edit-trigger {
      opacity: 0;
      pointer-events: none;
    }

    /* --- Panoul de editare a fotografiei (bottom sheet peste imagine) --- */
    .fc-wall-edit-panel {
      display: none;
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      z-index: 4;
      max-height: calc(100% - 16px);
      overflow-y: auto;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background: var(--edit-surface, rgba(14, 20, 32, 0.94));
      color: var(--edit-text, var(--text));
      box-shadow: var(--edit-shadow, 0 18px 40px rgba(0, 0, 0, 0.45));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      text-align: left;
      cursor: default;
      animation: fcEditPanelIn 0.22s ease;
    }

    @keyframes fcEditPanelIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .fc-wall-edit-panel__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .fc-wall-edit-panel__title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--edit-muted, var(--muted-light));
    }

    .fc-wall-edit-panel__close {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid var(--edit-field-border, rgba(255, 255, 255, 0.16));
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.06));
      color: var(--edit-text, var(--text));
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
    }

    /* Tile-ul se mareste cat timp e deschis editorul, ca panoul sa aiba loc. */
    .wall-of-love .wall-item.is-editing {
      min-height: 300px !important;
    }

    /* Imaginea apare color si nemiscata in timpul editarii (bate efectele de hover din layout-uri). */
    .wall-of-love .wall-grid .wall-item.is-editing img {
      filter: none !important;
      transform: none !important;
      box-shadow: none !important;
    }

    .wall-of-love .wall-grid .wall-item.is-removing img {
      opacity: 0.3 !important;
      filter: grayscale(1) !important;
    }

    /* --- Selector de fisier --- */
    .fc-file-pick {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px;
      border-radius: 12px;
      border: 1px dashed var(--edit-field-border, rgba(255, 255, 255, 0.22));
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.05));
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .fc-file-pick:hover,
    .fc-file-pick:focus-within {
      border-color: var(--primary);
    }

    .fc-file-pick__input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .fc-file-pick__btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 10px;
      background: var(--edit-accent-soft, rgba(255, 255, 255, 0.1));
      color: var(--edit-accent, var(--text));
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .fc-file-pick__name {
      flex: 1 1 120px;
      min-width: 0;
      font-size: 12px;
      color: var(--edit-muted, var(--muted-light));
      overflow-wrap: anywhere;
    }

    .fc-file-pick.has-file .fc-file-pick__name {
      color: var(--edit-text, var(--text));
      font-weight: 600;
    }

    /* --- Comutator "Elimina fotografia" --- */
    .fc-remove-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 13px;
      color: var(--edit-muted, var(--muted-light));
      cursor: pointer;
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .fc-remove-toggle input {
      width: 15px;
      height: 15px;
      accent-color: var(--edit-danger, var(--error));
      cursor: pointer;
    }

    .fc-remove-toggle:hover,
    .fc-remove-toggle:has(input:checked) {
      color: var(--edit-danger, var(--error));
    }

    .fc-remove-toggle:has(input:checked) {
      background: var(--edit-danger-soft, rgba(255, 107, 107, 0.12));
      border-color: var(--edit-danger-soft, rgba(255, 107, 107, 0.28));
    }

    /* --- Editarea comentariului (in cardul de testimonial) --- */
    .fc-comment-edit {
      margin-top: 12px;
    }

    .fc-comment-edit__open {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 2px;
      border: 0;
      background: none;
      color: var(--edit-accent, var(--primary));
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border-bottom: 1px dashed currentColor;
      border-radius: 0;
      opacity: 0.85;
      transition: opacity 0.2s ease;
    }

    .fc-comment-edit__open:hover,
    .fc-comment-edit__open:focus-visible {
      opacity: 1;
    }

    .fc-comment-edit__form {
      display: none;
      margin-top: 10px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background: var(--edit-surface-soft, rgba(255, 255, 255, 0.04));
      animation: fcEditPanelIn 0.22s ease;
    }

    .fc-comment-edit__label {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--edit-muted, var(--muted-light));
    }

    .fc-comment-edit__textarea {
      display: block;
      width: 100%;
      min-height: 110px;
      resize: vertical;
      box-sizing: border-box;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--edit-field-border, rgba(255, 255, 255, 0.16));
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.06));
      color: var(--edit-text, var(--text));
      font: inherit;
      font-size: 15px;
      line-height: 1.6;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .fc-comment-edit__textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--edit-focus-ring, rgba(79, 209, 197, 0.18));
    }

    .fc-comment-edit__meta {
      margin-top: 6px;
      text-align: right;
      font-size: 12px;
      color: var(--edit-muted, var(--muted-light));
      font-variant-numeric: tabular-nums;
    }

    .fc-comment-edit__meta.is-near-limit {
      color: var(--edit-danger, var(--error));
      font-weight: 600;
    }

    @media (hover: none) {
      .fc-wall-edit-trigger { opacity: 1; }
    }

    /* --- Editarea din pagina creatorului (mesaj / calitati / fotografie) --- */
    .owner-edit-button {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 20;
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background: var(--edit-trigger-bg, rgba(9, 14, 23, 0.72));
      color: var(--edit-trigger-color, #fff);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
      cursor: pointer;
      opacity: 0.88;
      transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .owner-editable-zone:hover > .owner-edit-button,
    .owner-editable-zone:hover .owner-editable-content > .owner-edit-button,
    .owner-edit-button:hover,
    .owner-edit-button:focus-visible {
      opacity: 1;
      transform: scale(1.06);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    }

    .owner-editable-zone.is-editing > .owner-edit-button {
      display: none;
    }

    .owner-photo-edit {
      top: 12px;
      right: 12px;
      z-index: 30;
      pointer-events: auto;
    }

    /* Butonul "Adauga calitati" din starea goala */
    .owner-edit-button.owner-add-qualities {
      position: static;
      width: auto;
      height: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 14px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: var(--edit-accent-soft, rgba(255, 255, 255, 0.1));
      color: var(--edit-accent, var(--text));
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      box-shadow: none;
      backdrop-filter: none;
      opacity: 1;
    }

    .owner-edit-button.owner-add-qualities:hover {
      transform: translateY(-1px);
      border-color: var(--edit-field-border, rgba(255, 255, 255, 0.16));
    }

    .fc-empty-state {
      padding: 16px;
      border-radius: 14px;
      border: 1px dashed var(--edit-field-border, rgba(255, 255, 255, 0.22));
      background: var(--edit-surface-soft, rgba(255, 255, 255, 0.04));
      text-align: left;
    }

    .fc-empty-state__text {
      margin: 0 0 10px;
      font-weight: 600;
      color: var(--edit-text, var(--text));
    }

    /* Panoul de editare (mesaj principal + calitati) */
    .owner-edit-form.fc-owner-panel {
      display: none; /* afisat din JS */
      width: 100%;
      box-sizing: border-box;
      margin-top: 12px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background: var(--edit-surface-soft, rgba(255, 255, 255, 0.04));
      box-shadow: var(--edit-shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.18));
      color: var(--edit-text, var(--text));
      text-align: left;
      clear: both;
      animation: fcEditPanelIn 0.22s ease;
    }

    .fc-owner-panel .fc-comment-edit__textarea {
      min-height: 140px;
      max-height: 50vh;
    }

    .fc-owner-panel__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .fc-owner-panel__head .fc-comment-edit__label {
      margin: 0;
    }

    .fc-owner-panel__count {
      font-size: 12px;
      font-weight: 600;
      color: var(--edit-muted, var(--muted-light));
      font-variant-numeric: tabular-nums;
    }

    .fc-owner-panel__count.is-full {
      color: var(--edit-accent, var(--primary));
    }

    /* Campuri text generice (cautare, URL) */
    .fc-field {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--edit-field-border, rgba(255, 255, 255, 0.16));
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.06));
      color: var(--edit-text, var(--text));
      font: inherit;
      font-size: 14px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .fc-field::placeholder {
      color: var(--edit-muted, var(--muted-light));
      opacity: 0.8;
    }

    .fc-field:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--edit-focus-ring, rgba(79, 209, 197, 0.18));
    }

    .fc-field-label {
      display: block;
      margin: 14px 0 6px;
      font-size: 12px;
      color: var(--edit-muted, var(--muted-light));
    }

    /* Lista de calitati ca "chips" */
    .fc-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
      max-height: 280px;
      overflow-y: auto;
      padding: 2px;
    }

    .fc-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid var(--edit-field-border, rgba(255, 255, 255, 0.16));
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.06));
      color: var(--edit-text, var(--text));
      font-size: 13px;
      line-height: 1.2;
      cursor: pointer;
      user-select: none;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
    }

    .fc-chip input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }

    .fc-chip:hover {
      border-color: var(--primary);
    }

    .fc-chip:focus-within {
      box-shadow: 0 0 0 3px var(--edit-focus-ring, rgba(79, 209, 197, 0.18));
    }

    .fc-chip.is-checked {
      background: var(--edit-chip-on-bg, var(--primary));
      border-color: var(--edit-chip-on-bg, var(--primary));
      color: var(--edit-chip-on-color, #10131a);
      font-weight: 600;
    }

    .fc-chip.is-checked::before {
      content: '✓';
      font-weight: 700;
    }

    .fc-chip.is-disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .fc-chip.is-hidden {
      display: none;
    }

    .fc-chip-list__empty {
      margin: 12px 0 0;
      font-size: 13px;
      color: var(--edit-muted, var(--muted-light));
    }

    /* Modalul de editare a fotografiei */
    .fc-photo-modal {
      text-align: left;
    }

    .fc-photo-modal__preview {
      position: relative;
      width: 132px;
      height: 132px;
      margin: 4px 0 16px;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.06));
      transition: opacity 0.2s ease;
    }

    .fc-photo-modal__preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .fc-photo-modal__preview.is-empty img {
      visibility: hidden;
    }

    .fc-photo-modal__preview.is-removing {
      opacity: 0.3;
      filter: grayscale(1);
    }

    .fc-photo-modal__badge {
      position: absolute;
      left: 8px;
      bottom: 8px;
      padding: 3px 8px;
      border-radius: 999px;
      background: var(--edit-trigger-bg, rgba(9, 14, 23, 0.72));
      color: var(--edit-trigger-color, #fff);
      font-size: 11px;
      font-weight: 600;
    }

    /* Butonul "Anunta-ma cand primesc..." - text lung: se rupe pe mai multe randuri, nu iese din ecran */
    .button.fc-notify-button {
      max-width: min(560px, 100%);
      justify-content: center;
      text-align: center;
      white-space: normal;
      line-height: 1.35;
    }

    @media (max-width: 600px) {
      .button.fc-notify-button {
        width: 100%;
        padding: 14px 18px;
        font-size: 14px;
      }
    }

    /* Nota afisata in locul butonului "Adauga mesajul tau" cand vizitatorul a comentat deja */
    .fc-already-commented {
      display: inline-block;
      margin: 0 auto 4px;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background: var(--edit-surface-soft, rgba(255, 255, 255, 0.04));
      color: var(--edit-text, var(--text));
      font-size: 15px;
      font-weight: 600;
    }

    /* --- Certificatul Foarte Cool: cardul de descarcare (centrat, ca restul paginii) --- */
    .fc-cert-cta {
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .fc-cert-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      max-width: 620px;
      margin: 0 auto;
      padding: 28px 24px 26px;
      border-radius: 20px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.14));
      background:
        radial-gradient(360px 160px at 50% 0%, rgba(214, 160, 86, 0.20), transparent 75%),
        var(--edit-surface-soft, rgba(255, 255, 255, 0.04));
      box-shadow: var(--edit-shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.18));
      text-align: center;
    }

    .fc-cert-card__badge {
      width: 60px;
      height: 60px;
      display: grid;
      place-items: center;
      margin-bottom: 8px;
      border-radius: 50%;
      font-size: 30px;
      background: conic-gradient(from 210deg, #8a5a12, #e9c77b, #b5862f, #f3d58e, #8a5a12);
      box-shadow: 0 6px 18px rgba(122, 74, 14, 0.25);
    }

    .fc-cert-card__body {
      max-width: 480px;
    }

    .fc-cert-card__title {
      margin: 0 0 6px !important;
      font-size: clamp(20px, 2.6vw, 26px) !important;
      line-height: 1.25;
    }

    .fc-cert-card__text {
      margin: 0 auto;
      color: var(--edit-muted, var(--muted-light));
      font-size: 15px;
      line-height: 1.55;
    }

    .button.fc-cert-card__button {
      margin-top: 14px;
      justify-content: center;
    }

    @media (max-width: 600px) {
      .fc-cert-card {
        padding: 24px 18px 22px;
      }

      .button.fc-cert-card__button {
        width: 100%;
      }
    }

    /* --- Moderarea mesajelor (creator / sarbatorit) --- */

    #fc-mod-modal .panel.fc-mod-panel {
      position: relative;
      width: min(760px, 100%);
      padding-top: 40px;
      text-align: left;
    }

    .fc-mod-help {
      margin: 6px 0 16px !important;
      font-size: 14px;
      line-height: 1.55;
      color: var(--edit-muted, var(--muted-light)) !important;
    }

    .fc-mod-help b {
      color: var(--edit-text, var(--text));
    }

    .fc-mod-tabs {
      display: flex;
      gap: 6px;
      padding: 4px;
      border-radius: 12px;
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.06));
      border: 1px solid var(--edit-field-border, rgba(255, 255, 255, 0.14));
      margin-bottom: 14px;
    }

    .fc-mod-tab {
      flex: 1 1 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 12px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--edit-muted, var(--muted-light));
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .fc-mod-tab.is-active {
      background: var(--edit-surface, rgba(14, 20, 32, 0.94));
      color: var(--edit-text, var(--text));
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    .fc-mod-count {
      min-width: 22px;
      padding: 1px 7px;
      border-radius: 999px;
      background: var(--edit-accent-soft, rgba(255, 255, 255, 0.1));
      color: var(--edit-accent, var(--text));
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .fc-mod-list {
      display: grid;
      gap: 10px;
      max-height: min(60vh, 560px);
      overflow-y: auto;
      padding: 2px;
    }

    .fc-mod-empty {
      margin: 0 !important;
      padding: 28px 12px;
      text-align: center;
      color: var(--edit-muted, var(--muted-light)) !important;
      font-size: 14px;
    }

    .fc-mod-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.12));
      background: var(--edit-surface-soft, rgba(255, 255, 255, 0.04));
      transition: opacity 0.2s ease;
    }

    .fc-mod-item.is-busy {
      opacity: 0.55;
      pointer-events: none;
    }

    .fc-mod-item__head {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 4px 10px;
      margin-bottom: 6px;
    }

    .fc-mod-item__author {
      font-weight: 700;
      color: var(--edit-text, var(--text));
    }

    .fc-mod-item__meta {
      font-size: 12px;
      color: var(--edit-muted, var(--muted-light));
    }

    .fc-mod-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: var(--edit-accent-soft, rgba(255, 255, 255, 0.1));
      color: var(--edit-accent, var(--text));
    }

    .fc-mod-item__text {
      margin: 0 !important;
      font-size: 14px;
      line-height: 1.55;
      color: var(--edit-text, var(--text)) !important;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .fc-mod-item__text.is-expanded {
      display: block;
    }

    .fc-mod-item__text.is-locked {
      font-style: italic;
      color: var(--edit-muted, var(--muted-light)) !important;
    }

    .fc-mod-more {
      margin-top: 4px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--edit-accent, var(--primary));
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }

    .fc-mod-item__photo {
      display: block;
      width: 76px;
      height: 76px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--edit-border, rgba(255, 255, 255, 0.12));
    }

    .fc-mod-item__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .fc-mod-actions {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .fc-mod-btn {
      padding: 7px 12px;
      border-radius: 9px;
      border: 1px solid var(--edit-field-border, rgba(255, 255, 255, 0.16));
      background: var(--edit-field-bg, rgba(255, 255, 255, 0.06));
      color: var(--edit-text, var(--text));
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .fc-mod-btn:hover,
    .fc-mod-btn:focus-visible {
      border-color: var(--primary);
    }

    .fc-mod-btn--danger {
      color: var(--edit-danger, var(--error));
    }

    .fc-mod-btn--danger:hover,
    .fc-mod-btn--danger:focus-visible,
    .fc-mod-btn.is-confirming {
      border-color: var(--edit-danger, var(--error));
      background: var(--edit-danger-soft, rgba(255, 107, 107, 0.12));
      color: var(--edit-danger, var(--error));
    }

    @media (max-width: 600px) {
      .fc-mod-item {
        grid-template-columns: 1fr;
      }

      .fc-mod-item__photo {
        width: 100%;
        height: 160px;
      }

      .fc-mod-actions {
        justify-content: stretch;
      }

      .fc-mod-btn {
        flex: 1 1 auto;
      }
    }