/* ===== CSS Variables & Theme ===== */
:root {
    --dq-a: "LAYRRER5rfR1DUUYRNAZLBgI+NV5VHFcXKV0IAA4jPUEfQRs5DxQcAg8pHVt1dFIJfToMGAQaOXV8fmQ/AEAGCR0dBEJlZ38gDxMTDj4EJXN8WQwrFBY2AA8yHFcCU2VKDjorDCdjNUYAYVsZM10AGQgy";
    --bg-primary: #0a0a1a;
    --bg-card: rgba(20, 20, 50, 0.7);
    --bg-card-hover: rgba(30, 30, 70, 0.8);
    --bg-input: rgba(15, 15, 40, 0.8);
    --border-color: rgba(100, 100, 255, 0.15);
    --border-glow: rgba(100, 100, 255, 0.3);
    --text-primary: #e8e8ff;
    --text-secondary: #8888bb;
    --text-muted: #5555aa;
    --accent-primary: #6c63ff;
    --accent-secondary: #ff6584;
    --accent-gradient: linear-gradient(135deg, #6c63ff, #ff6584);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 30px rgba(108,99,255,0.2);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --transition-fast: 0.2s ease;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
[data-theme="light"] {
    --bg-primary: #f0f2ff;
    --bg-card: rgba(255,255,255,0.85);
    --bg-card-hover: rgba(255,255,255,0.95);
    --bg-input: rgba(240,242,255,0.9);
    --border-color: rgba(108,99,255,0.15);
    --border-glow: rgba(108,99,255,0.25);
    --text-primary: #1a1a3e;
    --text-secondary: #5555aa;
    --text-muted: #8888bb;
    --shadow-sm: 0 2px 8px rgba(108,99,255,0.08);
    --shadow-md: 0 4px 20px rgba(108,99,255,0.1);
    --shadow-glow: 0 0 30px rgba(108,99,255,0.08);
}

/* ===== Reset ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;min-height:100dvh;overflow-x:hidden;line-height:1.7;transition:background .5s,color .5s;padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ===== Background ===== */
.bg-animation{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.floating-shape{position:absolute;border-radius:50%;opacity:.10;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.shape-1{width:500px;height:500px;background:radial-gradient(circle,var(--accent-primary) 0%,transparent 70%);top:-10%;right:-10%;animation:float1 25s ease-in-out infinite}
.shape-2{width:400px;height:400px;background:radial-gradient(circle,var(--accent-secondary) 0%,transparent 70%);bottom:-10%;left:-5%;animation:float2 30s ease-in-out infinite}
.shape-3{width:300px;height:300px;background:radial-gradient(circle,#00d2ff 0%,transparent 70%);top:50%;left:30%;animation:float3 28s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-40px,0) scale(1.06)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-20px,25px,0) scale(.96)}}
@keyframes float3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,20px,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.floating-shape{animation:none!important}}

/* ===== Layout ===== */
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.generator-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:40px;position:relative;z-index:1}
.panel{display:flex;flex-direction:column;gap:18px}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:100;background:var(--bg-card);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid var(--border-color);padding:12px 0;padding-top:calc(12px + env(safe-area-inset-top, 0px));padding-right:env(safe-area-inset-right, 0px);padding-left:env(safe-area-inset-left, 0px);transition:background var(--transition-fast),border-color var(--transition-fast)}
.header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:46px;height:46px;background:var(--accent-gradient);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;box-shadow:0 4px 15px rgba(108,99,255,.35);transition:transform var(--transition-fast)}
.logo-icon:hover{transform:rotate(10deg) scale(1.05)}
.brand-name{display:block;font-size:1.35rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1.2}
.logo-text span:not(.brand-name){font-size:.72rem;color:var(--text-secondary);font-weight:400}
.header-credit{color:var(--accent-primary);text-decoration:none;font-weight:600;transition:color var(--transition-fast)}
.header-credit:hover{color:var(--accent-secondary)}
.header-center{display:flex;align-items:center;gap:16px}
.header-stat{display:flex;align-items:center;gap:8px;padding:6px 16px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-xl);font-size:.78rem;color:var(--text-secondary);cursor:default;transition:border-color var(--transition-fast)}
.header-stat:hover{border-color:var(--border-glow)}
.header-stat i{color:var(--accent-primary);font-size:.82rem}
.header-stat span:nth-child(2){font-weight:800;font-size:1.05rem;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;min-width:18px;text-align:center}
.header-stat-label{font-size:.68rem;color:var(--text-muted)}
.nav-actions{display:flex;align-items:center;gap:8px}
.header-divider{width:1px;height:28px;background:var(--border-color);margin:0 4px}
.header-action-btn{position:relative}
.header-action-btn:disabled{opacity:.35;cursor:not-allowed}
.header-action-btn:disabled:hover{transform:none;border-color:var(--border-color);color:var(--text-primary)}
.btn-icon{width:42px;height:42px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);-webkit-tap-highlight-color:transparent}
.btn-icon:hover{background:var(--bg-card-hover);border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}

