*{ margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}body{ background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:#f1f1f1;min-height:100vh;padding:20px;}.container{ max-width:1200px;margin:0 auto;padding:20px;}header{ text-align:center;margin-bottom:40px;padding:20px;background:rgba(255,255,255,0.05);border-radius:15px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);}.brand-header{ display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:10px;}.brand-header h1{ font-size:3rem;margin-bottom:0;color:#4cc9f0;display:flex;align-items:center;gap:15px;text-shadow:0 2px 10px rgba(76,201,240,0.3);}.domain-tag{ background:linear-gradient(90deg,#4361ee,#4cc9f0);color:white;padding:8px 20px;border-radius:25px;font-size:1.1rem;font-weight:600;letter-spacing:0.5px;box-shadow:0 4px 15px rgba(67,97,238,0.3);}.subtitle{ font-size:1.2rem;color:#a9a9a9;max-width:800px;margin:0 auto;}.stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:40px;}.stat-card{ background:rgba(255,255,255,0.05);padding:25px;border-radius:15px;border:1px solid rgba(255,255,255,0.1);transition:transform 0.3s ease;}.stat-card:hover{ transform:translateY(-5px);}.stat-card h3{ color:#72efdd;margin-bottom:15px;font-size:1.4rem;display:flex;align-items:center;gap:10px;}.progress-bar{ height:12px;background:rgba(255,255,255,0.1);border-radius:6px;margin-top:10px;overflow:hidden;}.progress-fill{ height:100%;background:linear-gradient(90deg,#4cc9f0,#4361ee);width:0%;border-radius:6px;transition:width 0.5s ease;}.quotes-container{ background:rgba(255,255,255,0.05);padding:30px;border-radius:15px;margin-bottom:40px;border:1px solid rgba(255,255,255,0.1);}.quotes-container h2{ color:#72efdd;margin-bottom:15px;font-size:2rem;display:flex;align-items:center;gap:10px;}.instruction{ color:#a9a9a9;margin-bottom:25px;font-size:1.1rem;}.quotes-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:25px;}.quote-card{ background:rgba(255,255,255,0.05);padding:25px;border-radius:15px;border:2px solid rgba(255,255,255,0.1);cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden;}.quote-card:hover{ background:rgba(255,255,255,0.08);border-color:#4cc9f0;transform:translateY(-5px);}.quote-card.selected{ border-color:#72efdd;background:rgba(114,239,221,0.1);}.quote-content{ font-size:1.3rem;line-height:1.5;margin-bottom:15px;color:#f1f1f1;font-style:italic;}.quote-author{ color:#4cc9f0;font-weight:bold;font-size:1.1rem;text-align:right;}.quote-tags{ display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;}.tag{ background:rgba(76,201,240,0.2);color:#4cc9f0;padding:5px 12px;border-radius:20px;font-size:0.9rem;}.controls{ display:flex;justify-content:center;gap:20px;margin-bottom:40px;}.btn{ padding:15px 30px;font-size:1.1rem;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.3s ease;font-weight:bold;}.btn{ background:linear-gradient(90deg,#4361ee,#4cc9f0);color:white;}.btn:hover{ transform:translateY(-3px);box-shadow:0 10px 20px rgba(67,97,238,0.3);}.btn-secondary{ background:rgba(255,255,255,0.1);color:#f1f1f1;}.btn-secondary:hover{ background:rgba(255,255,255,0.2);box-shadow:0 10px 20px rgba(255,255,255,0.1);}footer{ text-align:center;padding:25px 20px;color:#a9a9a9;border-top:1px solid rgba(255,255,255,0.1);}.footer-content{ display:flex;flex-direction:column;gap:8px;}.footer-brand{ font-size:1.2rem;color:#4cc9f0;font-weight:700;text-shadow:0 1px 5px rgba(76,201,240,0.3);}.footer-domain{ font-size:1rem;color:#72efdd;font-weight:600;font-style:italic;}.contact-info{ margin:10px 0;padding:10px 0;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1);}.contact-info p{ color:#a9a9a9;font-size:0.95rem;}.email-placeholder{ color:#4cc9f0;font-weight:600;}.protected-email{ color:#72efdd;font-weight:600;text-decoration:none;transition:color 0.3s ease;}.protected-email:hover{ color:#4cc9f0;text-decoration:underline;}.loading-state{ text-align:center;padding:40px;color:#4cc9f0;}.loading-spinner{ border:4px solid rgba(76,201,240,0.3);border-radius:50%;border-top:4px solid #4cc9f0;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 20px;}@keyframes spin{ 0%{ transform:rotate(0deg);} 100%{ transform:rotate(360deg);}}.error-state{ text-align:center;padding:40px;color:#ff6b6b;background:rgba(255,107,107,0.1);border-radius:10px;border:1px solid rgba(255,107,107,0.3);}.error-state i{ font-size:2rem;margin-bottom:15px;display:block;}.footer-tech{ font-size:0.9rem;color:#a9a9a9;margin-top:5px;padding-top:10px;}@media (max-width:768px){ .quotes-grid{ grid-template-columns:1fr;} header h1{ font-size:2rem;} .stats{ grid-template-columns:1fr;} .quote-card{ padding:20px;min-height:180px;} .btn{ padding:18px 30px;font-size:1.2rem;} #install-button{ bottom:10px;left:10px;right:10px;width:calc(100% - 20px);}}body.standalone-mode{ padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}body.standalone-mode header{ padding-top:max(20px,env(safe-area-inset-top));}@supports (padding:max(0px)){ body{ padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}}.quote-card,.btn{ -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}@media (hover:hover){ .quote-card:hover{ background:rgba(255,255,255,0.08);border-color:#4cc9f0;transform:translateY(-5px);} .btn:hover{ transform:translateY(-3px);box-shadow:0 10px 20px rgba(67,97,238,0.3);} .btn-secondary:hover{ background:rgba(255,255,255,0.2);box-shadow:0 10px 20px rgba(255,255,255,0.1);}}.quote-card:active,.btn:active{ transform:translateY(0);transition:transform 0.1s ease;}