@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
    --blue:#1a56db; --blue-dark:#0f3d94; --blue-light:#edf2ff; --blue-glow:rgba(26,86,219,0.12);
    --navy:#0a1e3d; --white:#fff; --bg:#f4f6fb; --card:#fff;
    --text:#0f1729; --text-sec:#475569; --text-muted:#8896ab; --border:#dce3ed;
    --green:#16a34a; --green-bg:#dcfce7; --green-dark:#15803d;
    --red:#dc2626; --red-bg:#fee2e2; --red-dark:#b91c1c;
    --yellow:#f59e0b; --yellow-bg:#fef3c7; --purple:#6730b3; --purple-bg:#f1ebfa;
    --radius:14px; --radius-sm:10px; --tr:0.18s ease; --nav-h:64px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:var(--white);border-top:1px solid var(--border);display:flex;align-items:stretch;z-index:900;padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:inherit;transition:color var(--tr);position:relative;padding:8px 4px}
.bnav-item.active{color:var(--blue)}
.bnav-icon{font-size:20px;line-height:1} .bnav-label{font-size:10px;font-weight:600;letter-spacing:0.01em}
.bnav-badge{position:absolute;top:8px;right:calc(50% - 18px);background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.tab-content{display:none;min-height:100vh;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 12px)}
.tab-content.active{display:block}
.screen{display:none;max-width:480px;margin:0 auto} .screen.active{display:block}
.m-pad{padding:0 16px 16px}
.hero-header{text-align:center;padding:32px 24px 24px;background:linear-gradient(160deg,var(--navy) 0%,#1a3a6e 100%);color:#fff;border-radius:0 0 28px 28px;margin-bottom:20px;position:relative;overflow:hidden}
.hero-header::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")}
.hero-logo{width:76px;height:76px;background:rgba(255,255,255,0.12);border:2px solid rgba(255,255,255,0.2);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 14px;backdrop-filter:blur(8px);position:relative;z-index:1}
.hero-title{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;position:relative;z-index:1}
.hero-sub{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.6;position:relative;z-index:1}
.hero-stats{display:flex;align-items:center;justify-content:center;background:var(--white);border-radius:16px;margin:0 16px 16px;box-shadow:0 2px 12px rgba(15,29,64,0.07);padding:16px 8px}
.hstat{flex:1;text-align:center} .hstat-n{display:block;font-size:22px;font-weight:800;color:var(--blue);letter-spacing:-0.02em}
.hstat-l{display:block;font-size:11px;color:var(--text-muted);font-weight:500;margin-top:2px} .hstat-div{width:1px;height:36px;background:var(--border)}
.feature-cards{display:flex;flex-direction:column;gap:10px;padding:0 16px;margin-bottom:16px}
.feat-card{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(15,29,64,0.05)}
.feat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.fi-blue{background:var(--blue-light)} .fi-green{background:var(--green-bg)} .fi-yellow{background:var(--yellow-bg)}
.feat-title{font-size:14px;font-weight:700} .feat-desc{font-size:12px;color:var(--text-muted);margin-top:1px}
.m-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:15px 24px;background:var(--blue);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;cursor:pointer;transition:all var(--tr);min-height:50px;font-family:inherit;box-shadow:0 3px 12px var(--blue-glow)}
.m-btn:hover{background:var(--blue-dark)} .m-btn:active{transform:scale(0.98)} .m-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}
.m-btn-outline{background:var(--white);color:var(--blue);border:2px solid var(--blue);box-shadow:none} .m-btn-outline:hover{background:var(--blue-light)}
.m-btn-ghost{background:var(--bg);color:var(--text-sec);box-shadow:none;border:none} .m-btn-ghost:hover{background:var(--border)}
.screen-header{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.back-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--blue);font-size:14px;font-weight:600;cursor:pointer;padding:8px 4px;min-height:44px;font-family:inherit;flex-shrink:0}
.back-btn svg{width:20px;height:20px} .back-btn.icon-only{padding:8px} .back-btn.icon-only svg{width:22px;height:22px}
.screen-title{font-size:17px;font-weight:800;flex:1}
.level-list{display:flex;flex-direction:column;gap:10px}
.level-card{display:flex;align-items:center;justify-content:space-between;background:var(--white);border:2px solid transparent;border-radius:16px;padding:16px;cursor:pointer;transition:all var(--tr);box-shadow:0 1px 4px rgba(15,29,64,0.05)}
.level-card:active{transform:scale(0.98)} .level-card.selected{border-color:var(--blue);background:var(--blue-light);box-shadow:0 0 0 3px var(--blue-glow)}
.lc-left{display:flex;align-items:center;gap:14px} .lc-icon{font-size:22px;width:44px;height:44px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lc-name{font-size:15px;font-weight:800;letter-spacing:0.01em} .lc-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.lc-meta{display:flex;align-items:center;gap:8px} .lc-q{font-size:11px;color:var(--text-muted);background:var(--bg);padding:4px 10px;border-radius:20px;font-weight:600}
.lc-arr{font-size:22px;color:var(--text-muted);font-weight:300;line-height:1}
.lc-basic:hover,.lc-basic.selected{border-color:#22c55e;background:#f0fdf4} .lc-inter:hover,.lc-inter.selected{border-color:var(--blue);background:var(--blue-light)}
.lc-adv:hover,.lc-adv.selected{border-color:var(--yellow);background:var(--yellow-bg)} .lc-pro:hover,.lc-pro.selected{border-color:var(--purple);background:var(--purple-bg)}
.level-card.selected .lc-arr{color:var(--blue)}
.quiz-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;gap:10px}
.quiz-info{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}
.quiz-counter{font-size:13px;font-weight:700;color:var(--blue);background:var(--blue-light);padding:5px 13px;border-radius:50px}
.quiz-level-tag{font-size:10px;font-weight:700;padding:5px 10px;border-radius:50px;background:var(--bg);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em}
.timer-display{font-size:14px;font-weight:700;padding:5px 13px;border-radius:50px;background:var(--bg);color:var(--text-sec);flex-shrink:0}
.timer-display.timer-warning{background:var(--red-bg);color:var(--red);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.quiz-progress{width:100%;height:4px;background:var(--border)} .quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),#3b82f6);transition:width 0.35s ease}
.q-card{background:var(--white);border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(15,29,64,0.06);margin-bottom:12px}
.q-num{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}
.q-text{font-size:16px;font-weight:700;line-height:1.6;color:var(--text)}
.options-list{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.option-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px;background:var(--white);border:2px solid transparent;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.12s;text-align:left;min-height:52px;font-family:inherit;box-shadow:0 1px 3px rgba(15,29,64,0.05)}
.option-btn:active{transform:scale(0.98)} .option-btn.selected{border-color:var(--blue);background:var(--blue-light)}
.option-letter{width:34px;height:34px;line-height:34px;text-align:center;border-radius:9px;background:var(--bg);font-weight:700;font-size:13px;flex-shrink:0;color:var(--text-sec);transition:all 0.12s}
.option-btn.selected .option-letter{background:var(--blue);color:var(--white)}
.option-text{flex:1;line-height:1.5}
.quiz-nav{display:flex;gap:10px} .quiz-nav .m-btn{flex:1}
.result-hero{text-align:center;padding:24px 0 16px}
.result-emoji{font-size:52px;margin-bottom:16px;animation:pop 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.result-ring{position:relative;width:140px;height:140px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.ring-svg{position:absolute;width:100%;height:100%}
.ring-text{position:relative;text-align:center} .ring-score{font-size:36px;font-weight:800;color:var(--blue)} .ring-of{font-size:14px;color:var(--text-muted);font-weight:600;display:block}
.result-pct{font-size:24px;font-weight:800;margin-bottom:8px;color:var(--blue)} .result-pct.failed{color:var(--red)}
.result-msg{font-size:14px;color:var(--text-sec);line-height:1.5} .result-msg.failed{color:var(--red)} .result-msg.passed{color:var(--green)}
.result-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.review-wrap{background:var(--white);border-radius:16px;padding:18px;box-shadow:0 1px 6px rgba(15,29,64,0.06)}
.review-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.review-title{font-size:14px;font-weight:800} .review-stats{font-size:12px;color:var(--text-muted);font-weight:600}
.review-item{margin-bottom:12px;padding:14px;border-radius:12px;border:1.5px solid var(--border)}
.review-item.correct{border-color:#bbf7d0;background:#f0fdf4} .review-item.wrong{border-color:#fecaca;background:#fff5f5}
.review-q-num{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:6px}
.review-q-text{font-size:13px;font-weight:600;margin-bottom:10px;line-height:1.5}
.review-opts{display:flex;flex-direction:column;gap:5px}
.review-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:12px}
.review-opt.is-correct{background:var(--green-bg);color:var(--green-dark);font-weight:600}
.review-opt.user-wrong{background:var(--red-bg);color:var(--red-dark);text-decoration:line-through}
.ro-letter{width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.review-explain{margin-top:10px;padding:10px 12px;background:var(--yellow-bg);border-radius:8px;font-size:12px;color:#7c5c00;line-height:1.55;border-left:3px solid var(--yellow)}
.tab-header{display:flex;align-items:center;gap:14px;padding:20px 16px 4px;margin-bottom:4px}
.tab-header-icon{width:50px;height:50px;border-radius:14px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.tab-header-title{font-size:20px;font-weight:800;letter-spacing:-0.01em} .tab-header-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.seg-tabs{display:flex;gap:6px;background:var(--white);border-radius:12px;padding:5px;box-shadow:0 1px 3px rgba(15,29,64,0.06);margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.seg-tabs::-webkit-scrollbar{display:none}
.seg-btn{flex-shrink:0;padding:8px 16px;border-radius:8px;border:none;background:none;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:all var(--tr);white-space:nowrap}
.seg-btn.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px var(--blue-glow)}
.content-list{display:flex;flex-direction:column;gap:12px}
.mini-video-card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 6px rgba(15,29,64,0.06);cursor:pointer;transition:transform var(--tr)}
.mini-video-card:active{transform:scale(0.98)}
.mini-video-thumb{position:relative;aspect-ratio:16/9;background:#0f1729;overflow:hidden}
.mini-video-thumb img{width:100%;height:100%;object-fit:cover}
.mini-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3)}
.mini-play-btn::after{content:'▶';color:#fff;font-size:24px;width:52px;height:52px;background:rgba(255,255,255,0.18);border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:4px;backdrop-filter:blur(4px)}
.mini-video-info{padding:12px 14px}
.mini-video-title{font-size:14px;font-weight:700;margin-bottom:5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-video-meta{display:flex;align-items:center;gap:8px}
.mini-cat{background:var(--blue-light);color:var(--blue);font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase}
.mini-views{font-size:11px;color:var(--text-muted)}
.video-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.video-overlay-inner{width:100%;max-width:520px;background:#0f1729;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.video-overlay-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#1e293b}
.video-overlay-title{font-size:14px;font-weight:700;color:#fff;flex:1;padding-right:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-close{background:rgba(255,255,255,0.1);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.video-frame-wrap{aspect-ratio:16/9;background:#000}
.mini-file-card{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:16px;padding:14px 16px;box-shadow:0 1px 6px rgba(15,29,64,0.06);cursor:pointer;transition:transform var(--tr);text-decoration:none;color:inherit}
.mini-file-card:active{transform:scale(0.98)}
.mini-file-icon{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.mfi-pdf{background:#fee2e2} .mfi-doc{background:var(--blue-light)} .mfi-xls{background:var(--green-bg)} .mfi-zip{background:var(--yellow-bg)} .mfi-default{background:var(--bg)}
.mini-file-info{flex:1;min-width:0}
.mini-file-name{font-size:14px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-file-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mini-file-size{font-size:11px;color:var(--text-muted)} .mini-file-dl{font-size:11px;color:var(--text-muted)}
.mini-file-dl-btn{width:36px;height:36px;background:var(--blue-light);color:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ann-card-wrap{border-radius:16px;padding:16px;border-left:4px solid transparent}
.ann-card-inner{display:flex;gap:12px}
.ann-icon-wrap{font-size:24px;flex-shrink:0}
.ann-type-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;opacity:0.65}
.ann-title-text{font-size:15px;font-weight:700;margin-bottom:6px}
.ann-body-text{font-size:13px;color:var(--text-sec);line-height:1.65;white-space:pre-wrap}
.ann-date-text{font-size:11px;margin-top:8px;opacity:0.5}
.ann-info{background:#edf6ff;border-color:var(--blue)} .ann-warning{background:#fef6e7;border-color:var(--yellow)}
.ann-success{background:#e6f5ee;border-color:var(--green)} .ann-urgent{background:#fff0f0;border-color:var(--red)}
.skeleton-list{display:flex;flex-direction:column;gap:12px}
.skel-item{height:90px;background:linear-gradient(90deg,var(--border) 25%,var(--bg) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:16px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty-content{text-align:center;padding:48px 24px;color:var(--text-muted)} .empty-content-icon{font-size:44px;margin-bottom:12px} .empty-content-text{font-size:14px;font-weight:500}
.loading-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}
.loading-inner{text-align:center}
.loader-ring{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin 0.7s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-msg{font-size:14px;color:var(--text-muted);font-weight:500}

/* ═══ BNAV SVG ICONS ═══ */
.bnav-svg{width:22px;height:22px;stroke:currentColor;display:block}

/* ═══ SOCIAL CHANNELS TAB ═══ */
.social-section-title{font-size:13px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;margin-top:4px}
.social-channels{display:flex;flex-direction:column;gap:12px}
.social-card{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:16px;padding:14px 16px;box-shadow:0 1px 6px rgba(15,29,64,0.07);text-decoration:none;color:inherit;transition:transform var(--tr),box-shadow var(--tr);cursor:pointer}
.social-card:active{transform:scale(0.98)}
.social-card-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.social-card-icon svg{width:26px;height:26px}
.social-tg .social-card-icon{background:#e8f4fd;color:#0088cc}
.social-yt .social-card-icon{background:#fdecea;color:#ff0000}
.social-card-info{flex:1;min-width:0}
.social-card-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px}
.social-card-desc{font-size:12px;color:var(--text-muted);line-height:1.4}
.social-card-arr{font-size:20px;color:var(--text-muted);font-weight:300}

/* ═══ INFO HOME REDESIGN ═══ */
.info-hero{background:linear-gradient(155deg,#0f1d40 0%,#1a3a6e 60%,#1e4db7 100%);padding-bottom:28px;position:relative;overflow:hidden}
.info-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.04) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(100,160,255,0.08) 0%,transparent 40%)}
.info-hero-inner{position:relative;z-index:1;text-align:center;padding:32px 24px 0}
.info-hero-inner{position:relative;z-index:1;text-align:center;padding:32px 24px 0}
.info-logo{width:110px;height:110px;margin:0 auto 16px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;overflow:hidden;filter:drop-shadow(0 4px 16px rgba(0,150,255,0.4))}
.info-logo svg{width:64px;height:64px}
.info-title{font-size:26px;font-weight:800;color:#fff;letter-spacing:-0.02em;margin-bottom:6px;text-shadow:0 0 30px rgba(26,86,219,0.6),0 2px 4px rgba(0,0,0,0.3)}
.info-accent{font-size:14px;font-weight:700;color:#60a5fa;margin-bottom:12px;letter-spacing:0.01em}
.info-desc{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.7;max-width:320px;margin:0 auto}

.info-stats-row{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;margin:16px 16px 16px;padding:16px 8px;box-shadow:0 2px 16px rgba(15,29,64,0.08)}
.info-stat{flex:1;text-align:center}
.info-stat-n{display:block;font-size:22px;font-weight:800;color:#1e4db7;letter-spacing:-0.02em}
.info-stat-l{display:block;font-size:11px;color:#8a99b5;font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:0.04em}
.info-stat-sep{width:1px;height:36px;background:#e8ecf4}

.info-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 16px}
.info-card{background:#fff;border-radius:18px;padding:18px 14px 16px;box-shadow:0 2px 12px rgba(15,29,64,0.06);text-align:center;border:1px solid rgba(15,29,64,0.04)}
.info-card-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.info-card-icon svg{width:28px;height:28px;stroke-width:1.8}
.ic-blue{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb;box-shadow:0 4px 12px rgba(37,99,235,0.15)}
.ic-yellow{background:linear-gradient(135deg,#fef9ec,#fef3c7);color:#d97706;box-shadow:0 4px 12px rgba(217,119,6,0.15)}
.ic-green{background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#16a34a;box-shadow:0 4px 12px rgba(22,163,74,0.15)}
.ic-purple{background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#7c3aed;box-shadow:0 4px 12px rgba(124,58,237,0.15)}
.info-card-title{font-size:13px;font-weight:800;color:#0f1d40;margin-bottom:6px;letter-spacing:-0.01em}
.info-card-desc{font-size:11.5px;color:#8a99b5;line-height:1.55}

.info-start-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,#1e4db7,#2563eb);color:#fff;border:none;border-radius:16px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:0.01em;box-shadow:0 6px 20px rgba(30,77,183,0.35);transition:transform 0.15s,box-shadow 0.15s}
.info-start-btn:active{transform:scale(0.98);box-shadow:0 2px 10px rgba(30,77,183,0.3)}
.info-start-btn svg{width:18px;height:18px}

/* ═══ DOCUMENT VIEWER ═══ */
/* doc-viewer as tab — no fixed overlay */
@keyframes slideUp { from { transform: translateY(30px); opacity:0; } to { transform: translateY(0); opacity:1; } }
#tab-docview.active { animation: slideUp 0.2s ease; }
.doc-viewer-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
    min-height: 56px;
    box-shadow: 0 2px 8px rgba(15,29,64,0.06);
}
.doc-back-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--bg); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--blue); flex-shrink: 0;
}
.doc-back-btn svg { width: 20px; height: 20px; }
.doc-viewer-title {
    flex: 1; font-size: 15px; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-dl-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--blue-light); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-decoration: none;
}
.doc-dl-btn svg { width: 18px; height: 18px; }
.doc-viewer-body, #docViewerBody {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
}
.doc-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 300px;
}
.doc-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.doc-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 24px; text-align: center;
    color: var(--text);
}

/* Document Content Styles */
.doc-content {
    padding: 20px 18px 40px;
    max-width: 680px; margin: 0 auto;
    font-size: 14px; line-height: 1.7; color: var(--text);
}
.doc-doc-title {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 20px; padding-bottom: 12px;
    border-bottom: 2px solid var(--blue-light);
}
.doc-heading {
    font-size: 14px; font-weight: 800; color: var(--navy);
    margin: 24px 0 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--blue-light), #f0f4ff);
    border-radius: 10px;
    border-left: 3px solid var(--blue);
    line-height: 1.4;
}
.doc-heading:first-of-type { margin-top: 0; }
.doc-numbered {
    font-size: 14px; font-weight: 600; color: var(--text);
    margin: 16px 0 8px;
    padding-left: 4px;
}
.doc-bullet {
    font-size: 13px; color: var(--text-sec);
    margin: 5px 0;
    padding: 8px 12px 8px 14px;
    background: var(--white);
    border-radius: 8px;
    border-left: 3px solid var(--border);
    position: relative;
    line-height: 1.6;
}
.doc-para {
    font-size: 13px; color: var(--text-sec);
    margin: 6px 0;
    line-height: 1.75;
}
.doc-callout {
    font-size: 13px; font-weight: 600; color: var(--navy);
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--yellow-bg);
    border-radius: 10px;
    border: 1px solid #fde68a;
    line-height: 1.6;
}
.doc-spacer { height: 6px; }
.doc-numbered {
    font-size: 13px; font-weight: 600; color: var(--text);
    margin: 14px 0 6px;
    display: flex; align-items: baseline; gap: 8px;
    line-height: 1.6;
}
.doc-num-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue); color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 2px 7px; border-radius: 20px;
    flex-shrink: 0; line-height: 1.4;
}
.doc-link-para {
    font-size: 13px; color: var(--text-sec);
    margin: 6px 0; line-height: 1.7;
    padding: 8px 12px;
    background: var(--blue-light);
    border-radius: 8px;
}

/* ═══ PDF TAB ═══ */
.pdf-tab-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}
.pdf-tab-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pdf-dl-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--blue); color: #fff;
    padding: 8px 14px; border-radius: 9px;
    font-size: 12px; font-weight: 700; text-decoration: none;
    white-space: nowrap;
}
.pdf-embed-wrap {
    display: flex; align-items: center; justify-content: center;
    background: #525659;
}
.pdf-loading {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 80px 20px;
}