:root{ --bg-deep:#0a0712; --bg-dark:#110e1e; --accent:#9147ff; --accent-light:#b44fff; --accent-glow:rgba(145, 71, 255, 0.35); --cyan:#00d4ff; --gold:#ffd54f; --silver:#cfd8dc; --bronze:#e09430; --green:#40cf7c; --red:#ef5350; --glass-bg:rgba(255, 255, 255, 0.04); --glass-border:rgba(255, 255, 255, 0.09); --text-1:#efeff1; --text-2:#adadb8; --text-3:#6b6b8a; --radius:16px; --radius-sm:8px; --ease:all 0.2s ease; --sidebar:310px; --header:64px;}*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0;}html{ scroll-behavior:smooth;}body{ font-family:'Inter', system-ui, sans-serif; background:var(--bg-deep); color:var(--text-1); min-height:100vh; overflow-x:hidden;}.bg-animated{ position:fixed; inset:0; z-index:0; background: radial-gradient(ellipse 80% 60% at 15% 10%, rgba(145, 71, 255, 0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 85% 85%, rgba(0, 212, 255, 0.09) 0%, transparent 55%), radial-gradient(ellipse 100% 100% at 50% 50%, var(--bg-dark) 0%, var(--bg-deep) 100%); animation:bgPulse 14s ease-in-out infinite alternate;}@keyframes bgPulse{ 0%{ filter:hue-rotate(0deg); } 100%{ filter:hue-rotate(12deg); }}.glass{ background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); position:relative; z-index:1;}.dashboard-page{ min-height:100vh; padding-top:var(--header);}.mode-selection-container{ max-width:900px; margin:0 auto;}.mode-card{ background:rgba(255, 255, 255, 0.03); border:1px solid rgba(255, 255, 255, 0.08); box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);}.mode-card:hover{ background:rgba(255, 255, 255, 0.05); border-color:var(--accent); box-shadow:0 10px 40px rgba(145, 71, 255, 0.2), inset 0 0 20px rgba(145, 71, 255, 0.1);}.app-header{ position:fixed; top:0; left:0; right:0; height:var(--header); z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-top:none; border-left:none; border-right:none; border-radius:0; border-bottom:1px solid var(--glass-border);}.header-brand{ display:flex; align-items:center; gap:10px;}.header-logo{ font-size:1.4rem;}.header-title{ font-size:1.05rem; font-weight:800; background:linear-gradient(135deg, #9147ff, #00d4ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}.header-user{ display:flex; align-items:center; gap:12px;}.user-avatar{ width:36px; height:36px; border-radius:50%; border:2px solid var(--accent); object-fit:cover;}.user-info{ display:flex; flex-direction:column; line-height:1.25;}.user-display-name{ font-size:0.88rem; font-weight:600;}.user-login{ font-size:0.73rem; color:var(--text-2);}.avatar-wrapper{ position:relative; display:flex; align-items:center;}.avatar-badge{ position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); border-radius:50%; z-index:2;}.btn-settings{ background:rgba(255, 255, 255, 0.05); border:1px solid var(--glass-border); color:var(--text-2); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); cursor:pointer; transition:var(--ease);}.btn-settings:hover{ background:rgba(145, 71, 255, 0.1); color:var(--accent); border-color:rgba(145, 71, 255, 0.3); transform:rotate(30deg);}.btn-logout{ display:flex; align-items:center; gap:6px; padding:7px 13px; background:rgba(239, 83, 80, 0.1); border:1px solid rgba(239, 83, 80, 0.2); border-radius:var(--radius-sm); color:#ff8a80; font-size:0.8rem; font-weight:500; text-decoration:none; transition:var(--ease);}.btn-logout:hover{ background:rgba(239, 83, 80, 0.2); transform:translateY(-1px);}.app-layout{ display:grid; grid-template-columns:var(--sidebar) 1fr; gap:18px; padding:18px; min-height:calc(100vh - var(--header)); position:relative; z-index:1;}.main-content{ display:flex; flex-direction:column; gap:14px;}.card{ border-radius:var(--radius); padding:18px;}.card-title{ display:flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-2); margin-bottom:14px;}.modal{ position:fixed; inset:0; z-index:1000; background:rgba(0, 0, 0, 0.85); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity 0.3s ease;}.modal.active{ display:flex; opacity:1;}.modal-content-card{ width:100%; max-width:500px; border-radius:24px; padding:30px; animation:modalSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);}@keyframes modalSlide{ from{ transform:translateY(20px); opacity:0; } to{ transform:translateY(0); opacity:1; }}.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}.modal-title{ font-size:1.25rem; font-weight:800;}.btn-close{ background:none; border:none; color:var(--text-3); cursor:pointer; padding:5px; transition:var(--ease);}.btn-close:hover{ color:var(--text-1); transform:rotate(90deg);}.settings-group{ margin-bottom:20px;}.settings-label{ display:block; font-size:0.85rem; font-weight:600; color:var(--text-2); margin-bottom:8px;}.settings-input{ width:100%; background:rgba(0, 0, 0, 0.3); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:12px; color:var(--text-1); font-family:inherit; transition:var(--ease);}.settings-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow);}.settings-help{ font-size:0.75rem; color:var(--text-3); margin-top:8px; line-height:1.5;}.modal-footer{ display:flex; justify-content:flex-end; gap:12px; margin-top:10px;}.btn-cancel{ background:none; border:1px solid var(--glass-border); color:var(--text-2); padding:10px 20px; border-radius:var(--radius-sm); cursor:pointer; font-weight:600;}.btn-save{ background:var(--accent); border:none; color:#fff; padding:10px 24px; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; box-shadow:0 4px 15px var(--accent-glow);}.btn-save:hover{ filter:brightness(1.1); transform:translateY(-1px);}.history-card{ padding:12px 16px; display:flex; flex-direction:column;}.history-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}.btn-clear{ font-size:0.75rem; color:var(--text-3); background:none; border:none; cursor:pointer; transition:var(--ease);}.btn-clear:hover{ color:var(--red);}.history-list{ display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; padding-right:5px;}.history-list::-webkit-scrollbar{ width:6px;}.history-list::-webkit-scrollbar-track{ background:transparent;}.history-list::-webkit-scrollbar-thumb{ background:rgba(255, 255, 255, 0.1); border-radius:10px;}.history-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-sm); background:rgba(145, 71, 255, 0.06); border:1px solid rgba(145, 71, 255, 0.12); animation:fadeUp 0.3s ease;}.history-name{ flex:1; font-weight:700; font-size:0.95rem;}.premium-mode-switcher{ position:relative; margin-right:15px;}.premium-mode-trigger{ display:flex; align-items:center; gap:8px; padding:6px 12px; background:rgba(145, 71, 255, 0.1); border:1px solid rgba(145, 71, 255, 0.2); border-radius:10px; color:#fff; cursor:pointer; transition:var(--ease); font-family:inherit;}.premium-mode-trigger:hover{ background:rgba(145, 71, 255, 0.2); border-color:var(--accent);}.trigger-icon{ font-size:1.1rem;}#trigger-label{ font-weight:700; font-size:0.85rem;}.trigger-chevron{ font-size:0.7rem; opacity:0.5; transition:transform 0.3s ease;}.premium-mode-switcher.open .trigger-chevron{ transform:rotate(180deg);}.premium-dropdown{ position:absolute; top:calc(100% + 10px); right:0; width:260px; background:#161223; border:1px solid var(--glass-border); border-radius:16px; padding:8px; box-shadow:0 10px 40px rgba(0, 0, 0, 0.6); display:none; flex-direction:column; z-index:1000; animation:fadeUp 0.2s ease-out;}.premium-mode-switcher.open .premium-dropdown{ display:flex;}.dropdown-section-label{ padding:10px 12px 5px; font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3);}.dropdown-item{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border:none; background:none; color:var(--text-2); cursor:pointer; border-radius:10px; transition:var(--ease); text-align:left; width:100%;}.dropdown-item:hover{ background:rgba(255, 255, 255, 0.05); color:var(--text-1);}.dropdown-item.active{ background:rgba(145, 71, 255, 0.1); color:var(--accent);}.item-icon{ font-size:1.25rem; padding-top:2px;}.item-content{ display:flex; flex-direction:column; line-height:1.3;}.item-label{ font-weight:700; font-size:0.88rem;}.item-label{ font-weight:700; font-size:0.88rem;}.item-desc{ font-size:0.72rem; opacity:0.7;}.dropdown-divider{ height:1px; background:var(--glass-border); margin:6px 10px;}@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); }}.sidebar{ display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - var(--header) - 36px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--accent) transparent;}.sidebar::-webkit-scrollbar{ width:4px;}.sidebar::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:2px;}.multiplier-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px;}.tier-badge{ padding:3px 9px; border-radius:5px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; min-width:50px; text-align:center; flex-shrink:0;}.tier-1{ background:rgba(194, 124, 14, 0.18); color:var(--bronze); border:1px solid rgba(194, 124, 14, 0.35);}.tier-2{ background:rgba(168, 178, 195, 0.15); color:var(--silver); border:1px solid rgba(168, 178, 195, 0.35);}.tier-3{ background:rgba(240, 179, 50, 0.18); color:var(--gold); border:1px solid rgba(240, 179, 50, 0.35);}.multiplier-controls{ display:flex; align-items:center; gap:4px; flex:1;}.mult-btn{ width:28px; height:28px; flex-shrink:0; background:rgba(145, 71, 255, 0.13); border:1px solid rgba(145, 71, 255, 0.22); color:var(--accent); border-radius:6px; cursor:pointer; font-size:1.1rem; font-weight:700; transition:var(--ease);}.mult-btn:hover{ background:rgba(145, 71, 255, 0.28);}.mult-input{ flex:1; text-align:center; min-width:0; background:rgba(0, 0, 0, 0.28); border:1px solid var(--glass-border); color:var(--text-1); font-family:'Inter', sans-serif; font-size:1rem; font-weight:700; padding:4px 6px; border-radius:6px; -moz-appearance:textfield; appearance:textfield;}.mult-input::-webkit-outer-spin-button,.mult-input::-webkit-inner-spin-button{ -webkit-appearance:none;}.mult-input:focus{ outline:none; border-color:var(--accent);}.mult-label{ font-size:0.72rem; color:var(--text-3); flex-shrink:0;}.toggle-row{ display:flex; align-items:center; justify-content:space-between; font-size:0.83rem; color:var(--text-2); cursor:pointer; padding:6px 0; margin-top:4px;}.subscribers-card{ display:flex; flex-direction:column; flex:none;}.subscribers-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}.sub-counts{ display:flex; gap:5px;}.sub-count-badge{ padding:2px 7px; border-radius:4px; font-size:0.68rem; font-weight:700;}.s-t1{ background:rgba(194, 124, 14, 0.18); color:var(--bronze);}.s-t2{ background:rgba(168, 178, 195, 0.15); color:var(--silver);}.s-t3{ background:rgba(240, 179, 50, 0.18); color:var(--gold);}.search-box{ display:flex; align-items:center; gap:8px; background:rgba(0, 0, 0, 0.25); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:7px 10px; margin-bottom:10px; color:var(--text-3);}.search-input{ background:none; border:none; color:var(--text-1); font-family:'Inter', sans-serif; font-size:0.83rem; width:100%;}.search-input::placeholder{ color:var(--text-3);}.sub-list-container{ flex:1; overflow-y:auto; min-height:120px; max-height:280px; margin-bottom:10px; scrollbar-width:thin; scrollbar-color:var(--accent) transparent;}.sub-list{ display:flex; flex-direction:column; gap:3px;}.sub-item{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; background:rgba(255, 255, 255, 0.02); border:1px solid transparent; transition:var(--ease); font-size:0.83rem;}.sub-item:hover{ background:rgba(145, 71, 255, 0.08); border-color:rgba(145, 71, 255, 0.15);}.sub-item-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}.sub-total{ font-size:0.78rem; color:var(--text-3); text-align:center; margin-bottom:10px;}.sub-info{ display:flex; align-items:center; gap:6px; flex:1; overflow:hidden;}.sub-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}.sub-tier-mini{ padding:1px 5px; border-radius:4px; font-size:0.65rem; font-weight:700; background:rgba(145, 71, 255, 0.15); color:var(--accent); flex-shrink:0;}.btn-load{ width:100%; margin-top:10px; padding:12px !important; font-size:0.9rem !important; font-weight:700 !important; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:12px !important; background:linear-gradient(135deg, var(--accent), #7c3aed) !important; box-shadow:0 4px 15px var(--accent-glow) !important; border:none !important; color:white !important; cursor:pointer; transition:all 0.3s ease;}.btn-load:hover{ transform:translateY(-2px); box-shadow:0 6px 20px var(--accent-glow) !important; filter:brightness(1.1);}.btn-load:disabled{ opacity:0.6; cursor:not-allowed; transform:none;}.raffle-stage{ border-radius:var(--radius); padding:28px; border-color:rgba(145, 71, 255, 0.2); box-shadow:0 0 60px rgba(145, 71, 255, 0.08); display:flex; flex-direction:column; align-items:center; gap:20px; flex:1;}.stage-header{ display:flex; align-items:center; gap:14px; width:100%;}.stage-title{ font-size:1rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-2);}.stage-status-badge{ padding:4px 12px; border-radius:20px; background:rgba(145, 71, 255, 0.12); border:1px solid rgba(145, 71, 255, 0.25); font-size:0.75rem; font-weight:600; color:var(--accent);}.raffle-display-wrap{ position:relative; width:100%; max-width:950px; height:180px; overflow:hidden; border-radius:var(--radius); background:rgba(0, 0, 0, 0.35); border:1px solid var(--glass-border); transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink:0;}.raffle-blur-top,.raffle-blur-bottom{ position:absolute; left:0; right:0; height:44px; z-index:2; pointer-events:none;}.raffle-blur-top{ top:0; background:linear-gradient(to bottom, rgba(10, 7, 18, 0.9), transparent);}.raffle-blur-bottom{ bottom:0; background:linear-gradient(to top, rgba(10, 7, 18, 0.9), transparent);}.raffle-display{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center;}.raffle-view{ display:none; width:100%; height:100%; position:relative; flex-direction:column; align-items:center; justify-content:center;}.raffle-view.active{ display:flex;}.raffle-display-inner{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;}.raffle-reel{ display:flex; flex-direction:column; width:100%; will-change:transform; position:absolute; top:0; left:0;}.raffle-name{ height:180px; width:100%; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0 40px; font-size:2.6rem; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}.raffle-display-wrap::after{ content:''; position:absolute; left:10px; right:10px; top:50%; height:2px; background:var(--accent); opacity:0.3; transform:translateY(-50%); z-index:5; pointer-events:none; box-shadow:0 0 15px var(--accent);}.raffle-display-wrap::before{ content:'▶'; position:absolute; left:4px; top:50%; font-size:1.2rem; color:var(--accent); transform:translateY(-50%); z-index:6; text-shadow:0 0 10px var(--accent);}.raffle-placeholder{ text-align:center; z-index:10;}.placeholder-icon{ font-size:3rem; margin-bottom:8px; opacity:0.5;}.placeholder-text{ font-size:1.4rem; font-weight:700; color:var(--text-2); margin-bottom:4px;}.placeholder-sub{ font-size:0.82rem; color:var(--text-3);}.raffle-display.spinning{ font-size:2.2rem; animation:textBlur 0.08s ease infinite;}@keyframes textBlur{ 0%, 100%{ filter:blur(0px); } 50%{ filter:blur(1px); }}.raffle-display.winner-reveal{ font-size:3rem; color:var(--gold); text-shadow:0 0 40px rgba(255, 213, 79, 0.6), 0 0 80px rgba(145, 71, 255, 0.4); animation:winnerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);}@keyframes winnerPop{ from{ transform:scale(0.5); opacity:0; } to{ transform:scale(1); opacity:1; }}.winner-info{ display:none; flex-direction:column; align-items:center; gap:8px;}.winner-info.visible{ display:flex; animation:fadeUp 0.4s ease;}.winner-avatar{ width:120px; height:120px; border-radius:50%; border:4px solid var(--gold); margin-bottom:15px; box-shadow:0 0 30px var(--gold); object-fit:cover; animation:winnerAvatarPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);}@keyframes winnerAvatarPop{ from{ transform:scale(0) rotate(-20deg); } to{ transform:scale(1) rotate(0deg); }}.winner-tier-badge{ padding:6px 18px; border-radius:20px; font-size:0.88rem; font-weight:700;}.winner-crown{ font-size:1.1rem; font-weight:800; color:var(--gold); letter-spacing:0.05em;}.stage-controls{ display:flex; gap:12px; align-items:center;}.btn-raffle{ display:flex; align-items:center; gap:10px; padding:14px 36px; border:none; border-radius:12px; background:linear-gradient(135deg, var(--accent), #6d28d9); color:#fff; font-family:'Inter', sans-serif; font-size:1.05rem; font-weight:700; cursor:pointer; transition:var(--ease); box-shadow:0 4px 24px rgba(145, 71, 255, 0.45);}.btn-raffle.spinning{ animation:pulse 0.8s ease infinite; cursor:not-allowed;}@keyframes pulse{ 0%, 100%{ box-shadow:0 4px 24px rgba(145, 71, 255, 0.45); } 50%{ box-shadow:0 4px 40px rgba(145, 71, 255, 0.8); }}.btn-reset{ display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; background:rgba(255, 255, 255, 0.06); border:1px solid var(--glass-border); color:var(--text-2); font-family:'Inter', sans-serif; font-size:0.88rem; font-weight:600; cursor:pointer; transition:var(--ease);}.elimination-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:14px; width:100%; padding:16px; overflow-y:auto; perspective:1000px; align-content:start;}.finalist-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; background:rgba(255, 255, 255, 0.03); border:1px solid var(--glass-border); border-radius:16px; transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1); opacity:0; transform:translateY(20px) scale(0.9);}.finalist-card.visible{ opacity:1; transform:translateY(0) scale(1);}.finalist-card.winner-showcase{ background:rgba(255, 215, 0, 0.15); border-color:var(--gold); transform:scale(1.3) translateY(-10px); z-index:50; box-shadow:0 0 40px rgba(255, 215, 0, 0.4), 0 0 80px rgba(255, 215, 0, 0.1);}.finalist-card.winner-showcase .finalist-avatar{ border-color:var(--gold); width:70px; height:70px;}.finalist-card.winner-showcase .finalist-name{ color:var(--gold); font-size:0.9rem; font-weight:800;}.finalist-avatar{ width:50px; height:50px; border-radius:50%; border:2px solid var(--accent); padding:2px; object-fit:cover;}.finalist-name{ font-size:0.75rem; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2);}.finalist-card.eliminated{ opacity:0.15; filter:grayscale(1); transform:scale(0.85);}.finalist-card.highlight{ background:rgba(145, 71, 255, 0.2); border-color:var(--accent); transform:scale(1.1); z-index:2; box-shadow:0 0 20px var(--accent-glow);}.finalist-card.highlight{ background:rgba(145, 71, 255, 0.4); border-color:var(--accent); transform:scale(1.15); z-index:10; box-shadow:0 0 30px var(--accent-glow), 0 0 60px rgba(145, 71, 255, 0.2);}.purge-container{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; height:100%; position:relative; overflow:hidden;}#purge-canvas{ position:absolute; inset:0; pointer-events:none; z-index:1;}.purge-counter{ font-size:7rem; font-weight:900; background:linear-gradient(135deg, #fff, var(--accent)); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 30px var(--accent-glow)); z-index:2; position:relative; animation:pulseSlow 2s ease-in-out infinite;}@keyframes pulseSlow{ 0%, 100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.05); opacity:0.8; }}.purge-label{ font-size:1.6rem; font-weight:800; color:var(--text-2); letter-spacing:5px; text-transform:uppercase; z-index:2; position:relative; text-shadow:0 0 20px rgba(255, 255, 255, 0.2);}.raffle-stage.elimination-active{ position:relative; min-height:550px;}.raffle-stage.elimination-active .raffle-display-wrap{ height:auto; flex:1; max-width:100%; overflow-y:auto; max-height:none; background:transparent; border-color:transparent;}.raffle-stage.elimination-active .raffle-blur-top,.raffle-stage.elimination-active .raffle-blur-bottom,.raffle-stage.elimination-active .raffle-display-wrap::before,.raffle-stage.elimination-active .raffle-display-wrap::after{ display:none !important;}.slot-machine-container{ width:100%; height:100%; background:rgba(0, 0, 0, 0.4); border:3px solid var(--accent); border-radius:20px; position:relative; overflow:hidden; display:flex; align-items:center; box-shadow:0 0 50px var(--accent-glow), inset 0 0 30px rgba(0, 0, 0, 0.5);}.slot-machine-strip{ display:flex; gap:40px; position:absolute; left:0; padding:0 calc(50% - 175px); will-change:transform;}.slot-item{ width:350px; flex:0 0 350px; text-align:center; font-size:2.8rem; font-weight:900; color:#fff; white-space:nowrap; text-shadow:0 0 20px var(--accent); letter-spacing:-1px;}.slot-machine-marker{ position:absolute; left:50%; top:0; width:8px; height:100%; background:var(--cyan); transform:translateX(-50%); box-shadow:0 0 25px var(--cyan); z-index:10; pointer-events:none;}.slot-machine-marker::before,.slot-machine-marker::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent;}.slot-machine-marker::before{ top:-5px; border-top:20px solid var(--cyan);}.slot-machine-marker::after{ bottom:-5px; border-bottom:20px solid var(--cyan);}.support-premium-card{ transition:all 0.3s ease; border:1px solid rgba(255, 215, 0, 0.1) !important;}.support-premium-card:hover{ transform:translateY(-5px); border-color:rgba(255, 215, 0, 0.4) !important; box-shadow:0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.1);}@keyframes pulse-glow{ 0%, 100%{box-shadow:0 0 10px rgba(255, 215, 0, 0.3);} 50%{box-shadow:0 0 25px rgba(255, 215, 0, 0.6);}}.floating-donation{ position:fixed; bottom:30px; right:30px; z-index:1000; opacity:0; pointer-events:none; transform:translateY(20px); transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.floating-donation.show{ opacity:1; pointer-events:all; transform:translateY(0);}.floating-donation .btn-donation{ background:linear-gradient(135deg, #ffd700, #ff8c00); color:#000; font-weight:800; padding:12px 24px; border-radius:50px; box-shadow:0 10px 25px rgba(0, 0, 0, 0.3); border:none; display:flex; align-items:center; gap:10px; text-decoration:none; animation:pulse-glow 2s infinite ease-in-out;}.support-card{ border:1px solid rgba(255, 215, 0, 0.2) !important; background:linear-gradient(145deg, rgba(255, 215, 0, 0.05), rgba(0, 0, 0, 0)) !important;}.support-card .btn-donation{ background:linear-gradient(135deg, #ffd700, #ff8c00); color:#000; border:none; font-weight:700; box-shadow:0 4px 10px rgba(255, 215, 0, 0.2);}.loading-overlay{ display:none; position:fixed; inset:0; z-index:200; background:rgba(10, 7, 18, 0.7); backdrop-filter:blur(8px); align-items:center; justify-content:center;}.loading-overlay.active{ display:flex;}.loading-spinner{ width:44px; height:44px; border-radius:50%; margin:0 auto 16px; border:3px solid rgba(145, 71, 255, 0.2); border-top-color:var(--accent); animation:spin 0.8s linear infinite;}@keyframes spin{to{transform:rotate(360deg);}}#confetti-canvas{ position:fixed; inset:0; z-index:150; pointer-events:none; display:none;}@media (max-width:900px){ .app-layout{grid-template-columns:1fr;} .sidebar{max-height:none;} :root{--sidebar:100%;}}@media (max-width:768px){ .app-header{padding:0.75rem 1rem;} .header-title{display:none;} .btn-raffle{padding:0.8rem 1.5rem;font-size:1rem;}}.cookie-banner{ position:fixed; bottom:-100%; left:0; right:0; z-index:9999; padding:1.5rem 0; transition:bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1); border-top:1px solid rgba(255, 255, 255, 0.1);}.cookie-banner.visible{bottom:0;}.cookie-content{ display:flex; align-items:center; justify-content:space-between; gap:2rem;}@media (max-width:768px){ .cookie-content{flex-direction:column;align-items:flex-start;gap:1.5rem;text-align:left;} .cookie-actions{width:100%;}}.chat-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-3); flex-shrink:0; transition:background 0.3s ease;}.chat-status-dot.active{ background:var(--green); animation:chatPulse 1.5s ease-out infinite;}@keyframes chatPulse{ 0%{box-shadow:0 0 0 0 rgba(64, 207, 124, 0.5);} 70%{box-shadow:0 0 0 6px rgba(64, 207, 124, 0);} 100%{box-shadow:0 0 0 0 rgba(64, 207, 124, 0);}}.pro-demo-card:hover{transform:translateY(-8px) scale(1.02) !important;border-color:#ffd700 !important;box-shadow:0 15px 40px rgba(255, 215, 0, 0.2), 0 0 20px rgba(145, 71, 255, 0.2) !important;}.btn-demo-header:hover{transform:scale(1.05);filter:brightness(1.2);box-shadow:0 0 15px rgba(255, 215, 0, 0.5);}.demo-mode section.card{border-color:rgba(255, 215, 0, 0.1) !important;}.demo-mode .app-header{border-bottom:2px solid rgba(255, 215, 0, 0.3) !important;}.ad-banner-container{ margin:2rem auto; padding:1rem; text-align:center; background:rgba(255, 255, 255, 0.03); border:1px solid rgba(255, 255, 255, 0.05); border-radius:16px; max-width:1000px; overflow:hidden; position:relative;}.ad-banner-label{ display:block; font-size:10px; color:var(--text-2); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;}.ig-banner-target, .ig-hero-banner, .ig-footer-banner{ min-height:90px; width:100%;}.sidebar .ad-banner-container{ margin:1.5rem 0; max-width:100%;}:root{ --primary:#9146ff; --primary-dark:#772ce8; --secondary:#00f2ea; --bg-dark:#0e0e10; --bg-card:rgba(255, 255, 255, 0.05); --text-main:#efeff1; --text-muted:#adadb8; --glass-border:rgba(255, 255, 255, 0.1); --shadow-neon:0 0 20px rgba(145, 70, 255, 0.3);}*{ margin:0; padding:0; box-sizing:border-box;}body{ font-family:'Inter', sans-serif; background-color:var(--bg-dark); color:var(--text-main); line-height:1.6; overflow-x:hidden;}@keyframes float{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-20px); } 100%{ transform:translateY(0px); }}@keyframes fadeInScale{ from{ opacity:0; transform:scale(0.9); } to{ opacity:1; transform:scale(1); }}.container{ max-width:1200px; margin:0 auto; padding:0 2rem;}.glass{ background:var(--bg-card); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:24px;}.navbar{ min-height:80px; position:fixed; top:0; width:100%; z-index:1000; transition:all 0.3s ease; display:flex; align-items:center;}.navbar .container{ display:flex; align-items:center; justify-content:space-between; width:100%; flex-wrap:wrap; gap:1rem; padding:1rem 2rem;}.navbar.scrolled{ background:rgba(14, 14, 16, 0.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--glass-border);}.nav-logo{ font-weight:800; font-size:1.5rem; display:flex; align-items:center; gap:0.5rem; color:var(--text-main); text-decoration:none;}.nav-links{ display:flex; gap:2rem; align-items:center;}.nav-link{ color:var(--text-muted); text-decoration:none; font-weight:500; transition:color 0.2s; white-space:nowrap;}.nav-link:hover{ color:var(--primary);}.nav-cta-demo{ color:#ffd700 !important; font-weight:700; display:flex; align-items:center; gap:6px; padding:8px 16px !important; background:rgba(255, 215, 0, 0.1); border:1px solid rgba(255, 215, 0, 0.2); border-radius:50px; margin:0 5px; transition:all 0.3s ease !important; font-size:0.9rem;}.nav-cta-demo:hover{ background:rgba(255, 215, 0, 0.2); transform:translateY(-2px); box-shadow:0 5px 15px rgba(255, 215, 0, 0.1); color:#ffd700 !important;}.nav-cta-primary{ background:linear-gradient(135deg, var(--primary), #7c3aed) !important; padding:10px 24px !important; border-radius:50px !important; font-weight:800 !important; font-size:0.95rem !important; box-shadow:0 8px 20px rgba(145, 70, 255, 0.3) !important;}.nav-cta-primary:hover{ transform:translateY(-3px) scale(1.02) !important; box-shadow:0 12px 25px rgba(145, 70, 255, 0.5) !important;}@media (max-width:1100px){ .nav-links{ gap:1rem; }}.menu-toggle{ display:none; flex-direction:column; justify-content:space-between; width:30px; height:21px; background:transparent; border:none; cursor:pointer; z-index:1001; padding:0;}.menu-toggle .bar{ height:3px; width:100%; background-color:var(--text-main); border-radius:3px; transition:all 0.3s ease;}.menu-toggle.is-active .bar:nth-child(1){ transform:translateY(9px) rotate(45deg);}.menu-toggle.is-active .bar:nth-child(2){ opacity:0;}.menu-toggle.is-active .bar:nth-child(3){ transform:translateY(-9px) rotate(-45deg);}@media (max-width:900px){ .menu-toggle{ display:flex; } .nav-links{ position:fixed; top:0; right:-100%; width:100%; height:100vh; background:rgba(14, 14, 16, 0.98); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); flex-direction:column; justify-content:center; align-items:center; transition:right 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index:1000; gap:2rem; } .nav-links.active{ right:0; } .nav-link{ font-size:1.25rem; }}.btn{ padding:0.7rem 1.4rem; border-radius:12px; font-weight:600; text-decoration:none; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor:pointer; border:none; display:inline-flex; align-items:center; justify-content:center;}.btn-hero{ font-size:1.1rem; padding:1rem 2.5rem; min-width:280px;}.btn-primary{ background:var(--primary); color:white; box-shadow:var(--shadow-neon);}.btn-primary:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 0 30px rgba(145, 70, 255, 0.5);}.btn-outline{ border:1px solid var(--glass-border); color:var(--text-main); background:transparent;}.btn-outline:hover{ background:var(--bg-card);}.hero{ padding:180px 0 100px; text-align:center; position:relative;}.hero-actions{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin-top:2.5rem;}.hero-badge{ display:inline-block; padding:6px 12px; background:rgba(145, 70, 255, 0.1); border:1px solid rgba(145, 70, 255, 0.2); border-radius:100px; color:#e0c8ff; font-size:0.85rem; font-weight:700; margin-bottom:1.5rem; animation:fadeInScale 0.6s ease-out;}.hero h1{ font-size:clamp(2.5rem, 8vw, 4.5rem); font-weight:900; line-height:1.1; margin-bottom:1.5rem; background:linear-gradient(135deg, #fff 0%, #adadb8 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}.hero p{ font-size:1.25rem; color:var(--text-muted); max-width:600px; margin:0 auto 2.5rem;}.features{ padding:100px 0;}.section-title{ text-align:center; margin-bottom:4rem;}.section-title h2{ font-size:2.5rem; font-weight:800;}.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:2rem;}.feature-card{ padding:3rem 2rem; transition:transform 0.3s ease;}.feature-card:hover{ transform:translateY(-10px);}.feature-icon{ font-size:2.5rem; margin-bottom:1.5rem; display:block;}.feature-card h3{ margin-bottom:1rem; font-size:1.5rem;}.feature-card p{ color:var(--text-muted);}.demo-section{ padding:100px 0; background:linear-gradient(180deg, transparent 0%, rgba(145, 70, 255, 0.05) 50%, transparent 100%);}.demo-tabs-nav{ display:inline-flex; background:rgba(255, 255, 255, 0.03); padding:6px; border-radius:100px; border:1px solid rgba(255, 255, 255, 0.08); margin-bottom:4rem; position:relative; left:50%; transform:translateX(-50%); box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);}.demo-tab{ background:transparent; border:none; color:var(--text-muted); padding:12px 32px; border-radius:100px; font-size:0.95rem; font-weight:700; cursor:pointer; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; z-index:1; white-space:nowrap;}.demo-tab.active{ color:white; background:var(--primary); box-shadow:0 8px 20px rgba(145, 70, 255, 0.4);}.demo-tab:hover:not(.active){ color:white; background:rgba(255, 255, 255, 0.05);}.demo-container{ display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:center;}.demo-steps{ display:flex; flex-direction:column; gap:1.5rem;}.demo-step{ padding:1.5rem; display:flex; gap:1.5rem; align-items:center; cursor:pointer; transition:all 0.3s ease; border:1px solid transparent;}.demo-step.active{ background:rgba(145, 70, 255, 0.1); border-color:rgba(145, 70, 255, 0.3); transform:translateX(10px);}.step-number{ width:40px; height:40px; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--primary); flex-shrink:0;}.demo-step.active .step-number{ background:var(--primary); color:white; box-shadow:var(--shadow-neon);}.step-info h4{ margin-bottom:0.25rem; font-size:1.1rem;}.step-info p{ font-size:0.9rem; color:var(--text-muted);}.demo-visual{ width:100%; height:450px; overflow:hidden; position:relative; box-shadow:0 40px 100px rgba(0, 0, 0, 0.5);}.mockup-header{ height:40px; background:rgba(255, 255, 255, 0.05); border-bottom:1px solid var(--glass-border); display:flex; align-items:center; padding:0 1rem;}.mockup-dots{ display:flex; gap:6px;}.mockup-dots span{ width:8px; height:8px; border-radius:50%; background:var(--glass-border);}.mockup-address{ margin-left:2rem; font-size:0.75rem; color:var(--text-muted); background:rgba(0, 0, 0, 0.2); padding:2px 12px; border-radius:4px;}.mockup-content{ position:relative; padding:2rem; height:calc(100% - 40px);}.demo-view-icon{ display:block; font-size:2.5rem; margin-bottom:1.5rem; opacity:0.5; font-style:normal;}.chat-live-badge{ position:absolute; top:-10px; right:-10px; background:#ff4545; color:white; font-size:0.65rem; font-weight:900; padding:4px 10px; border-radius:50px; box-shadow:0 5px 15px rgba(255, 69, 69, 0.4); animation:pulse-red 2s infinite;}@keyframes pulse-red{ 0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255, 69, 69, 0.7); } 70%{ transform:scale(1.05); box-shadow:0 0 0 10px rgba(255, 69, 69, 0); } 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255, 69, 69, 0); }}.demo-view{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.95); opacity:0; transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1); width:80%; text-align:center; pointer-events:none;}.demo-view.active{ opacity:1; transform:translate(-50%, -50%) scale(1);}.twitch-card-demo{ padding:3rem; display:inline-flex; flex-direction:column; align-items:center; gap:1.5rem;}.twitch-logo-demo{ width:60px; height:60px; background:#9146ff; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57V4.714zm4.715 0H18v5.143h-1.714V4.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0H6zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714v9.429z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57V4.714zm4.715 0H18v5.143h-1.714V4.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0H6zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714v9.429z'/%3E%3C/svg%3E") no-repeat center;}.subs-loader-demo{ padding:2rem;}.subs-count-demo{ font-size:4rem; font-weight:900; color:var(--primary); font-variant-numeric:tabular-nums;}.subs-label-demo{ color:var(--text-muted); margin-bottom:2rem;}.subs-progress-demo{ height:8px; background:rgba(255, 255, 255, 0.05); border-radius:10px; overflow:hidden;}.subs-progress-demo .bar{ height:100%; background:var(--primary); width:0%;}.chat-mockup-demo{ padding:1.5rem; text-align:left; display:flex; flex-direction:column; gap:0.8rem; width:100%; max-width:320px; margin:0 auto;}.chat-message-demo{ font-size:0.9rem; background:rgba(255, 255, 255, 0.03); padding:8px 12px; border-radius:8px; border-left:3px solid var(--secondary); animation:slideInChat 0.5s ease-out forwards; opacity:0;}.chat-message-demo span{ font-weight:800; color:var(--secondary); margin-right:5px;}.chat-participants-count{ margin-top:1rem; font-size:0.8rem; color:var(--text-muted); font-style:italic; text-align:center;}@keyframes slideInChat{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:translateX(0); }}.chat-message-demo:nth-child(1){ animation-delay:0.2s;}.chat-message-demo:nth-child(2){ animation-delay:0.5s;}.chat-message-demo:nth-child(3){ animation-delay:0.8s;}.demo-roulette-container{ width:100%; height:80px; background:rgba(0, 0, 0, 0.3); border:2px solid var(--primary); border-radius:12px; position:relative; overflow:hidden; display:flex; align-items:center;}.demo-roulette-strip{ display:flex; gap:20px; position:absolute; left:0; transition:transform 3s cubic-bezier(0.1, 0, 0.1, 1); padding:0 50%;}.demo-roulette-item{ white-space:nowrap; font-weight:700; font-size:1.2rem; color:var(--text-muted);}.demo-roulette-marker{ position:absolute; left:50%; top:0; width:4px; height:100%; background:var(--secondary); transform:translateX(-50%); box-shadow:0 0 15px var(--secondary); z-index:2;}.winner-reveal-demo{ position:relative; margin-top:1.5rem; animation:fadeInScale 0.5s ease-out forwards;}.winner-name-demo{ font-size:2.5rem; font-weight:900; color:var(--secondary); text-shadow:0 0 20px rgba(0, 242, 234, 0.4);}.winner-badge-demo{ display:inline-block; background:var(--primary); padding:0.5rem 1.5rem; border-radius:50px; font-weight:800; margin-top:1rem; animation:bounce 1s infinite;}@keyframes bounce{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.1); }}@media (max-width:992px){ .demo-container{ grid-template-columns:1fr; gap:2rem; } .demo-visual{ height:350px; }}.pricing{ padding:100px 0;}.pricing-grid{ display:flex; justify-content:center; gap:2rem; flex-wrap:wrap;}.price-card{ width:350px; padding:3rem; position:relative; overflow:hidden;}.price-card.featured{ border:1px solid var(--primary);}.price-card.featured::after{ content:'RECOMENDADO'; position:absolute; top:20px; right:-35px; background:var(--primary); color:white; font-size:0.7rem; font-weight:800; padding:5px 40px; transform:rotate(45deg);}.price-card h3{ font-size:1.2rem; margin-bottom:1rem;}.price-card .amount{ font-size:3rem; font-weight:800; margin-bottom:2rem;}.price-card .amount span{ font-size:1rem; color:var(--text-muted);}.price-list{ list-style:none; margin-bottom:2.5rem;}.price-list li{ margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;}.price-list li::before{ content:'✓'; color:var(--primary); font-weight:bold;}.price-list li.disabled{ color:var(--text-muted); opacity:0.8;}.price-list li.disabled::before{ content:'✕'; color:#ff4545;}footer{ padding:80px 0 40px; border-top:1px solid var(--glass-border); margin-top:100px;}.footer-content{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:4rem; margin-bottom:4rem;}.footer-seo{ font-size:0.9rem; color:var(--text-muted); line-height:normal;}.footer-seo h4{ color:var(--text-main); margin-bottom:1rem;}.copyright{ text-align:center; color:var(--text-muted); font-size:0.85rem;}.bg-ambient{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden;}.glow{ position:absolute; width:600px; height:600px; background:radial-gradient(circle, rgba(145, 70, 255, 0.15) 0%, transparent 70%); border-radius:50%; filter:blur(80px);}.glow-1{ top:-100px; right:-100px;}.glow-2{ bottom:-200px; left:-200px; background:radial-gradient(circle, rgba(0, 242, 234, 0.1) 0%, transparent 70%);}.btn-donation{ background:#FFDD00 !important; color:#0d0d0d !important; font-weight:800 !important; text-transform:uppercase; font-size:0.9rem; letter-spacing:0.5px; padding:0.8rem 1.8rem; border-radius:14px; display:inline-flex; align-items:center; gap:0.8rem; text-decoration:none; border:none; cursor:pointer; box-shadow:0 10px 20px rgba(255, 221, 0, 0.2); transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position:relative; overflow:hidden; z-index:1;}.resource-card{ background:var(--admin-card); border-radius:24px; padding:2rem; border:1px solid rgba(255, 255, 255, 0.05); transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display:flex; flex-direction:column; gap:1rem; position:relative; overflow:hidden;}.resource-image{ width:100%; height:180px; border-radius:16px; overflow:hidden; background:rgba(255, 255, 255, 0.02); margin-bottom:0.5rem;}.resource-image img{ width:100%; height:100%; object-fit:contain; transition:transform 0.5s ease; padding:10px;}.resource-card:hover .resource-image img{ transform:scale(1.05);}.btn-donation:hover{ background:#FFDD00 !important; transform:translateY(-4px) scale(1.03); box-shadow:0 15px 30px rgba(255, 221, 0, 0.4);}.btn-donation::after{ content:''; position:absolute; top:-50%; left:-60%; width:20%; height:200%; background:rgba(255, 255, 255, 0.4); transform:rotate(30deg); transition:all 0.6s ease; opacity:0; z-index:-1;}.btn-donation:hover::after{ left:120%; opacity:1;}.floating-donation{ position:fixed; bottom:30px; right:30px; z-index:99999; opacity:0; pointer-events:none; transition:all 0.5s ease;}.floating-donation.show{ opacity:1; pointer-events:auto;}.floating-donation .btn-donation{ border-radius:50px; padding:1.2rem 2.5rem; font-size:1.1rem; box-shadow:0 15px 45px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 221, 0, 0.2); animation:float-pulse 3s ease-in-out infinite;}@keyframes float-pulse{ 0%{ transform:translateY(0px) rotate(0deg); } 50%{ transform:translateY(-15px) rotate(2deg); box-shadow:0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 221, 0, 0.4); } 100%{ transform:translateY(0px) rotate(0deg); }}@media (max-width:768px){ .floating-donation{ bottom:20px; right:20px; } .floating-donation .btn-donation{ padding:1rem 1.8rem; font-size:0.9rem; }}.testimonials{ padding:100px 0; position:relative; overflow:hidden;}.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:2rem; margin-top:3rem;}.testimonial-card{ padding:2.5rem; position:relative; display:flex; flex-direction:column; gap:1.5rem; transition:all 0.3s ease;}.testimonial-card:hover{ transform:translateY(-10px); border-color:var(--primary);}.testimonial-rating{ display:flex; gap:4px; color:#ffd54f; font-size:1.1rem;}.testimonial-comment{ color:var(--text-main); font-style:italic; font-size:1.05rem; line-height:1.6; flex-grow:1;}.testimonial-user{ display:flex; align-items:center; gap:1rem; margin-top:1rem;}.testimonial-avatar{ width:48px; height:48px; border-radius:50%; border:2px solid var(--primary); object-fit:cover;}.testimonial-info h4{ font-size:1rem; font-weight:700; margin:0;}.testimonial-info span{ font-size:0.8rem; color:var(--text-muted);}.testimonial-card::before{ content:'"'; position:absolute; top:20px; right:30px; font-size:5rem; font-family:serif; color:var(--primary); opacity:0.1; line-height:1;}@media (max-width:768px){ .testimonials-grid{ grid-template-columns:1fr; }}.share-section{ padding:60px 0 100px 0;}.share-card{ padding:3rem; display:flex; justify-content:space-between; align-items:center; gap:3rem; background:rgba(145, 71, 255, 0.05); border:1px solid rgba(145, 71, 255, 0.2); border-radius:24px;}.share-title{ font-size:2rem; font-weight:800; margin-bottom:0.5rem; background:linear-gradient(135deg, #fff 0%, var(--primary) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}.share-desc{ color:var(--text-muted); font-size:1.1rem; max-width:500px;}.share-actions{ display:flex; gap:1rem; flex-wrap:wrap;}.btn-share{ display:flex; align-items:center; gap:0.8rem; padding:0.8rem 1.5rem; border-radius:12px; border:1px solid rgba(255, 255, 255, 0.1); background:rgba(255, 255, 255, 0.05); color:white; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 0.3s ease;}.btn-share svg{ transition:transform 0.3s ease;}.btn-share:hover{ transform:translateY(-3px); background:rgba(255, 255, 255, 0.1); border-color:rgba(255, 255, 255, 0.3);}.btn-share:hover svg{ transform:scale(1.1);}.share-tw:hover{ background:#1da1f2; border-color:#1da1f2;}.share-wa:hover{ background:#25d366; border-color:#25d366;}.share-fb:hover{ background:#1877f2; border-color:#1877f2;}.btn-share-copy:hover{ background:var(--primary); border-color:var(--primary);}@media (max-width:992px){ .share-card{ flex-direction:column; text-align:center; padding:2.5rem; } .share-actions{ justify-content:center; }}.btn-share-dash:hover{ background:rgba(255, 255, 255, 0.1) !important; border-color:var(--primary) !important; transform:translateY(-2px); box-shadow:0 5px 15px rgba(145, 71, 255, 0.3);}#share-modal .modal-content-card{ max-width:500px; padding:2.5rem;}.share-modal-desc{ color:var(--text-muted); text-align:center; margin-bottom:2rem; font-size:1rem;}.share-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-bottom:2.5rem;}.share-grid-item{ display:flex; flex-direction:column; align-items:center; gap:0.8rem; background:rgba(255, 255, 255, 0.03); border:1px solid rgba(255, 255, 255, 0.08); padding:1.2rem 0.5rem; border-radius:16px; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color:var(--text-muted); font-size:0.8rem; font-weight:500;}.share-icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(255, 255, 255, 0.05); color:white; transition:all 0.3s ease;}.share-icon svg{ width:22px; height:22px;}.share-grid-item:hover{ background:rgba(255, 255, 255, 0.08); transform:translateY(-5px); color:white;}.share-grid-item:hover .share-icon{ transform:scale(1.1); box-shadow:0 0 20px currentColor;}.share-tw{ color:#1da1f2;}.share-wa{ color:#25d366;}.share-tg{ color:#0088cc;}.share-rd{ color:#ff4500;}.share-fb{ color:#1877f2;}.share-li{ color:#0a66c2;}.share-pn{ color:#bd081c;}.share-em{ color:#ea4335;}.share-modal-copy{ color:var(--primary);}.share-link-input{ display:flex; gap:0.5rem; padding:0.5rem; border-radius:12px; margin-top:1rem; background:rgba(255, 255, 255, 0.05);}.share-link-input input{ background:transparent; border:none; color:var(--text-muted); font-size:0.85rem; padding:0.5rem; flex-grow:1; outline:none;}.share-link-input .btn-share-copy{ padding:0.5rem 1rem; font-size:0.8rem; white-space:nowrap;}@media (max-width:480px){ .share-grid{ grid-template-columns:repeat(2, 1fr); }}.share-section{ padding:80px 0; position:relative; z-index:5;}.visual-share-cta{ background:linear-gradient(135deg, rgba(145, 71, 255, 0.15), rgba(7, 7, 15, 0.8)); display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:40px; padding:60px !important; border:1px solid rgba(145, 71, 255, 0.3); border-radius:24px; text-align:left;}.share-visual-actions{ display:flex; flex-direction:column; align-items:center; gap:1.5rem;}.btn-visual-share{ padding:1rem 3rem; font-size:1.1rem; border-radius:50px; box-shadow:0 10px 30px rgba(145, 71, 255, 0.4); transition:all 0.3s ease;}.btn-visual-share:hover{ transform:scale(1.05); box-shadow:0 15px 40px rgba(145, 71, 255, 0.6);}.share-mini-grid{ display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center;}.mini-icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(255, 255, 255, 0.05); border-radius:50%; cursor:pointer; transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); color:var(--text-muted);}.mini-icon:hover{ transform:scale(1.2) translateY(-3px); background:rgba(255, 255, 255, 0.1); color:white;}.mini-icon.tw:hover{ color:#1da1f2; box-shadow:0 5px 15px rgba(29, 161, 242, 0.3);}.mini-icon.wa:hover{ color:#25d366; box-shadow:0 5px 15px rgba(37, 211, 102, 0.3);}.mini-icon.tg:hover{ color:#0088cc; box-shadow:0 5px 15px rgba(0, 136, 204, 0.3);}.mini-icon.rd:hover{ color:#ff4500; box-shadow:0 5px 15px rgba(255, 69, 0, 0.3);}.mini-icon.fb:hover{ color:#1877f2; box-shadow:0 5px 15px rgba(24, 119, 242, 0.3);}.mini-icon.li:hover{ color:#0a66c2; box-shadow:0 5px 15px rgba(10, 102, 194, 0.3);}.mini-icon.ig:hover{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); color:white; box-shadow:0 5px 15px rgba(214, 36, 159, 0.3);}.share-sidebar-card{ text-align:center; background:linear-gradient(135deg, rgba(145, 71, 255, 0.1), rgba(0, 242, 234, 0.05)); border:1px solid rgba(145, 71, 255, 0.2) !important; margin-bottom:1.5rem;}.share-sidebar-card .card-title{ justify-content:center; margin-bottom:0.8rem;}@media (max-width:992px){ .visual-share-cta{ flex-direction:column; text-align:center; padding:40px 20px !important; gap:20px; } .share-content{ text-align:center; }}.resources-section{ padding:100px 0;}.resource-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:2.5rem; margin-top:4rem;}.resource-card{ display:flex; flex-direction:column; padding:2.5rem; height:100%; transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.resource-card:hover{ transform:translateY(-15px); border-color:var(--primary); box-shadow:0 30px 60px rgba(0, 0, 0, 0.4);}.resource-icon{ font-size:3rem; margin-bottom:1.5rem; background:rgba(255, 255, 255, 0.05); width:80px; height:80px; display:flex; align-items:center; justify-content:center; border-radius:20px; transition:all 0.3s ease;}.resource-card:hover .resource-icon{ background:var(--primary); transform:rotate(10deg);}.resource-card h3{ font-size:1.4rem; margin-bottom:1rem; color:white;}.resource-card p{ color:var(--text-muted); line-height:1.6; margin-bottom:2rem; flex-grow:1;}.resource-actions{ display:flex; flex-direction:column; gap:1rem;}.btn-amazon{ background:#FF9900; color:#111; font-weight:800;}.btn-amazon:hover{ background:#e68a00; color:black; box-shadow:0 5px 15px rgba(255, 153, 0, 0.4);}.btn-aliexpress{ background:#E62E04; color:white; font-weight:800;}.btn-aliexpress:hover{ background:#cc2904; color:white; box-shadow:0 5px 15px rgba(230, 46, 4, 0.4);}.contact{ padding:100px 0;}.contact-container{ max-width:700px; margin:0 auto;}.contact-form{ padding:3rem; display:flex; flex-direction:column; gap:1.5rem;}.form-group{ display:flex; flex-direction:column; gap:0.5rem;}.form-group label{ font-size:0.9rem; font-weight:600; color:var(--text-main);}.form-control{ background:rgba(0, 0, 0, 0.2); border:1px solid var(--glass-border); border-radius:12px; padding:0.8rem 1rem; color:var(--text-main); font-family:inherit; font-size:1rem; transition:all 0.3s ease;}.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 10px rgba(145, 70, 255, 0.2); background:rgba(0, 0, 0, 0.3);}textarea.form-control{ min-height:150px; resize:vertical;}.contact-status{ padding:1rem; border-radius:12px; display:none; margin-bottom:2rem; text-align:center;}.contact-status.success{ display:block !important; background:rgba(64, 207, 124, 0.1); color:#40cf7c; border:1px solid rgba(64, 207, 124, 0.3);}.contact-status.error{ display:block !important; background:rgba(239, 83, 80, 0.1); color:#ef5350; border:1px solid rgba(239, 83, 80, 0.3);}.login-page{ display:flex; align-items:center; justify-content:center; min-height:100vh;}.login-container{ position:relative; z-index:1; width:100%; max-width:430px; padding:20px;}.login-card{ border-radius:24px; padding:48px 40px; text-align:center; border-color:rgba(145, 71, 255, 0.22); box-shadow:0 0 80px rgba(145, 71, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); animation:fadeUp 0.6s ease;}@keyframes fadeUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); }}.logo-section{ margin-bottom:30px;}.logo-icon{ font-size:60px; display:block; margin-bottom:14px; filter:drop-shadow(0 0 18px rgba(145, 71, 255, 0.55)); animation:float 3s ease-in-out infinite;}@keyframes float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); }}.logo-title{ font-size:2rem; font-weight:900; margin-bottom:6px; background:linear-gradient(135deg, #9147ff, #00d4ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}.logo-subtitle{ color:var(--text-2); font-size:0.9rem;}.features-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; text-align:left;}.feature-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:rgba(145, 71, 255, 0.06); border:1px solid rgba(145, 71, 255, 0.12); border-radius:var(--radius-sm); font-size:0.86rem; color:var(--text-2);}.feature-icon{ font-size:1.1rem; flex-shrink:0;}.btn-twitch{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px 20px; background:linear-gradient(135deg, #9147ff, #6d28d9); color:#fff; font-family:'Inter', sans-serif; font-size:1rem; font-weight:700; border:none; border-radius:12px; text-decoration:none; cursor:pointer; transition:var(--ease); box-shadow:0 4px 24px rgba(145, 71, 255, 0.45); margin-bottom:14px;}.btn-twitch:hover{ background:linear-gradient(135deg, #a855f7, #7c3aed); transform:translateY(-2px); box-shadow:0 8px 32px rgba(145, 71, 255, 0.6);}.login-note{ font-size:0.76rem; color:var(--text-3); line-height:1.6;}.alert{ padding:11px 14px; border-radius:var(--radius-sm); font-size:0.86rem; margin-bottom:18px;}.alert-error{ background:rgba(239, 83, 80, 0.12); border:1px solid rgba(239, 83, 80, 0.3); color:#ff8a80;}.floating-particles{ position:fixed; inset:0; pointer-events:none; z-index:0;}.particle{ position:absolute; bottom:-20px; background:var(--accent); border-radius:50%; animation:rise linear infinite;}@keyframes rise{ 0%{ transform:translateY(0) scale(1); opacity:0; } 10%{ opacity:1; } 90%{ opacity:0.4; } 100%{ transform:translateY(-110vh) scale(0.4); opacity:0; }}