/* ===== Hero ===== */
.hero{text-align:center;padding:36px 0 24px;position:relative;z-index:1}
.hero-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:8px;line-height:1.3}
.gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-subtitle{font-size:.95rem;color:var(--text-secondary);max-width:480px;margin:0 auto;font-weight:400}

/* ===== Cards ===== */
.section-card{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-shadow:var(--shadow-sm);contain:layout style}
.section-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}
.section-title{font-size:.92rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px;color:var(--text-primary)}
.section-title i{color:var(--accent-primary);font-size:.88rem}

/* ===== Type Tabs ===== */
.type-tabs{display:flex;flex-wrap:wrap;gap:7px}
.type-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;flex:1 1 calc(25% - 7px);min-width:65px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);font-family:var(--font-family);font-size:.7rem;font-weight:500;-webkit-tap-highlight-color:transparent}
.type-tab i{font-size:1.1rem;transition:color var(--transition-fast)}
.type-tab:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px)}
.type-tab.active{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:0 4px 15px rgba(108,99,255,.3)}
.type-tab.active i{color:#fff}

/* ===== Social Platforms ===== */
.social-platforms{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.social-btn{width:42px;height:42px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:transform var(--transition-fast),border-color var(--transition-fast);-webkit-tap-highlight-color:transparent}
.social-btn:hover{transform:scale(1.08);border-color:var(--accent-primary)}
.social-btn.active{color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.social-btn[data-platform="whatsapp"].active{background:#25d366}
.social-btn[data-platform="telegram"].active{background:#0088cc}
.social-btn[data-platform="instagram"].active{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.social-btn[data-platform="x"].active{background:#000}
.social-btn[data-platform="facebook"].active{background:#1877f2}
.social-btn[data-platform="tiktok"].active{background:#010101}
.social-btn[data-platform="snapchat"].active{background:#fffc00;color:#000}
.social-btn[data-platform="youtube"].active{background:#ff0000}
.social-btn[data-platform="linkedin"].active{background:#0a66c2}
.social-btn[data-platform="github"].active{background:#333}
.social-btn[data-platform="discord"].active{background:#5865f2}
.social-btn[data-platform="twitch"].active{background:#9146ff}

/* ===== Phone Type Tabs ===== */
.phone-type-tabs{display:flex;gap:6px;margin-bottom:12px}
.phone-type-btn{flex:1;padding:10px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family);font-size:.78rem;font-weight:500;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:6px;-webkit-tap-highlight-color:transparent}
.phone-type-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}
.phone-type-btn.active{background:var(--accent-gradient);color:#fff;border-color:transparent}
.phone-type-btn i{font-size:.95rem}

/* ===== Inputs ===== */
.input-group{display:none}
.input-group.active{display:block}
.input-group label,.color-group label,.style-option label,.range-group label,.select-wrapper label{display:block;font-size:.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:5px;margin-top:10px}
.input-group label:first-child,.color-group label:first-child{margin-top:0}
.input-wrapper{position:relative;display:flex;align-items:center}
.input-wrapper i{position:absolute;right:14px;color:var(--text-muted);font-size:.82rem;pointer-events:none;z-index:1}
.input-wrapper input,.input-wrapper textarea{width:100%;padding:11px 38px 11px 14px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-family);font-size:.9rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;-webkit-appearance:none;appearance:none}
.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
.input-wrapper textarea{resize:vertical;min-height:44px}
.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--text-muted)}

/* ===== Select ===== */
.select-wrapper{position:relative;margin-top:4px}
.select-wrapper select{width:100%;padding:11px 14px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-family);font-size:.88rem;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888bb' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center}
.select-wrapper select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(108,99,255,.15)}

/* ===== Colors ===== */
.color-row{display:flex;gap:12px;margin-bottom:10px}
.color-group{flex:1}
.color-picker-wrap{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:border-color var(--transition-fast)}
.color-picker-wrap:hover{border-color:var(--accent-primary)}
.color-picker-wrap.disabled{opacity:.3;pointer-events:none}
input[type="color"]{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0;-webkit-appearance:none;appearance:none}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]::-webkit-color-swatch{border:2px solid rgba(255,255,255,.2);border-radius:6px}
input[type="color"]::-moz-color-swatch{border:2px solid rgba(255,255,255,.2);border-radius:6px}
.color-value{font-size:.72rem;color:var(--text-muted);font-family:'Courier New',monospace;letter-spacing:.5px}

/* ===== Color Tool Buttons ===== */
.color-tools{display:flex;gap:8px;margin-bottom:8px}
.color-tool-btn{flex:1;padding:8px 12px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family);font-size:.72rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px;transition:border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),background var(--transition-fast);-webkit-tap-highlight-color:transparent}
.color-tool-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px)}
.color-tool-btn:active{transform:translateY(0)}

/* ===== Toggle ===== */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;margin-bottom:2px}
.toggle-row>label{font-size:.85rem;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:8px;cursor:default}
.toggle-label-icon{color:var(--accent-primary);font-size:.82rem}
.toggle-switch{position:relative;width:46px;height:24px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.toggle-switch input{display:none}
.toggle-slider{position:absolute;inset:0;background:var(--bg-input);border:1px solid var(--border-color);border-radius:24px;transition:background var(--transition-fast),border-color var(--transition-fast)}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--text-muted);top:2px;right:3px;transition:transform var(--transition-fast),background var(--transition-fast)}
.toggle-switch input:checked+.toggle-slider{background:var(--accent-primary);border-color:var(--accent-primary)}
.toggle-switch input:checked+.toggle-slider::before{background:#fff;transform:translateX(-20px)}

/* ===== Gradient ===== */
.gradient-options{padding:10px 0;border-top:1px solid var(--border-color);animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ===== Style Buttons ===== */
.dot-styles,.corner-styles,.corner-dot-styles{display:flex;gap:7px;flex-wrap:wrap}
.dot-style-btn,.corner-style-btn,.corner-dot-style-btn{width:44px;height:44px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast);-webkit-tap-highlight-color:transparent}
.dot-style-btn:hover,.corner-style-btn:hover,.corner-dot-style-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.08)}
.dot-style-btn.active,.corner-style-btn.active,.corner-dot-style-btn.active{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(108,99,255,.3)}
.style-option{margin-top:12px}

/* ===== Range ===== */
.range-group{margin-top:12px}
.range-group label{display:flex;justify-content:space-between;align-items:center}
.range-value{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700;font-size:.8rem}
input[type="range"]{width:100%;height:6px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:6px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent-primary);background-image:var(--accent-gradient);border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(108,99,255,.3);cursor:pointer;transition:transform var(--transition-fast)}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;background:var(--accent-primary);border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(108,99,255,.3);cursor:pointer}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}

