html, body{
      max-width:100%;
      overflow-x:hidden;
    }

    :root{
      --mesh1:#0ea5e9;
      --mesh2:#6366f1;
      --mesh3:#06b6d4;
      --panel:#ffffff;
    }
    .mesh-bg:before{
      content:"";
      position:absolute;
      inset:-20%;
      background:
        radial-gradient(40rem 25rem at 10% 20%, color-mix(in oklab, var(--mesh1), transparent 70%) 0, transparent 70%),
        radial-gradient(35rem 20rem at 90% 10%, color-mix(in oklab, var(--mesh2), transparent 72%) 0, transparent 72%),
        radial-gradient(30rem 20rem at 30% 90%, color-mix(in oklab, var(--mesh3), transparent 75%) 0, transparent 75%);
      filter: blur(52px);
      z-index:-1;
      opacity:.88;
    }
    input,button,select,textarea,.latin{
      font-variant-numeric:lining-nums
    }
    .btn{
      padding:.5rem 1rem;
      border-radius:.9rem;
      border:1px solid color-mix(in oklab, var(--panel,#fff), #000 12%);
      transition: box-shadow .2s ease, transform .15s ease;
      background: color-mix(in oklab, #ffffff, #e5f3ff 8%);
    }
    .btn:hover{
      box-shadow:0 6px 18px rgba(2,132,199,.18);
      transform: translateY(-1px);
    }
    .hero-pill{
      border-radius:999px;
      padding:.25rem .8rem;
      font-size:.75rem;
      border:1px solid rgba(255,255,255,.4);
      background:linear-gradient(to left,rgba(15,23,42,.2),rgba(15,23,42,.6));
      color:#e5f3ff;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
    }
    .hero-pill-dot{
      width:.5rem;
      height:.5rem;
      border-radius:999px;
      background:radial-gradient(circle at 30% 30%,#facc15,#f97316);
      box-shadow:0 0 0 4px rgba(250,204,21,.25);
    }
    .section-label{
      font-size:.85rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      opacity:.88;
    }
    .qr-shell{
      position:relative;
    }
    .qr-halo{
      position:absolute;
      inset:-18%;
      background:
        conic-gradient(from 0deg,
          rgba(56,189,248,.0),
          rgba(56,189,248,.7),
          rgba(129,140,248,.8),
          rgba(236,72,153,.7),
          rgba(56,189,248,.0)
        );
      filter: blur(26px);
      opacity:.85;
      z-index:-10;
      animation:spinHalo 18s linear infinite;
    }
    @keyframes spinHalo{
      to{ transform: rotate(360deg); }
    }
    .qr-card{
      border-radius:1.5rem;
      padding:0.9rem;
      background:linear-gradient(
        135deg,
        rgba(15,23,42,.94),
        rgba(15,23,42,.98)
      );
      box-shadow:
        0 18px 45px rgba(15,23,42,.7),
        0 0 0 1px rgba(148,163,184,.35);
    }
    .qr-card-light{
      background:linear-gradient(
        135deg,
        rgba(248,250,252,.96),
        rgba(241,245,249,.98)
      );
      box-shadow:
        0 18px 45px rgba(148,163,184,.35),
        0 0 0 1px rgba(148,163,184,.35);
    }
    .qr-tag{
      font-size:.7rem;
      padding:.15rem .55rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.45);
      color:rgba(148,163,184,.95);
      display:inline-flex;
      align-items:center;
      gap:.3rem;
    }
    .preset-btn{
      padding:.45rem .85rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      background:rgba(248,250,252,.9);
      color:#0f172a;
      cursor:pointer;
      transition:background-color .15s ease, box-shadow .15s ease, transform .12s ease, border-color .15s;
      white-space:nowrap;
    }
    .dark .preset-btn{
      background:rgba(15,23,42,.9);
      color:#e5e7eb;
      border-color:rgba(148,163,184,.4);
    }
    .preset-btn:hover{
      box-shadow:0 6px 16px rgba(15,23,42,.22);
      transform:translateY(-1px);
      border-color:rgba(56,189,248,.9);
    }
    .preset-btn--active{
      background:linear-gradient(to left,#06b6d4,#4f46e5);
      color:white;
      border-color:transparent;
      box-shadow:0 10px 25px rgba(37,99,235,.45);
      transform:translateY(-1px);
    }
    .empty-note{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .75rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:500;
      color:rgb(100,116,139);
      background:rgba(241,245,249,.9);
    }
    .empty-note::before{
      content:"•";
      font-size:1.1em;
      color:rgb(148,163,184);
    }
    .dark .empty-note{
      background:rgba(15,23,42,.9);
      color:rgb(148,163,184);
      border:1px dashed rgba(148,163,184,.6);
    }

/* معاينة متجاوبة — تناسب الموبايل والكمبيوتر بدون قص */
#qrcanvas{
  margin:0 auto;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* نخلي الـ QR ياخذ حجمه الطبيعي، ويصغر فقط لو المساحة أصغر */
#qrcanvas canvas,
#qrcanvas svg{
  display:block;
  max-width:100%;
  height:auto;
}

/* تحسين وضوح الحواف في SVG */
#qrcanvas svg{
  shape-rendering:crispEdges;
}