:root { --primary:#6c5ce7; --secondary:#a29bfe; --bg:#f4f7f6; --card-bg:#ffffff; --text:#2d3436; }
body { font-family:'Poppins',sans-serif; background:var(--bg); margin:0; padding-bottom:80px; -webkit-tap-highlight-color:transparent; }
.container { padding:10px 15px; max-width:600px; margin:0 auto; } .hidden { display:none; }

/* Loader */
#preloader { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; background:rgba(0,0,0,0.85); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); display:flex; justify-content:center; align-items:center; transition:0.5s; }
#preloader.loaded { opacity:0; visibility:hidden; pointer-events:none; }
.loader-box { position:relative; width:200px; height:200px; perspective:800px; }
.ring { position:absolute; width:100%; height:100%; border-radius:50%; border:6px solid transparent; }
.ring:nth-child(1){border-top:6px solid #00f3ff;border-bottom:6px solid #00f3ff;box-shadow:0 0 20px #00f3ff;animation:spin1 2s linear infinite}
.ring:nth-child(2){border-left:6px solid #ff00ff;border-right:6px solid #ff00ff;box-shadow:0 0 20px #ff00ff;animation:spin2 2.5s linear infinite}
.ring:nth-child(3){border-top:6px solid #fffd00;box-shadow:0 0 20px #fffd00;animation:spin3 1.5s linear infinite}
.loader-text { position:absolute; bottom:-60px; width:100%; text-align:center; color:#fff; font-family:monospace; font-size:16px; letter-spacing:4px; animation:blink 1s infinite alternate; text-shadow:0 0 10px #fff; }
@keyframes spin1{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}
@keyframes spin2{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}
@keyframes spin3{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
@keyframes blink{from{opacity:1}to{opacity:0.3}}

/* UI Components */
.app-header { background:var(--primary); color:#fff; padding:12px 20px; border-radius:0 0 20px 20px; position:sticky; top:0; z-index:900; display:flex; align-items:center; justify-content:space-between; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
.app-header h2 { margin:0; font-size:18px; font-weight:600; } 
.stats-card { background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:#fff; padding:8px 12px; border-radius:12px; margin-bottom:5px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 3px 10px rgba(108,92,231,0.2); }
.stats-card h3{font-size:14px;margin:0} .stats-card p{font-size:10px;margin:2px 0 0;opacity:0.9}
.section-title { font-size:13px; color:#636e72; margin-bottom:8px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.date-badge { font-size:11px; background:#dfe6e9; padding:2px 6px; border-radius:4px; color:#2d3436; }
.daily-card, .read-card, .quiz-card { background:#fff; padding:12px; border-radius:12px; margin-bottom:8px; box-shadow:0 2px 5px rgba(0,0,0,0.03); }
.daily-card { border-left:4px solid var(--secondary); } .daily-q { font-weight:500; font-size:13px; color:#333; margin-bottom:4px; } .daily-a { color:#00b894; font-size:12px; font-weight:600; }
.q-badge, .read-badge { background:#dfe6e9; color:#636e72; font-size:10px; padding:2px 6px; border-radius:4px; margin-right:5px; }

/* Read Mode */
.filters { display:flex; gap:8px; margin-bottom:10px; position:sticky; top:60px; z-index:800; background:var(--bg); padding:5px 0; }
.search-box, .cat-select { padding:8px; border:1px solid #ddd; border-radius:8px; flex:1; outline:none; background:#fff; font-size:13px; }
#read-hidden-box { background:#fff; padding:10px 15px; border-radius:12px; margin-bottom:10px; cursor:pointer; font-size:12px; color:#636e72; font-weight:600; display:flex; justify-content:space-between; align-items:center; border:1px solid #eee; position:sticky; top:105px; z-index:799; box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.arrow-icon { transition:transform 0.3s; } .arrow-icon.rotate { transform:rotate(180deg); } #read-hidden-list { display:none; animation:fadeIn 0.3s ease; }
.read-card { display:flex; align-items:flex-start; gap:10px; } .read-content { flex:1; }
.read-action { font-size:26px; cursor:pointer; padding:10px 0 0 15px; transition:0.3s; align-self:flex-end; }

/* Quiz Setup (Dots) */
.task-title { font-size:12px; font-weight:600; color:#b2bec3; text-transform:uppercase; letter-spacing:1px; margin-bottom:15px; position:relative; }
.task-title::after { content:''; display:block; width:40px; height:2px; background:var(--primary); margin:5px auto 0; }
.limit-grid { display:flex; justify-content:space-between; margin-bottom:20px; gap:5px; }
.limit-item { text-align:center; cursor:pointer; flex:1; transition:0.3s; opacity:0.6; } .limit-item.active { opacity:1; transform:scale(1.05); }
.limit-dot { width:45px; height:45px; background:#f1f2f6; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 5px; font-weight:bold; color:#636e72; border:2px solid transparent; transition:0.3s; }
.limit-item.active .limit-dot { border-color:var(--primary); background:var(--bg); color:var(--primary); box-shadow:0 5px 15px rgba(108,92,231,0.2); }
.limit-sub { font-size:10px; color:#636e72; font-weight:500; display:block; }

/* Quiz Play */
.timer-badge { background:#fff; padding:4px 10px; border-radius:20px; box-shadow:0 2px 5px rgba(0,0,0,0.05); font-size:12px; font-weight:600; color:#2d3436; display:flex; align-items:center; gap:5px; }
.timer-badge i { color:#e17055; animation:pulse 1s infinite; } @keyframes pulse { 0%{opacity:1} 50%{opacity:0.5} 100%{opacity:1} }
.quiz-card { padding:20px; text-align:center; margin-top:10px; }
.option-btn { width:100%; padding:12px; margin-bottom:8px; border:1px solid #eee; border-radius:10px; background:#fff; text-align:left; transition:0.2s; font-size:13px; cursor:pointer; }
.option-btn:disabled { cursor:default; opacity:0.9; } .option-btn.correct { background:#d4edda; border-color:#28a745; color:#155724; } .option-btn.wrong { background:#f8d7da; border-color:#dc3545; color:#721c24; }
.score-circle { width:80px; height:80px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 15px; font-weight:bold; }
.quiz-nav { display:flex; gap:10px; margin-top:15px; } 
.btn-quiz-nav { padding:12px; border:none; border-radius:8px; font-weight:600; cursor:pointer; position:relative; overflow:hidden; z-index:1; }
.btn-prev { background:#dfe6e9; color:#636e72; flex:1; } 
.btn-next { background:var(--primary); color:#fff; transition:background 0.3s; flex:3; }
.btn-next::after { content:''; position:absolute; top:0; left:0; height:100%; width:0%; background:rgba(0,0,0,0.2); z-index:-1; transition:none; }
.btn-next.filling::after { width:100%; transition:width 2s linear; }

/* Auth & Tabs */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:2000; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(5px); }
.modal-box { background:#fff; width:85%; max-width:320px; padding:25px; border-radius:20px; text-align:center; animation:slideUp 0.4s ease; box-shadow:0 10px 30px rgba(0,0,0,0.2); }
.btn-full { width:100%; padding:12px; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; margin-bottom:10px; }
.btn-primary { background:var(--primary); color:#fff; } .btn-guest { background:#dfe6e9; color:#636e72; } .btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.form-group { text-align:left; margin-bottom:12px; } .form-group input { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; outline:none; box-sizing:border-box; font-size:14px; }
.msg-box { font-size:12px; margin-bottom:10px; padding:8px; border-radius:6px; display:none; } .msg-error { background:#ffebeb; color:#d63031; } .msg-success { background:#e6fffa; color:#00b894; }
.link-text { color:var(--primary); font-weight:600; cursor:pointer; font-size:12px; }
.auth-tabs { display:flex; border-bottom:1px solid #eee; margin-bottom:15px; }
.auth-tab { flex:1; padding:10px; text-align:center; font-size:14px; font-weight:600; color:#b2bec3; cursor:pointer; transition:0.3s; border-bottom:2px solid transparent; }
.auth-tab.active { color:var(--primary); border-bottom-color:var(--primary); }

/* Info Modal */
.info-list { text-align:left; max-height:400px; overflow-y:auto; padding-right:5px; }
.info-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:15px; font-size:12px; color:#555; line-height:1.5; border-bottom:1px solid #f1f2f6; padding-bottom:10px; }
.info-icon { width:25px; height:25px; background:#f4f7f6; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--primary); flex-shrink:0; font-size:12px; }
.inline-icon { display:inline-block; vertical-align:middle; font-size:14px; margin:0 2px; }
.attention-grabber { animation:attentionPulse 2s infinite; color:#74b9ff!important; }
@keyframes attentionPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:0.8}100%{transform:scale(1);opacity:1}}
@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}} @keyframes fadeIn{from{opacity:0}to{opacity:1}}
.view-section { display:none; animation:fadeIn 0.3s; } .view-section.active { display:block; }