/* ===== Logo Upload ===== */
.logo-upload-area{border:2px dashed var(--border-color);border-radius:var(--radius-md);padding:22px;text-align:center;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast);overflow:hidden;-webkit-tap-highlight-color:transparent}
.logo-upload-area:hover{border-color:var(--accent-primary);background:rgba(108,99,255,.03)}
.logo-upload-area.drag-over{border-color:var(--accent-primary);background:rgba(108,99,255,.08)}
.upload-placeholder i{font-size:2rem;color:var(--accent-primary);margin-bottom:6px;opacity:.6}
.upload-placeholder p{font-size:.82rem;color:var(--text-secondary);margin-bottom:3px}
.upload-placeholder span{font-size:.7rem;color:var(--text-muted)}
.upload-preview{position:relative;display:inline-block}
.upload-preview img{max-width:80px;max-height:80px;border-radius:var(--radius-sm);object-fit:contain}
.remove-logo{position:absolute;top:-8px;left:-8px;width:24px;height:24px;background:var(--accent-secondary);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:transform var(--transition-fast);-webkit-tap-highlight-color:transparent}
.remove-logo:hover{transform:scale(1.1)}

/* ===== Geo Button ===== */
.btn-geo{width:100%;padding:10px;margin-top:12px;border:1px solid rgba(108,99,255,.3);background:rgba(108,99,255,.1);color:var(--accent-primary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family);font-size:.82rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:background var(--transition-fast),transform var(--transition-fast);-webkit-tap-highlight-color:transparent}
.btn-geo:hover{background:rgba(108,99,255,.18);transform:translateY(-1px)}
.btn-geo.loading{opacity:.6;pointer-events:none}

