/* ================= ROOT ================= */
 :root {
     --bg-dark: #020617;
     --bg-main: #0b0f1a;
     --card: #111827;
     --neon-purple: #8b5cf6;
     --neon-blue: #22d3ee;
     --text-main: #e5e7eb;
     --text-muted: #94a3b8;
 }

 /* ================= RESET ================= */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Inter", system-ui, -apple-system, sans-serif;
 }

 /* ================= BODY ================= */
 body {
     background: radial-gradient(circle at top, #1e1b4b, var(--bg-dark));
     color: var(--text-main);
     min-height: 100svh;
     /* FIX mobile height */
     overflow-x: hidden;
 }

 /* ================= NAVBAR ================= */
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 14px 20px;
 }

 .logo {
     font-weight: 700;
     font-size: 18px;
 }

 /* ================= HERO ================= */
 .hero {
     text-align: center;
     padding: 10px 16px 24px;
 }

 .hero h1 {
     font-size: clamp(22px, 6vw, 36px);
     margin-bottom: 8px;
 }

 .hero span {
     color: var(--neon-purple);
 }

 .hero p {
     font-size: 14px;
     color: var(--text-muted);
 }

 .avatar {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     border: 3px solid var(--neon-purple);
     margin-bottom: 16px;
     object-fit: cover;
 }

 /* ================= BUTTON ================= */
 .btn-neon {
     margin-top: 20px;
     padding: 14px 24px;
     background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
     color: white;
     border-radius: 14px;
     text-decoration: none;
     font-size: 15px;
     display: inline-block;
     box-shadow: 0 0 20px rgba(139, 92, 246, .6);
     transition: .25s ease;
 }

 .btn-neon:hover {
     transform: scale(1.04);
     box-shadow: 0 0 30px rgba(34, 211, 238, .8);
 }

 .btn-neon.full {
     width: 100%;
     margin-top: 10px;
 }

 /* ================= SUPPORT CARD ================= */
 .support {
     width: calc(100% - 32px);
     max-width: 420px;
     margin: 16px auto;
     background: var(--card);
     padding: 24px;
     border-radius: 22px;
     box-shadow: 0 0 30px rgba(139, 92, 246, .15);
 }

 .support h2 {
     text-align: center;
     font-size: 17px;
     margin-bottom: 12px;
 }

 /* ================= AMOUNTS ================= */
 .amounts {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
     margin: 20px 0;
 }

 .amounts button {
     padding: 16px;
     background: var(--bg-dark);
     border: 1px solid #1e293b;
     color: white;
     border-radius: 14px;
     font-size: 15px;
     cursor: pointer;
     transition: .2s;
 }

 .error {
     border-color: red !important;
 }

 .amounts button.active {
     background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
     border-color: transparent;
 }

 /* ================= MESSAGE INPUT ================= */
 .message {
     width: 100%;
     padding: 16px;
     background: var(--bg-dark);
     border: 1px solid #1e293b;
     border-radius: 14px;
     color: white;
     font-size: 14px;
     margin-bottom: 14px;
 }

 .message::placeholder {
     color: #64748b;
 }

 /* ================= FOOTER ================= */
 footer {
     text-align: center;
     padding: 12px;
     margin-top: 12px;
     font-size: 12px;
     color: var(--text-muted);
 }

 /* ================= REMOVE EMPTY SECTIONS ================= */
 section:empty {
     display: none !important;
 }

 /* ملف CSS الخاص بيك */
 .no-style-link {
     color: inherit;
     /* ياخد لون النص الطبيعي */
     text-decoration: none;
     /* يشيل الـ underline */
     background: none;
     /* يشيل أي خلفية لو موجودة */
     border: none;
     /* يشيل أي حدود لو فيه */
     padding: 0;
     /* يشيل أي padding */
     font-weight: normal;
     /* يرجع الخط للوزن الطبيعي */
 }

 .no-style-link:hover,
 .no-style-link:focus,
 .no-style-link:active {
     color: inherit;
     /* يمنع تغيير اللون عند hover */
     text-decoration: none;
     /* يمنع underline عند hover */
 }

 /* ================= DESKTOP ================= */
 @media (min-width: 768px) {
     .hero {
         padding: 0px 20px 16px;
     }

     .amounts {
         grid-template-columns: repeat(4, 1fr);
     }

     .support {
         padding: 36px;
     }

     .navbar {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0px 20px;
     }
 }