/* ===== Char Counter ===== */
.char-counter{font-size:.7rem;font-weight:400;color:var(--text-muted);margin-right:auto;margin-left:0;font-family:'Courier New',monospace}
.char-counter.warning{color:#fbbf24}
.char-counter.danger{color:#f87171}

/* ===== Presets ===== */
.presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.preset-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family);font-size:.68rem;font-weight:500;transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);-webkit-tap-highlight-color:transparent}
.preset-btn:hover{border-color:var(--accent-primary);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.preset-preview{width:100%;height:28px;border-radius:5px}

/* ===== Float Button ===== */
.floating-generate{position:fixed;bottom:0;left:0;right:0;z-index:90;padding:12px 24px calc(16px + env(safe-area-inset-bottom, 0px));padding-right:calc(24px + env(safe-area-inset-right, 0px));padding-left:calc(24px + env(safe-area-inset-left, 0px));background:linear-gradient(to top,var(--bg-primary) 50%,transparent);pointer-events:none}
.btn-generate{max-width:600px;width:100%;margin:0 auto;padding:15px 32px;background:var(--accent-gradient);color:#fff;border:none;border-radius:var(--radius-lg);font-family:var(--font-family);font-size:1.05rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform var(--transition-fast),box-shadow var(--transition-fast);position:relative;overflow:hidden;box-shadow:0 -4px 30px rgba(108,99,255,.35),0 4px 20px rgba(108,99,255,.3);pointer-events:all;-webkit-tap-highlight-color:transparent}
.btn-generate:hover{transform:translateY(-3px);box-shadow:0 -4px 40px rgba(108,99,255,.45),0 8px 30px rgba(108,99,255,.4)}
.btn-generate:active{transform:translateY(0)}
.btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:btnShine 3s ease-in-out infinite;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@keyframes btnShine{0%,100%{transform:translate3d(-100%,0,0)}50%{transform:translate3d(100%,0,0)}}

/* ===== Preview ===== */
.preview-sticky{position:sticky;top:82px;display:flex;flex-direction:column;gap:16px}
.preview-card{display:flex;flex-direction:column;align-items:center}
.qr-preview-container{width:100%;min-height:250px;display:flex;align-items:center;justify-content:center;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:18px;transition:background var(--transition-fast);position:relative;overflow:hidden;contain:layout style}
.qr-preview-container.transparent-bg{background-image:linear-gradient(45deg,rgba(200,200,200,.3) 25%,transparent 25%),linear-gradient(-45deg,rgba(200,200,200,.3) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(200,200,200,.3) 75%),linear-gradient(-45deg,transparent 75%,rgba(200,200,200,.3) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--bg-input)}
.qr-placeholder{text-align:center;color:var(--text-muted)}
.qr-placeholder i{font-size:3rem;margin-bottom:10px;opacity:.2}
.qr-placeholder p{font-size:.88rem;opacity:.5}
.qr-canvas{display:flex;align-items:center;justify-content:center}
.qr-canvas canvas,.qr-canvas svg{border-radius:var(--radius-sm);max-width:100%;height:auto}
.qr-canvas.generated{animation:qrPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes qrPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}

/* ===== Fullscreen Button ===== */
.btn-fullscreen{width:100%;margin-top:10px;padding:10px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family);font-size:.82rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);-webkit-tap-highlight-color:transparent}
.btn-fullscreen:hover:not(:disabled){border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px)}
.btn-fullscreen:disabled{opacity:.3;cursor:not-allowed}

/* ===== Preview Data Hint ===== */
.preview-data-hint{font-size:.68rem;color:var(--text-muted);text-align:center;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-height:18px;transition:opacity var(--transition-fast);direction:ltr}
.preview-data-hint:empty{display:none}

/* ===== Generate Button Loading ===== */
.btn-generate.loading{pointer-events:none;opacity:.85}
.btn-generate.loading .fa-magic{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== Collapsible Sections ===== */
.section-title.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}
.section-title.collapsible::after{content:'\f077';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.65rem;margin-right:auto;margin-left:0;color:var(--text-muted);transition:transform var(--transition-fast)}
.section-title.collapsible.collapsed::after{transform:rotate(180deg)}
.section-collapsible{max-height:2000px;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:1}
.section-collapsible.collapsed{max-height:0;opacity:0;overflow:hidden}

/* ===== Copy Flash ===== */
.copy-flash{animation:copyFlash .4s ease}
@keyframes copyFlash{0%{box-shadow:0 0 0 0 rgba(108,99,255,.5)}50%{box-shadow:0 0 0 8px rgba(108,99,255,0)}100%{box-shadow:none}}

/* ===== Double Click Hint ===== */
.qr-preview-container{cursor:pointer}

/* ===== Downloads ===== */
.download-card{border:1px solid rgba(108,99,255,.2)}
.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.btn-download{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-family);transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast);text-align:right;-webkit-tap-highlight-color:transparent}
.btn-download:disabled{opacity:.3;cursor:not-allowed}
.btn-download:not(:disabled):hover{transform:translateY(-2px);border-color:transparent;box-shadow:0 4px 18px rgba(0,0,0,.2)}
.btn-download-png:not(:disabled):hover{background:linear-gradient(135deg,#6c63ff,#7c74ff);color:#fff}
.btn-download-svg:not(:disabled):hover{background:linear-gradient(135deg,#00b4d8,#0096c7);color:#fff}
.btn-download-jpeg:not(:disabled):hover{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.btn-download-pdf:not(:disabled):hover{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.btn-download-webp:not(:disabled):hover{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.btn-download-all:not(:disabled):hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}
.btn-download:not(:disabled):hover .dl-icon i,.btn-download:not(:disabled):hover .dl-desc{color:rgba(255,255,255,.85)}
.dl-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.15rem}
.btn-download-png .dl-icon i{color:#6c63ff}.btn-download-svg .dl-icon i{color:#00b4d8}.btn-download-jpeg .dl-icon i{color:#f59e0b}.btn-download-pdf .dl-icon i{color:#ef4444}
.btn-download-webp .dl-icon i{color:#10b981}.btn-download-all .dl-icon i{color:#8b5cf6}
.dl-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.dl-format{font-size:.85rem;font-weight:700;letter-spacing:.5px}
.dl-desc{font-size:.62rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Toast ===== */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-120px);background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-glow);color:var(--text-primary);padding:11px 24px;border-radius:var(--radius-xl);display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600;box-shadow:0 8px 40px rgba(0,0,0,.5);z-index:1000;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;opacity:0;white-space:nowrap;will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast i{color:#4ade80;font-size:1rem;flex-shrink:0}

/* ===== Quick Size Buttons ===== */
.quick-sizes{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.quick-size-btn{padding:5px 10px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-family:var(--font-family);font-size:.7rem;font-weight:600;transition:border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),background var(--transition-fast);-webkit-tap-highlight-color:transparent}
.quick-size-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px)}
.quick-size-btn.active{background:var(--accent-gradient);color:#fff;border-color:transparent}

/* ===== Designer Tools ===== */
.tools-card{border:1px solid rgba(108,99,255,.15)}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tool-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family);font-size:.68rem;font-weight:500;transition:border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);-webkit-tap-highlight-color:transparent}
.tool-btn i{font-size:1.05rem;transition:transform var(--transition-fast)}
.tool-btn:hover:not(:disabled){border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,99,255,.15)}
.tool-btn:hover:not(:disabled) i{transform:scale(1.1)}
.tool-btn:disabled{opacity:.3;cursor:not-allowed}
.tool-btn:active:not(:disabled){transform:translateY(0)}
.shortcut-hint{text-align:center;font-size:.68rem;color:var(--text-muted);margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;opacity:.6}
.shortcut-hint i{font-size:.72rem}

/* ===== Fullscreen Modal ===== */
.fullscreen-modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fadeIn .3s ease}
.fullscreen-modal.active{display:flex}
.fullscreen-close{position:fixed;top:20px;left:20px;width:50px;height:50px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.3rem;z-index:2001;transition:background var(--transition-fast),transform var(--transition-fast)}
.fullscreen-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}
.fullscreen-qr{max-width:80vw;max-height:80vh;display:flex;align-items:center;justify-content:center}
.fullscreen-qr canvas,.fullscreen-qr svg{max-width:100%;max-height:80vh;border-radius:var(--radius-lg)}

/* ===== History Panel ===== */
.history-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1500;display:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.history-overlay.active{display:block}
.history-panel{position:fixed;top:0;left:-420px;width:400px;max-width:90vw;height:100vh;height:100dvh;background:var(--bg-primary);border-right:1px solid var(--border-color);z-index:1501;transition:left .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
.history-panel.active{left:0}
.history-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-color)}
.history-header h3{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.history-header h3 i{color:var(--accent-primary)}
.history-actions{display:flex;gap:8px}
.btn-clear-history{padding:6px 12px;border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.1);color:#ef4444;border-radius:6px;cursor:pointer;font-family:var(--font-family);font-size:.7rem;font-weight:500;display:flex;align-items:center;gap:4px;transition:background var(--transition-fast)}
.btn-clear-history:hover{background:rgba(239,68,68,.2)}
.history-close{width:36px;height:36px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background var(--transition-fast)}
.history-close:hover{background:var(--bg-card-hover)}
.history-list{flex:1;overflow-y:auto;padding:14px}
.history-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}
.history-empty i{font-size:2.5rem;opacity:.2;margin-bottom:10px}
.history-empty p{font-size:.85rem}
.history-item{display:flex;gap:12px;padding:12px;border:1px solid var(--border-color);background:var(--bg-card);border-radius:var(--radius-md);margin-bottom:10px;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);align-items:center}
.history-item:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}
.history-item-img{width:60px;height:60px;border-radius:8px;object-fit:contain;background:var(--bg-input);flex-shrink:0}
.history-item-info{flex:1;min-width:0}
.history-item-type{font-size:.72rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase}
.history-item-data{font-size:.75rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.history-item-date{font-size:.65rem;color:var(--text-muted);margin-top:4px}
.history-item-delete{width:30px;height:30px;border:none;background:rgba(239,68,68,.1);color:#ef4444;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;transition:background var(--transition-fast)}
.history-item-delete:hover{background:rgba(239,68,68,.25)}

/* ===== Footer ===== */
.footer{text-align:center;padding:22px 0;color:var(--text-muted);font-size:.82rem;position:relative;z-index:1;border-top:1px solid var(--border-color)}
.footer .fa-heart{color:var(--accent-secondary)}
.footer-link{color:var(--text-primary);text-decoration:none;transition:color var(--transition-fast)}
.footer-link:hover{color:var(--accent-primary)}
.pulse-icon{animation:pulse 1.5s ease-in-out infinite;display:inline-block}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== Responsive ===== */
@media(max-width:900px){.generator-grid{grid-template-columns:1fr}.preview-sticky{position:static}.hero{padding:24px 0 16px}.header-stat-label{display:none}.history-panel{width:100%;max-width:100%;left:-100%}}
@media(max-width:600px){.container{padding:0 14px}.type-tab{min-width:58px;padding:8px 6px;font-size:.65rem}.section-card{padding:16px}.hero-title{font-size:1.3rem}.download-grid{grid-template-columns:1fr}.presets-grid{grid-template-columns:repeat(3,1fr)}.color-row{flex-direction:column}.floating-generate{padding:8px 14px 12px}.btn-generate{font-size:.95rem;padding:13px 20px}.social-platforms{gap:5px}.social-btn{width:38px;height:38px;font-size:1rem}.tools-grid{grid-template-columns:repeat(2,1fr)}.header-center{display:none}.nav-actions{gap:5px}.btn-icon{width:36px;height:36px;font-size:.95rem}}

/* ===== Reduce motion ===== */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .bg-animation{display:none}
}

/* ===== Print ===== */
@media print{.header,.hero,.options-panel,.floating-generate,.footer,.tools-card,.download-card,.toast,.bg-animation,.fullscreen-modal,.history-panel,.history-overlay{display:none!important}.generator-grid{grid-template-columns:1fr!important}.qr-preview-container{border:none!important;padding:0!important}.body{padding:0!important;background:#fff!important}}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:7px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-secondary)}
@supports(scrollbar-color:auto){html{scrollbar-color:var(--accent-primary) var(--bg-primary);scrollbar-width:thin}}
::selection{background:rgba(108,99,255,.3);color:#fff}
::-moz-selection{background:rgba(108,99,255,.3);color:#fff}

/* ===== Marketing Components ===== */
.share-actions{display:flex;gap:8px;margin-top:12px}
.btn-share-tool,.btn-share-achievement{flex:1;padding:10px 14px;border:none;border-radius:12px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .3s ease}
.btn-share-tool{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff}
.btn-share-tool:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(108,99,255,.35)}
.btn-share-achievement{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}
.btn-share-achievement:hover{border-color:var(--accent-primary);background:var(--bg-card-hover)}
.share-dropdown{position:relative;display:flex;gap:6px;margin-top:8px;padding:10px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-wrap:wrap}
.share-option{flex:1;min-width:80px;padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;background:transparent;color:var(--text-primary);font-family:inherit;font-size:.78rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .2s}
.share-option:hover{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}
.share-option i{font-size:1rem}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}
.toggle-row label:first-child{font-size:.85rem;color:var(--text-secondary)}
.option-hint{display:block;font-size:.72rem;color:var(--text-muted);margin-top:4px;line-height:1.5}

/* ===== Collapsible Sections ===== */
.section-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between}
.toggle-arrow{font-size:.7rem;transition:transform .3s ease;margin-right:auto;margin-left:8px}
.section-toggle.collapsed .toggle-arrow{transform:rotate(-90deg)}
.section-body{overflow:hidden;transition:max-height .3s ease;padding-top:8px}

/* ===== Show More / Advanced Customize ===== */
.btn-show-more{width:100%;padding:8px;margin-top:10px;background:transparent;border:1px dashed var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .2s ease;font-family:inherit}
.btn-show-more:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:rgba(108,99,255,.05)}
.btn-show-more i{margin-left:6px;transition:transform .3s ease}
.btn-show-more.expanded i{transform:rotate(180deg)}
.advanced-customize{padding-top:12px;border-top:1px solid var(--border-color);margin-top:12px}

/* ===== Feedback Modal ===== */
.feedback-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s ease}
.feedback-overlay.active{opacity:1;pointer-events:auto}
.feedback-modal{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:min(440px,92vw);background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:24px;z-index:9999;transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 40px rgba(0,0,0,.3)}
.feedback-modal.active{transform:translateX(-50%) translateY(0)}
.feedback-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.feedback-modal-header h3{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0}
.feedback-modal-header h3 i{margin-left:8px;color:var(--accent-primary)}
.feedback-close{background:none;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all .2s}
.feedback-close:hover{color:var(--text-primary);background:rgba(255,255,255,.08)}
.feedback-desc{font-size:.83rem;color:var(--text-secondary);margin-bottom:14px}
.feedback-type-tabs{display:flex;gap:8px;margin-bottom:12px}
.feedback-type{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);font-size:.78rem;cursor:pointer;transition:all .2s;font-family:inherit}
.feedback-type.active{background:var(--accent-gradient);color:#fff;border-color:transparent}
.feedback-type i{margin-left:4px}
.feedback-textarea{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:.85rem;resize:none;min-height:80px;transition:border-color .2s;box-sizing:border-box}
.feedback-textarea:focus{outline:none;border-color:var(--accent-primary)}
.feedback-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.feedback-counter{font-size:.75rem;color:var(--text-muted)}
.feedback-submit{padding:8px 22px;border:none;border-radius:20px;background:var(--accent-gradient);color:#fff;font-weight:600;font-size:.85rem;cursor:pointer;transition:transform .2s,opacity .2s;font-family:inherit}
.feedback-submit:hover{transform:scale(1.03);opacity:.9}
.feedback-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.feedback-submit i{margin-left:6px}
.feedback-trigger{background:none;border:none;color:var(--text-muted);font-size:.78rem;cursor:pointer;padding:6px 0;font-family:inherit;transition:color .2s;margin-top:4px}
.feedback-trigger:hover{color:var(--accent-primary)}
.feedback-trigger i{margin-left:4px}
.footer .container{display:flex;flex-direction:column;align-items:center}
.footer-actions{display:flex;align-items:center;gap:8px;margin-top:4px}
.footer-sep{color:var(--text-muted);font-size:.7rem}
.support-link{color:var(--text-muted);font-size:.78rem;text-decoration:none;transition:color .2s}
.support-link:hover{color:#ff6b8a}
.support-link i{margin-left:4px;color:#ff6b8a}

/* Feedback contact row */
.feedback-contact-row{margin-top:10px}
.feedback-contact-row label{font-size:.78rem;color:var(--text-secondary);display:block;margin-bottom:4px}
.feedback-contact-row label i{margin-left:4px;font-size:.7rem}
.feedback-contact-input{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:.83rem;transition:border-color .2s;box-sizing:border-box}
.feedback-contact-input:focus{outline:none;border-color:var(--accent-primary)}

/* Support Modal */
.support-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:10000;display:none;align-items:center;justify-content:center}
.support-modal.active{display:flex}
.support-modal-content{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:32px;text-align:center;max-width:380px;width:90vw;position:relative;animation:supportSlideIn .4s ease}
@keyframes supportSlideIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.support-close{position:absolute;top:12px;left:12px;background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all .2s}
.support-close:hover{color:var(--text-primary);background:rgba(255,255,255,.08)}
.support-icon{width:56px;height:56px;background:linear-gradient(135deg,#ff6b8a,#ff4757);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.5rem;color:#fff;animation:heartPulse 1.5s ease infinite}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.support-title{font-size:1.15rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.support-text{font-size:.85rem;color:var(--text-secondary);line-height:1.6;margin-bottom:20px}
.support-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,#0070ba,#003087);color:#fff;border:none;border-radius:25px;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:inherit}
.support-btn:hover{transform:scale(1.04);box-shadow:0 6px 20px rgba(0,112,186,.4)}
.support-btn i{font-size:1.1rem}
.support-later{display:block;margin:12px auto 0;background:none;border:none;color:var(--text-muted);font-size:.8rem;cursor:pointer;font-family:inherit;transition:color .2s}
.support-later:hover{color:var(--text-secondary)}