:root{
  --navy:#08155d;
  --blue:#0b52d8;
  --green:#08883d;
  --purple:#6811b9;
  --orange:#ff4318;
  --line:#e1e7f1;
  --muted:#677095;
  --soft-green:#eef8ef;
  --page:#ffffff;
  --shadow:0 1px 3px rgba(10,25,80,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--navy);background:#fff;font-size:14px}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.sidebar{position:fixed;inset:0 auto 0 0;width:212px;border-right:1px solid var(--line);background:#fff;z-index:40;padding:18px 14px;overflow-y:auto}
.brand{padding:2px 5px 22px}.brand-name{font-size:24px;line-height:1;font-weight:800;letter-spacing:-.8px}.brand-name span{color:#1459dd}.brand-name strong{color:#159143}.brand-tagline{font-size:11px;font-weight:700;margin-top:6px;color:#183a83}
.side-nav{display:flex;flex-direction:column;gap:5px}.side-nav a{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;min-height:45px;padding:0 10px;border-radius:7px;font-size:12.5px;font-weight:600}.side-nav a svg{width:19px;height:19px;stroke-width:1.8}.side-nav a.active{color:#08752d;background:#edf7ef}.side-nav a:hover{background:#f5f7fb}.notification-link b{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#f01420;color:#fff;font-size:10px}
.motivation-card{border:1px solid var(--line);border-radius:9px;padding:22px 15px 17px;text-align:center;margin-top:30px;box-shadow:var(--shadow)}.motivation-card img{width:110px;height:119px;object-fit:cover;object-position:center}.motivation-card h3{font-size:18px;line-height:1.35;margin:12px 0;color:#0a1b67}.motivation-card p{font-size:11.5px;line-height:1.8;margin:0;color:#25356e}
.page-shell{margin-left:212px;min-height:100vh}.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 27px;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);z-index:30}.icon-button{border:0;background:transparent;color:#164ec0;padding:8px}.icon-button svg{width:27px;height:27px}.search-box{width:500px;height:47px;border:1px solid #d8deec;border-radius:8px;display:flex;align-items:center;margin-left:95px;padding:0 14px;color:#0d2f8b}.search-box input{border:0;outline:0;flex:1;padding:0 12px;color:#28356f}.search-box svg{width:18px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:18px;position:relative}.notification-button{position:relative;border:0;background:none;color:#08267f}.notification-button svg{width:24px}.notification-button span{position:absolute;right:-6px;top:-8px;background:#ee101c;color:#fff;border-radius:999px;font-size:10px;line-height:18px;width:18px}.profile-button{border:0;background:none;display:flex;align-items:center;gap:9px;color:#07165d;font-weight:700}.profile-button img{width:43px;height:43px;border-radius:50%;object-fit:cover}.profile-button svg{width:16px}.profile-menu{display:none;position:absolute;right:0;top:54px;width:165px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 30px rgba(20,32,80,.14);overflow:hidden}.profile-menu.open{display:block}.profile-menu a{display:block;padding:11px 13px;font-size:12px}.profile-menu a:hover{background:#f6f8fc}
.content{max-width:1080px;margin:0 auto;padding:28px 18px 24px}.heading-block{display:flex;align-items:flex-start;gap:13px;margin-bottom:24px}.heading-icon{color:#09813a;margin-top:2px}.heading-icon svg{width:34px;height:34px;stroke-width:1.9}.heading-block h1{margin:0;font-size:30px;letter-spacing:-.6px}.heading-block p{margin:4px 0 0;font-size:13px;color:#31437d}
.module-tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:23px}.module-tabs button{min-height:126px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#07165d;font-size:11.5px;font-weight:700;box-shadow:var(--shadow)}.module-tabs button:first-child{border-radius:8px 0 0 8px}.module-tabs button:last-child{border-radius:0 8px 8px 0}.module-tabs button svg{width:34px;height:34px;stroke-width:2.3}.module-tabs button:nth-child(1) svg{color:#09883f}.module-tabs button:nth-child(2) svg{color:#6812c1}.module-tabs button:nth-child(3) svg{color:#ff4318}.module-tabs button:nth-child(4) svg{color:#0b8c45}.module-tabs button:nth-child(5) svg{color:#6812c1}.module-tabs button:nth-child(6) svg{color:#ff4318}.module-tabs button:nth-child(7) svg{color:#0b60df}.module-tabs button.active{border:1.5px solid #0a8a42;background:#eef8f0;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(10,138,66,.08)}
.toolbar-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.breadcrumb{display:flex;align-items:center;gap:9px;font-size:12px;color:#263a78}.breadcrumb svg{width:13px}.date-picker-wrap{position:relative}.date-picker{height:49px;min-width:194px;border:1px solid #d8deec;background:#fff;border-radius:8px;color:#0a1d6e;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px}.date-picker svg{width:19px}.date-menu{display:none;position:absolute;right:0;top:54px;width:195px;border:1px solid var(--line);background:#fff;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:6px;z-index:20}.date-menu.open{display:block}.date-menu button{width:100%;border:0;background:#fff;text-align:left;padding:10px;border-radius:6px;color:#152360}.date-menu button:hover{background:#edf7ef;color:#07813b}
.reader-layout{display:grid;grid-template-columns:185px minmax(0,1fr);gap:10px}.news-panel,.article-card,.share-card{border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:var(--shadow)}.news-panel{padding:0 11px 18px}.news-panel-header{padding:20px 6px 14px;border-bottom:1px solid #edf0f5}.news-panel-header h2{font-size:15px;margin:0}.news-panel-header p{font-size:12px;margin:7px 0 0;color:#526394}.news-list{list-style:none;padding:0;margin:0}.news-list li{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:17px 6px;border-bottom:1px solid #edf0f5;align-items:flex-start;color:#0b1b65;font-size:11px;line-height:1.9;font-weight:700;cursor:pointer}.news-list li .number{width:22px;height:22px;border-radius:50%;background:#f1f3f8;display:grid;place-items:center;font-size:10px}.news-list li.active{margin:0 -6px;padding-left:12px;padding-right:12px;background:#edf8ef;border-radius:8px;color:#087d36}.news-list li.active .number{background:#d9f2df}.view-all{width:145px;height:43px;border:1px solid #94b5ff;background:#fff;border-radius:7px;color:#0c55e8;font-weight:700;margin:22px auto 0;display:block;font-size:11px}
.article-card{padding:21px 25px 19px}.article-navigation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.article-navigation button{height:39px;border:1px solid #96b6fb;background:#fff;border-radius:7px;color:#0754e8;font-weight:700;font-size:11px;display:flex;align-items:center;gap:6px;padding:0 14px}.article-navigation button:last-child{justify-self:end}.article-navigation button svg{width:15px}.article-navigation span{font-weight:700;font-size:12px}.article-header{display:flex;justify-content:space-between;align-items:flex-start;margin-top:30px;margin-bottom:15px}.article-header h2{font-size:26px;line-height:1.25;margin:0 0 12px;letter-spacing:-.55px}.article-meta{display:flex;gap:10px;align-items:center;font-size:11px;font-weight:600;color:#34427a}.article-meta .category{background:#eaf8ed;color:#077a34;padding:5px 9px;border-radius:7px}.bookmark-button{border:0;background:#fff;color:#07165d;display:flex;gap:7px;align-items:center;font-weight:700;font-size:11px;margin-top:7px}.bookmark-button svg{width:20px}.bookmark-button.saved svg{fill:#0b54df;color:#0b54df}.article-image{display:block;width:100%;height:306px;object-fit:cover;border-radius:7px}.article-body{font-size:13px;line-height:1.83;color:#14235d;padding-top:13px}.article-body p{margin:0 0 15px}
.share-card{margin-top:15px;padding:20px 24px;height:121px}.share-card h3{font-size:13px;margin:0 0 16px}.share-buttons{display:flex;gap:12px}.share-buttons button{width:39px;height:39px;border-radius:50%;border:5px solid #f0f4f8;color:white;font-size:18px;font-weight:800;display:grid;place-items:center}.share-buttons .whatsapp{background:#08a747}.share-buttons .telegram{background:#149bd6}.share-buttons .facebook{background:#1466d8}.share-buttons .twitter{background:#1b9ee5}.share-buttons .copy{background:#fff;color:#0b246b;border:1px solid #dce2ec}.share-buttons .copy svg{width:18px}
.info-strip{height:43px;margin-top:15px;border-radius:7px;background:linear-gradient(90deg,#f3fbf3,#f9fcf8);border:1px solid #e5efe7;display:flex;align-items:center;gap:12px;padding:0 14px;color:#33416c;font-size:10.5px}.info-strip svg{color:#0a9147;width:19px}.toast{position:fixed;bottom:24px;right:24px;background:#0b1d5f;color:#fff;border-radius:8px;padding:11px 15px;box-shadow:0 10px 30px rgba(0,0,0,.16);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.search-box{margin-left:35px;width:420px}.content{max-width:940px}.module-tabs button{font-size:10px}.article-image{height:270px}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.page-shell{margin-left:0}.search-box{margin-left:18px}.module-tabs{grid-template-columns:repeat(4,1fr)}.module-tabs button{border-radius:7px!important}.reader-layout{grid-template-columns:1fr}.news-panel{order:2}.news-list{display:grid;grid-template-columns:repeat(2,1fr)}.article-card{order:1}}
@media(max-width:650px){body{font-size:13px}.topbar{height:68px;padding:0 12px}.search-box{display:none}.profile-button span,.profile-button>svg{display:none}.content{padding:20px 10px}.heading-block h1{font-size:25px}.module-tabs{grid-template-columns:repeat(2,1fr);gap:8px}.module-tabs button{min-height:96px}.toolbar-row{align-items:flex-start;gap:12px;flex-direction:column}.date-picker{width:100%}.date-picker-wrap{width:100%}.reader-layout{display:block}.news-panel{margin-top:12px}.news-list{grid-template-columns:1fr}.article-card{padding:15px}.article-navigation button{font-size:0;width:42px;padding:0;justify-content:center}.article-navigation button svg{width:17px}.article-header h2{font-size:21px}.article-image{height:210px}.bookmark-button span{display:none}.share-card{height:auto}.motivation-card{display:none}}

/* Connected module views */
.view-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.selector-group{display:flex;gap:14px;flex-wrap:wrap}.selector{height:49px;min-width:205px;border:1px solid #d8deec;background:#fff;border-radius:8px;color:#0a1d6e;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px}.selector svg{width:19px}.view-title{display:flex;align-items:center;gap:14px;margin:0 0 18px}.view-title .round-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff}.round-icon.green{background:#078b3d}.round-icon.purple{background:#6811b9}.round-icon.orange{background:#ff4318}.round-icon.blue{background:#0b5ce0}.view-title h2{margin:0;font-size:29px}.view-title p{margin:4px 0 0;color:#526394}
.quiz-landing{border:1px solid var(--line);border-radius:11px;padding:20px;background:#fff}.quiz-hero{border-radius:10px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.quiz-hero.green{background:linear-gradient(90deg,#effaf2,#f7fcf8)}.quiz-hero.purple{background:linear-gradient(90deg,#f6effd,#fbf8ff)}.quiz-hero.orange{background:linear-gradient(90deg,#fff2ec,#fff8f5)}.quiz-hero h3{font-size:25px;margin:0}.quiz-stats{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr) 210px;border:1px solid var(--line);border-radius:9px;overflow:hidden}.quiz-stat{padding:20px;text-align:center;border-right:1px solid var(--line)}.quiz-stat strong{font-size:20px;display:block}.quiz-stat span{display:block;margin-top:7px;color:#526394}.primary-action{border:0;color:#fff;font-weight:800;font-size:15px;border-radius:7px;margin:14px;min-height:52px}.primary-action.green{background:#078b3d}.primary-action.purple{background:#6811b9}.primary-action.orange{background:#ff4318}.quiz-instructions{border:1px solid var(--line);border-radius:10px;padding:26px;background:#fff}.quiz-instructions ul{line-height:2.2;color:#31437d}.quiz-instructions .primary-action{width:260px;margin:18px 0 0}
.live-quiz{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:18px}.question-card,.palette-card,.result-card,.solutions-card,.magazine-table{border:1px solid var(--line);border-radius:10px;background:#fff;padding:24px}.question-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px}.timer{font-weight:800;color:#087a37}.question-text{font-size:18px;line-height:1.6;margin:27px 0 20px}.option{display:flex;align-items:center;gap:12px;border:1px solid #dfe5ef;border-radius:8px;padding:13px 15px;margin:10px 0;cursor:pointer}.option.selected{border-color:#0b60df;background:#eef5ff}.option input{accent-color:#0b60df}.quiz-nav{display:flex;justify-content:space-between;margin-top:25px}.quiz-nav button{height:45px;padding:0 18px;border-radius:7px;border:1px solid #8bb1ff;background:#fff;color:#0b55df;font-weight:700}.quiz-nav button.next{background:#0b60df;color:#fff}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}.palette-grid button{height:36px;border:1px solid #d8deec;background:#fff;border-radius:5px}.palette-grid button.current{background:#078b3d;color:#fff}.palette-grid button.answered{background:#dff5e5;color:#06742f}.result-card{text-align:center;padding:34px}.result-card h2{font-size:29px}.result-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:25px 0}.result-summary div{border:1px solid var(--line);padding:20px;border-radius:9px}.result-summary strong{font-size:25px;display:block}.result-actions{display:flex;gap:12px;justify-content:center}.result-actions button{min-width:180px;height:46px;border-radius:7px;font-weight:700;border:1px solid #0b60df;background:#fff;color:#0b60df}.result-actions button:first-child{background:#078b3d;color:#fff;border-color:#078b3d}.solution-item{border-bottom:1px solid var(--line);padding:18px 0}.solution-item:last-child{border:0}.solution-item h4{margin:0 0 9px}.answer-good{color:#078b3d;font-weight:700}.answer-bad{color:#e42121;font-weight:700}
.magazine-table{padding:0;overflow:hidden}.magazine-row{display:grid;grid-template-columns:1.5fr 1fr .7fr 190px;align-items:center;border-bottom:1px solid var(--line);padding:18px 24px;gap:15px}.magazine-row.header{background:#f8faff;font-weight:800}.magazine-row:last-child{border-bottom:0}.download-btn{height:42px;border:1px solid #78a6ff;background:#fff;color:#0b60df;border-radius:7px;font-weight:700}.empty-placeholder{border:1px dashed #ccd5e5;border-radius:10px;text-align:center;padding:55px;color:#657095}
@media(max-width:900px){.quiz-stats{grid-template-columns:repeat(3,1fr)}.quiz-stats .primary-action{grid-column:1/-1}.live-quiz{grid-template-columns:1fr}.magazine-row{grid-template-columns:1fr 1fr}.magazine-row.header{display:none}}
@media(max-width:650px){.view-toolbar{align-items:stretch;flex-direction:column}.selector{width:100%}.quiz-stats{grid-template-columns:1fr}.quiz-stat{border-right:0;border-bottom:1px solid var(--line)}.result-summary{grid-template-columns:1fr}.module-tabs{grid-template-columns:repeat(2,1fr)}.magazine-row{grid-template-columns:1fr}.quiz-hero{align-items:flex-start;flex-direction:column}}

/* Reader corrections: compact navigation and internal long-article scrolling */
.article-navigation{min-height:34px}
.article-navigation .compact-nav{height:32px;min-width:88px;padding:0 10px;border-color:#d5deed;color:#31558f;background:#fff;border-radius:7px;font-size:12px;font-weight:650;gap:4px;box-shadow:none;transition:.18s ease}
.article-navigation .compact-nav:hover{background:#f6f9ff;border-color:#aac2ee;color:#0b52d8}
.article-navigation .compact-nav svg{width:14px;height:14px;stroke-width:2}
.article-position{font-size:11.5px!important;color:#66739a;font-weight:650!important}
.article-header{margin-top:20px}
.article-scroll-area{height:610px;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scroll-behavior:smooth;border-top:1px solid transparent}
.article-scroll-area::-webkit-scrollbar{width:7px}
.article-scroll-area::-webkit-scrollbar-track{background:#f3f6fa;border-radius:20px}
.article-scroll-area::-webkit-scrollbar-thumb{background:#c7d1df;border-radius:20px;border:1px solid #f3f6fa}
.article-scroll-area::-webkit-scrollbar-thumb:hover{background:#9daabd}
.article-scroll-area{scrollbar-width:thin;scrollbar-color:#c7d1df #f3f6fa}
.scroll-hint{display:flex;align-items:center;justify-content:center;gap:6px;min-height:29px;margin-top:8px;border-top:1px solid #eef1f5;color:#78839e;font-size:10.5px}
.scroll-hint svg{width:13px;height:13px}

/* Monthly category count panel */
.monthly-summary{padding:12px 4px 8px;border-bottom:1px solid #edf0f5}
.monthly-summary-title{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px 9px;font-size:10.5px;color:#53618a}
.monthly-summary-title b{font-size:9.5px;color:#0b60df;background:#edf4ff;padding:3px 6px;border-radius:10px;white-space:nowrap}
.category-count-list{display:flex;flex-direction:column;gap:4px;max-height:245px;overflow-y:auto;padding-right:3px}
.category-count{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:#f8faff;color:#24366f;border-radius:6px;padding:7px 8px;font-size:9.8px;text-align:left}
.category-count:hover{background:#edf4ff;color:#0b52d8}
.category-count b{display:grid;place-items:center;min-width:22px;height:19px;padding:0 5px;border-radius:10px;background:#fff;border:1px solid #dfe6f1;font-size:9px;color:#44537e}

/* Quiz icon visibility and alignment */
.quiz-hero-icon{width:46px;height:46px;opacity:.72}
.quiz-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.quiz-stat>svg{width:23px;height:23px;margin-bottom:5px;color:#0b60df;stroke-width:1.8}
.quiz-stat:nth-child(2)>svg{color:#6811b9}
.quiz-stat:nth-child(3)>svg{color:#ff6a21}
.primary-action{display:flex;align-items:center;justify-content:center;gap:8px}
.primary-action svg{width:18px;height:18px;fill:none}

/* Better monthly magazine download control */
.magazine-issue{display:flex;align-items:center;gap:11px;min-width:0}
.magazine-issue>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.magazine-issue small{font-size:10px;color:#78839e;font-weight:500}
.pdf-badge{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border-radius:8px;background:#fff0ee;color:#e33f30;border:1px solid #ffd8d3}
.pdf-badge svg{width:19px;height:19px}
.download-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;padding:0 14px;background:#0b60df;color:#fff;border-color:#0b60df;box-shadow:0 2px 5px rgba(11,96,223,.16);transition:.18s ease}
.download-btn svg{width:16px;height:16px;stroke-width:2}
.download-btn:hover{background:#084fc0;border-color:#084fc0;transform:translateY(-1px)}

@media(max-width:900px){.article-scroll-area{height:560px}.monthly-summary{display:none}}
.live-period-select{min-width:245px;height:42px;padding:0 12px;display:flex;align-items:center;gap:9px;border:1px solid #d9e3f1;border-radius:10px;background:#fff;color:#145fd7}.live-period-select svg{width:17px;flex:none}.live-period-select select{width:100%;border:0;outline:0;background:transparent;color:#152b52;font:600 12px/1.2 inherit;cursor:pointer}.live-period-reader .student-live-meta{margin-top:14px;padding-top:12px;border-top:1px solid #edf1f6;display:flex;align-items:center;justify-content:space-between}.live-period-reader .student-live-meta span{display:flex;align-items:center;gap:6px;color:#71809a;font-size:11px}.live-period-reader .student-live-meta svg{width:14px}@media(max-width:640px){.live-reader-period{align-items:flex-start;flex-direction:column}.live-period-select{width:100%;min-width:0}}
@media(max-width:650px){.article-navigation .compact-nav{min-width:34px;width:auto;height:32px;padding:0 8px;font-size:0}.article-navigation .compact-nav span{display:none}.article-navigation .compact-nav svg{width:16px}.article-scroll-area{height:520px;padding-right:5px}.scroll-hint{font-size:9.5px}.magazine-issue small{display:none}}


/* Final reader visibility corrections */
.article-scroll-area{
  height:540px;
  overflow-y:scroll;
  padding:0 10px 0 0;
  scrollbar-gutter:stable;
}
.article-image{
  width:100%;
  height:auto;
  max-height:330px;
  object-fit:contain;
  object-position:center;
  background:#f4f7fb;
  border:1px solid #edf1f6;
}
.article-body{font-size:13.5px;line-height:1.85;padding:16px 2px 8px}
.article-body p{margin:0 0 18px}
.article-scroll-area::-webkit-scrollbar{width:9px}
.article-scroll-area::-webkit-scrollbar-track{background:#eef2f7;border-radius:20px}
.article-scroll-area::-webkit-scrollbar-thumb{background:#aebaca;border-radius:20px;border:2px solid #eef2f7}
.article-scroll-area::-webkit-scrollbar-thumb:hover{background:#8998ab}

/* Final compact reader navigation */
.article-navigation .compact-nav{height:30px;min-width:76px;padding:0 8px;border-radius:6px;font-size:11.5px}
.article-navigation .compact-nav svg{width:13px;height:13px}

/* Final compact quiz start button */
.quiz-stats{grid-template-columns:repeat(3,1fr);position:relative;padding-bottom:58px}
.quiz-stats .primary-action{
  position:absolute;
  right:16px;
  bottom:12px;
  width:auto;
  min-width:124px;
  min-height:34px;
  height:34px;
  margin:0;
  padding:0 14px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:700;
}
.quiz-stats .primary-action svg{width:14px;height:14px}
@media(max-width:900px){
  .article-scroll-area{height:520px}
  .quiz-stats .primary-action{position:static;grid-column:1/-1;justify-self:center;margin:12px 0 14px}
  .quiz-stats{padding-bottom:0}
}
@media(max-width:650px){
  .article-scroll-area{height:470px}
  .article-image{max-height:250px}
}



/* =========================================================
   SHARED EXAMTIER STUDENT SHELL
   ========================================================= */
.sidebar{width:258px;padding:22px 18px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#b8c2d2 transparent;transition:width .25s,transform .25s}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:#b8c2d2;border-radius:20px}
.brand{display:flex;align-items:center;min-height:78px;padding:2px 6px 18px}.brand a{display:inline-flex;align-items:center}.brand-logo{display:block;width:175px;max-width:100%;height:auto}.brand-mark{display:none}
.side-nav{padding:0;gap:6px}.side-nav a{display:flex;grid-template-columns:none;min-height:0;padding:12px;border-radius:7px;gap:15px;font-size:14px;font-weight:500;line-height:1.2;position:relative;color:#071f5b}.side-nav a>i:first-child{width:19px;text-align:center;font-size:17px}.side-nav a.active{background:#edf5ff;color:#0d57de;font-weight:600}.side-nav a.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#1467f3}.side-nav hr{width:calc(100% - 16px);border:0;border-top:1px solid var(--line);margin:10px 8px}.notification-link b{position:absolute;right:12px;width:22px;height:22px;font-size:11px}
.page-shell{margin-left:258px;width:auto;min-width:0;transition:margin-left .25s}.topbar{position:fixed;top:0;left:258px;right:0;width:auto;height:74px;min-height:74px;padding:0 30px;gap:28px;z-index:30;transition:left .25s}.menu-button{width:38px;height:38px;padding:0;display:grid;place-items:center;flex:none;color:var(--navy)}.menu-button svg{width:20px;height:20px}
.search-box{margin:auto;width:min(540px,50vw);height:42px;padding:0 14px}.search-box input{padding:0}.search-box>svg:last-child{display:none}
.top-actions{height:100%;gap:14px}.notification-button{position:relative;width:38px;height:38px;padding:0;display:grid;place-items:center;text-decoration:none}.notification-button span{top:0;right:0;width:18px;height:18px;line-height:1;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:700}
.profile-wrap{position:relative}.profile-button{min-height:49px;padding:5px 7px;border-radius:9px;gap:10px;text-align:left}.profile-button:hover{background:#f2f6ff}.avatar{width:39px;height:39px;min-width:39px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#2268f5,#3d8cff);color:#fff}.avatar img{display:none;width:100%;height:100%;object-fit:cover}.avatar>i{font-size:17px;color:#fff}.profile-copy{display:flex;flex-direction:column;gap:3px;min-width:80px}.profile-copy strong{font-size:12px}.profile-copy small{font-size:10px;color:#65718f}.profile-chevron{width:14px;transition:transform .2s}.profile-button[aria-expanded=true] .profile-chevron{transform:rotate(180deg)}
.profile-menu{top:calc(100% + 10px);width:210px;padding:8px;overflow:visible}.profile-menu a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;font-size:13px;font-weight:500}.profile-menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}.profile-menu .danger{color:#d93035}
.content{width:100%;max-width:none;margin:0;padding:98px 25px 24px}.heading-block{margin-bottom:18px}.heading-block h1{font-size:30px}.module-tabs,.reader-layout,.view-toolbar,.quiz-landing,.magazine-card,.info-strip{max-width:1500px;margin-left:auto;margin-right:auto}
.sidebar.collapsed{width:78px;padding:12px;overflow:visible}.sidebar.collapsed .brand{justify-content:center;min-height:58px;padding:0 0 12px}.sidebar.collapsed .brand a{display:grid;place-items:center;width:44px;height:44px}.sidebar.collapsed .brand-logo{display:none}.sidebar.collapsed .brand-mark{display:block;width:36px;height:36px}.sidebar.collapsed .side-nav{gap:4px}.sidebar.collapsed .side-nav a{justify-content:center;gap:0;padding:10px}.sidebar.collapsed .side-nav a span,.sidebar.collapsed .notification-link b{display:none}.sidebar.collapsed .side-nav hr{margin:8px}.sidebar.collapsed .side-nav a::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 13px);top:50%;z-index:200;transform:translate(6px,-50%);padding:8px 11px;border-radius:6px;background:#071f5b;color:#fff;font-size:12px;white-space:nowrap;box-shadow:0 6px 18px rgba(11,31,94,.2);opacity:0;visibility:hidden;pointer-events:none;transition:.15s}.sidebar.collapsed .side-nav a:hover::after,.sidebar.collapsed .side-nav a:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%)}.page-shell.sidebar-collapsed{margin-left:78px}.page-shell.sidebar-collapsed .topbar{left:78px}
@media(max-width:1024px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.page-shell,.page-shell.sidebar-collapsed{margin-left:0;width:100%}.topbar,.page-shell.sidebar-collapsed .topbar{left:0}.content{padding-top:90px}}
@media(max-width:650px){.topbar{height:72px;min-height:72px}.profile-copy,.profile-chevron{display:none}.avatar{width:36px;height:36px;min-width:36px}.content{padding-top:88px}}

/* Professional Current Affairs module navigation */
.module-tabs{overflow:hidden;border:1px solid #dbe3ee;border-radius:10px;background:#fff;box-shadow:0 4px 14px rgba(25,45,90,.045)}
.module-tabs button{min-height:124px;border:0;border-right:1px solid #dbe3ee;box-shadow:none;transition:background .17s,color .17s,box-shadow .17s,transform .17s}
.module-tabs button:last-child{border-right:0}
.module-tabs button:hover{position:relative;z-index:1;background:#f8fbff;color:#0d57de}
.module-tabs button svg{width:44px;height:44px;padding:9px;border-radius:10px;stroke-width:2;transition:transform .17s}
.module-tabs button:hover svg{transform:translateY(-2px)}
.module-tabs button:nth-child(1) svg{color:#0a9146;background:#e8f8ef}
.module-tabs button:nth-child(2) svg{color:#6d28d9;background:#f1eafe}
.module-tabs button:nth-child(3) svg{color:#e94b24;background:#fff0eb}
.module-tabs button:nth-child(4) svg{color:#087f5b;background:#e7f7f1}
.module-tabs button:nth-child(5) svg{color:#2563eb;background:#eaf1ff}
.module-tabs button:nth-child(6) svg{color:#d97706;background:#fff3df}
.module-tabs button:nth-child(7) svg{color:#0b60df;background:#eaf2ff}
.module-tabs button.active{position:relative;z-index:2;border:0;border-right:1px solid #b8d0fb;background:#eef5ff;color:#0d57de;border-radius:0;box-shadow:inset 0 -3px 0 #1769ff}
@media(max-width:900px){.module-tabs{gap:8px;border:0;background:transparent;box-shadow:none;overflow:visible}.module-tabs button,.module-tabs button:last-child{border:1px solid #dbe3ee;border-radius:8px!important}.module-tabs button.active{border-color:#9fc0fb}}

/* Working professional Current Affairs selectors */
.selector-wrap{position:relative;min-width:230px}
.selector{width:100%;min-width:0;height:44px;padding:0 13px;border:1px solid #d4ddea;border-radius:7px;color:#172954;background:#fff;font-size:12.5px;font-weight:600;box-shadow:0 1px 2px rgba(16,37,80,.025);transition:border-color .16s,box-shadow .16s}
.selector>svg:first-child{width:17px;color:#1769ff}.selector>svg:last-child{width:15px;margin-left:auto;color:#61708d;transition:transform .16s}.selector:hover{border-color:#aac4ef}.selector[aria-expanded=true]{border-color:#72a3ff;box-shadow:0 0 0 3px rgba(23,105,255,.09)}.selector[aria-expanded=true]>svg:last-child{transform:rotate(180deg)}
.selector-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:260;padding:6px;border:1px solid #d8e0ed;border-radius:9px;background:#fff;box-shadow:0 12px 30px rgba(15,36,95,.15)}
.selector-wrap.open .selector-menu{display:block}
.selector-menu button{display:block;width:100%;min-height:37px;padding:8px 10px;border:0;border-radius:6px;background:#fff;color:#273858;text-align:left;font-size:12px}
.selector-menu button:hover{background:#f1f6ff;color:#1769ff}.selector-menu button.selected{background:#eaf2ff;color:#0d57de;font-weight:600}
@media(max-width:650px){.selector-wrap{width:100%;min-width:0}}

/* Scrollable news list for larger article collections */
.news-list{
  height:420px;
  max-height:420px;
  overflow-y:scroll;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#b8c2d2 transparent;
  overscroll-behavior:contain;
}
.news-list::-webkit-scrollbar{width:5px}
.news-list::-webkit-scrollbar-track{background:transparent}
.news-list::-webkit-scrollbar-thumb{background:#b8c2d2;border-radius:20px}
.news-list::-webkit-scrollbar-thumb:hover{background:#8f9db2}
@media(max-width:900px){.news-list{height:400px;max-height:400px}}
@media(max-width:650px){.news-list{height:360px;max-height:360px}}

/* Balanced professional reader columns */
.reader-layout{
  grid-template-columns:minmax(250px,280px) minmax(0,1fr);
  gap:16px;
}
.news-panel{padding-left:14px;padding-right:14px}
.news-panel-header{padding:20px 8px 15px}
.news-list li{
  grid-template-columns:25px minmax(0,1fr);
  gap:10px;
  padding:15px 8px;
  font-size:12px;
  line-height:1.65;
}
.news-list li.active{margin:0;padding-left:8px;padding-right:8px}
@media(max-width:1100px) and (min-width:901px){
  .reader-layout{grid-template-columns:minmax(225px,250px) minmax(0,1fr)}
}
@media(max-width:900px){.reader-layout{grid-template-columns:1fr}}

/* Balanced article navigation */
.article-navigation .compact-nav{
  width:96px;
  min-width:96px;
  justify-content:center;
}
.article-navigation .compact-nav:first-child{justify-self:start}
.article-navigation .compact-nav:last-child{justify-self:end}
.article-position{justify-self:center;white-space:nowrap}
@media(max-width:650px){
  .article-navigation .compact-nav{width:42px;min-width:42px;padding:0}
}

/* Shared student profile dropdown standard */
.profile-menu,.dashboard-profile-menu{width:210px!important;padding:8px!important;border:1px solid #dfe6f1!important;border-radius:9px!important;background:#fff!important;box-shadow:0 12px 35px rgba(12,31,83,.15)!important}
.profile-menu a,.dashboard-profile-menu a{display:flex!important;align-items:center!important;gap:12px!important;min-height:42px;padding:10px!important;border-radius:6px!important;color:#071f5b!important;font-size:13px!important;font-weight:500!important;line-height:1.2!important;text-decoration:none!important}
.profile-menu a>svg,.dashboard-profile-menu a>svg{width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;color:#071f5b!important;stroke-width:2.2!important}
.profile-menu a:hover,.dashboard-profile-menu a:hover{background:#f2f6ff!important}
.profile-menu hr,.dashboard-profile-menu hr{border:0!important;border-top:1px solid #dfe6f1!important;margin:6px 0!important}
.profile-menu .danger,.dashboard-profile-menu .danger,.profile-menu .danger>svg,.dashboard-profile-menu .danger>svg{color:#d93035!important}
/* Shared header notification control */
.bell,.bell-button,.notification-button,.notification-btn,.bell-btn{position:relative;width:38px;height:38px;padding:8px;border:0;border-radius:8px;background:transparent;color:#0b1f5e;text-decoration:none;display:grid;place-items:center;flex:0 0 38px}
.bell:hover,.bell-button:hover,.notification-button:hover,.notification-btn:hover,.bell-btn:hover{background:#f2f6ff}
.bell>i,.bell-button>i,.notification-button>i,.notification-btn>i,.bell-btn>i{font-size:19px;line-height:1;color:#0b1f5e}
.bell>svg,.bell-button>svg,.notification-button>svg,.notification-btn>svg,.bell-btn>svg{width:19px;height:19px;stroke-width:2}
.bell>b,.bell-button>b,.notification-button>span,.notification-btn>.notification-dot,.notification-btn>.top-badge,.bell-btn>span{position:absolute;right:-2px;top:-2px;width:18px;min-width:18px;height:18px;padding:0;border:2px solid #fff;border-radius:50%;background:#ef3030;color:#fff;font-size:10px;font-weight:700;line-height:14px;display:grid;place-items:center}
/* Shared secondary-page breadcrumb */
.page-breadcrumb{display:flex;align-items:center;gap:9px;margin:0 0 16px;color:#687696;font-size:12px;font-weight:500;line-height:1.2}
.page-breadcrumb a{color:#1769ff;text-decoration:none}
.page-breadcrumb a:hover{text-decoration:underline}
.page-breadcrumb>span:first-of-type{color:#9aa7bd;font-size:16px;line-height:12px}
.page-breadcrumb>span:last-child{color:#687696}

.live-reader-period{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 8px;border-bottom:1px solid #e7ecf3}.live-reader-period b,.live-reader-period small{display:block}.live-reader-period b{color:#10234e;font-size:13px}.live-reader-period small{margin-top:5px;color:#73809a;font-size:10px}.live-reader-period>span{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border:1px solid #d5e0ef;border-radius:8px;color:#12336e;font-size:11px;font-weight:700}.live-reader-period svg{width:16px;color:#1764f5}.live-continuous-reader .reading-category-panel{margin-top:10px}.live-continuous-reader .news-copy h2,.live-continuous-reader .news-copy h3{font-size:14px;margin:12px 0 7px}.live-continuous-reader .news-copy blockquote{margin:10px 0;padding:8px 12px;border-left:3px solid #bdd0ef;background:#f7f9fc}.live-continuous-reader .news-copy ul,.live-continuous-reader .news-copy ol{padding-left:20px}.live-continuous-reader .reader-end{margin-top:0}

/* Daily quick-read newspaper cards */
.short-news-reader{background:#fff}.short-filter-panel{margin-top:10px}.short-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #e5eaf1}.short-news-card{min-width:0;padding:22px 18px 24px;border-right:1px solid #e2e7ef;border-bottom:1px solid #e2e7ef}.short-news-card:nth-child(3n){border-right:0}.short-news-image{display:block;width:100%;height:170px;margin-bottom:14px;border-radius:7px;overflow:hidden;background:#f1f4f8}.short-news-image img{display:block;width:100%;height:100%;object-fit:contain;background:#f5f6f8}.short-news-image span{height:100%;display:grid;place-items:center;color:#8794a9}.short-news-image svg{width:34px}.short-news-card-body{display:flex;min-height:330px;flex-direction:column}.short-news-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.short-news-category{display:inline-flex;padding:5px 8px;border-radius:5px;background:#edf8f1;color:#087a3b;font-size:9px;font-weight:750}.short-news-bookmark{width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:#60708a;display:grid;place-items:center;cursor:pointer}.short-news-bookmark:hover,.short-news-bookmark.saved{background:#edf4ff;color:#0d57de}.short-news-bookmark.saved svg{fill:currentColor}.short-news-bookmark svg{width:17px}.short-news-card h2{margin:10px 0;font-size:15px;line-height:1.4}.short-news-card h2 a{color:#101f43;text-decoration:none}.short-news-card h2 a:hover{color:#0d57de}.short-news-copy{color:#34425f;font-size:11.5px;line-height:1.55}.short-news-copy p{margin:0 0 9px}.short-news-more{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:9px;color:#0d57de;font-size:10.5px;font-weight:700;text-decoration:none}.short-news-more svg{width:14px}.short-news-grid>.student-live-empty{grid-column:1/-1}@media(max-width:1050px){.short-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.short-news-card:nth-child(3n){border-right:1px solid #e2e7ef}.short-news-card:nth-child(2n){border-right:0}}@media(max-width:650px){.short-news-grid{grid-template-columns:1fr}.short-news-card,.short-news-card:nth-child(3n){border-right:0}.short-news-image{height:210px}.short-news-card-body{min-height:0}.short-news-more{margin-top:8px}}

.live-reader-period>span.live-reader-date-control{padding:0 10px;font-size:0}.live-reader-date-control{cursor:pointer}.live-reader-date-control:hover{border-color:#8eb2f5;background:#f6f9ff}.live-reader-date-input{position:static;width:136px;height:34px;padding:0;border:0;outline:0;background:transparent;color:#12336e;font:700 11px Inter,sans-serif;cursor:pointer;color-scheme:light}.live-reader-date-input::-webkit-calendar-picker-indicator{width:18px;height:18px;margin-left:8px;cursor:pointer;opacity:.8}.live-reader-date-control:focus-within{border-color:#1764f5;box-shadow:0 0 0 3px rgba(23,100,245,.1)}

/* Live daily articles: dashboard version of the public Current Affairs cards */
.student-live-affairs{border:1px solid #dfe6f0;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 5px 18px rgba(20,42,91,.045)}.student-live-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px 16px;border-bottom:1px solid #e8edf4}.student-live-kicker{display:block;margin-bottom:5px;color:#0b8a48;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.student-live-head h2{margin:0;color:#0a2054;font-size:20px}.student-live-head p{margin:6px 0 0;color:#687792;font-size:11px}.student-live-count{padding:6px 10px;border-radius:999px;background:#edf4ff;color:#0d57de;font-size:10px;font-weight:700;white-space:nowrap}.student-subject-filter{display:flex;flex-wrap:wrap;gap:7px;padding:14px 22px;border-bottom:1px solid #edf1f6;background:#fbfcfe}.student-subject-filter button{min-height:33px;padding:0 11px;border:1px solid #cedaeb;border-radius:7px;background:#fff;color:#164baf;font-size:10.5px;font-weight:650;cursor:pointer}.student-subject-filter button:hover{border-color:#8eb2f5;background:#f5f8ff}.student-subject-filter button.active{border-color:#1764f5;background:#1764f5;color:#fff}.student-subject-filter button svg{width:14px;vertical-align:middle;margin-right:5px}.student-live-list{padding:0 22px}.student-live-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid #e4eaf2}.student-live-card:last-child{border-bottom:0}.student-live-image{width:190px;min-height:116px;border-radius:9px;background:#f0f4fa;overflow:hidden;display:grid;place-items:center}.student-live-image img{display:block;width:100%;height:100%;max-height:128px;object-fit:contain;background:#f5f7fa}.student-live-image span{color:#8190aa}.student-live-image svg{width:30px}.student-live-copy{min-width:0}.student-live-categories{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.student-live-categories span{padding:4px 7px;border-radius:5px;background:#eaf1ff;color:#0b55df;font-size:9px;font-weight:700}.student-live-copy h3{margin:0 0 8px;font-size:16px;line-height:1.35}.student-live-copy h3 a{color:#081f57;text-decoration:none}.student-live-copy h3 a:hover{color:#0d57de}.student-live-copy>p{margin:0;color:#596984;font-size:11.5px;line-height:1.65}.student-live-meta{display:flex;align-items:center;gap:18px;margin-top:12px;color:#71809a;font-size:10px}.student-live-meta span,.student-live-meta a{display:inline-flex;align-items:center;gap:6px}.student-live-meta svg{width:14px}.student-live-meta a{color:#0d57de;font-weight:700;text-decoration:none}.student-live-empty{padding:55px 20px;text-align:center;color:#71809a}.student-live-empty svg{width:30px}.student-live-empty h3{color:#172b58}.student-live-empty p{font-size:11px}@media(max-width:720px){.student-live-head{align-items:flex-start}.student-live-card{grid-template-columns:1fr}.student-live-image{width:100%;height:190px}.student-live-image img{max-height:190px}.student-live-list,.student-subject-filter{padding-left:14px;padding-right:14px}}

/* =========================================================
   EXAMTIER CURRENT AFFAIRS — CONTINUOUS READING EXPERIENCE
   ========================================================= */

.content{
  max-width:1280px;
  padding:102px 28px 30px;
}

.heading-block{
  margin-bottom:18px;
}

.heading-block h1{
  font-size:28px;
  color:#07152e;
}

.heading-block p{
  color:#667085;
}

/* Compact main navigation */
.ca-navigation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 0 18px;
  margin-bottom:0;
  border-bottom:1px solid #e6ebf2;
}

.ca-reading-tabs{
  display:inline-grid;
  grid-template-columns:repeat(3,105px);
  border:1px solid #dfe5ee;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}

.ca-reading-tab{
  height:44px;
  border:0;
  border-right:1px solid #e7ebf1;
  background:#fff;
  color:#1f2d4d;
  font-size:13px;
  font-weight:700;
}

.ca-reading-tab:last-child{border-right:0}

.ca-reading-tab:hover{
  background:#f7f9fc;
}

.ca-reading-tab.active{
  color:#087b39;
  background:#eef9f1;
  box-shadow:inset 0 -2px 0 #16a34a;
}

.ca-secondary-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.ca-secondary-btn{
  height:40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid #dce3ed;
  border-radius:8px;
  background:#fff;
  color:#273650;
  font-size:12px;
  font-weight:700;
}

.ca-secondary-btn svg{
  width:16px;
  height:16px;
}

.ca-secondary-btn:hover,
.ca-secondary-btn.active{
  color:#0b5ed7;
  border-color:#a9c4f5;
  background:#f5f8ff;
}

.quiz-menu-wrap{
  position:relative;
}

.quiz-menu{
  display:none;
  position:absolute;
  right:0;
  top:47px;
  width:185px;
  padding:7px;
  z-index:40;
  border:1px solid #e0e6ef;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 36px rgba(15,23,42,.14);
}

.quiz-menu-wrap.open .quiz-menu{
  display:block;
}

.quiz-menu button{
  width:100%;
  min-height:39px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:650;
  text-align:left;
}

.quiz-menu button:hover,
.quiz-menu button.active{
  color:#0b5ed7;
  background:#f2f6ff;
}

.quiz-menu svg{
  width:15px;
  height:15px;
}

/* Reader top controls */
.continuous-reader{
  padding-top:16px;
}

.reader-period-control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.reader-period-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.reader-period-copy>span{
  font-size:13px;
  font-weight:750;
  color:#0f1e3d;
}

.reader-period-copy small{
  font-size:11px;
  color:#7b879c;
}

.period-selector-wrap{
  position:relative;
}

.period-selector{
  min-width:190px;
  height:42px;
  border:1px solid #dce3ed;
  border-radius:8px;
  background:#fff;
  color:#14213d;
}

.selector-menu{
  z-index:50;
}

.category-strip-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-top:1px solid #eef1f5;
  border-bottom:1px solid #e8edf3;
}

.category-strip{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}

.category-strip::-webkit-scrollbar{
  display:none;
}

.category-pill{
  flex:0 0 auto;
  height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:8px;
  background:#fff;
  color:#344054;
  font-size:11px;
  font-weight:700;
}

.category-pill svg{
  width:14px;
  height:14px;
}

.category-pill:hover{
  background:#f6f8fb;
}

.category-pill.active{
  color:#087b39;
  border-color:#8bd0a8;
  background:#eff9f2;
}

.bookmarks-filter{
  flex:0 0 auto;
  height:36px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border:1px solid #dce3ed;
  border-radius:8px;
  background:#fff;
  color:#24334f;
  font-size:11.5px;
  font-weight:700;
}

.bookmarks-filter svg{
  width:15px;
  height:15px;
}

.bookmarks-filter.active{
  color:#0b5ed7;
  border-color:#abc5f6;
  background:#f3f7ff;
}

.reader-summary-row{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  color:#64748b;
  font-size:11.5px;
  border-bottom:1px solid #edf1f5;
}

.reader-summary-row strong,
.reader-summary-row b{
  color:#14213d;
}

/* Continuous news */
.continuous-news-list{
  background:#fff;
}

.continuous-news-item{
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 280px 34px;
  gap:16px;
  padding:25px 8px;
  border-bottom:1px solid #e8edf3;
}

.continuous-news-item:last-child{
  border-bottom:0;
}

.news-number{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-size:14px;
  font-weight:800;
}

.news-main{
  min-width:0;
}

.news-category{
  width:max-content;
  max-width:100%;
  min-height:26px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 9px;
  margin-bottom:9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:750;
}

.news-category svg{
  width:13px;
  height:13px;
}

.news-main h2{
  margin:0 0 10px;
  color:#101b35;
  font-size:17px;
  line-height:1.4;
  letter-spacing:-.2px;
}

.news-copy{
  max-width:720px;
  color:#263553;
  font-size:12.7px;
  line-height:1.72;
}

.news-copy p{
  margin:0 0 9px;
}

.news-copy p:last-child{
  margin-bottom:0;
}

.exam-points{
  align-self:center;
  padding:16px 17px;
  border:1px solid;
  border-radius:10px;
}

.exam-points h3{
  margin:0 0 11px;
  font-size:11.5px;
}

.exam-points ul{
  margin:0;
  padding-left:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.exam-points li{
  color:#273650;
  font-size:10.8px;
  line-height:1.5;
}

.news-bookmark{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#53627a;
  border-radius:7px;
}

.news-bookmark svg{
  width:19px;
  height:19px;
}

.news-bookmark:hover{
  background:#f4f7fb;
  color:#0b5ed7;
}

.news-bookmark.saved{
  color:#0b5ed7;
  background:#eef4ff;
}

.news-bookmark.saved svg{
  fill:currentColor;
}

.cat-green{
  color:#087a3b;
  background:#edf9f1;
  border-color:#ccebd7;
}

.cat-purple{
  color:#6d28d9;
  background:#f4efff;
  border-color:#e5d8ff;
}

.cat-blue{
  color:#0b5ed7;
  background:#eef5ff;
  border-color:#d8e7ff;
}

.cat-orange{
  color:#dc5b16;
  background:#fff2e9;
  border-color:#ffe0cc;
}

.cat-amber{
  color:#a66a00;
  background:#fff8e7;
  border-color:#f7e4b5;
}

.cat-teal{
  color:#087c66;
  background:#eaf8f4;
  border-color:#cceae2;
}

.reader-end{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px auto 4px;
  padding:10px 16px;
  border:1px solid #dce9df;
  border-radius:9px;
  background:#f4faf5;
  color:#16713a;
}

.reader-end svg{
  width:18px;
  height:18px;
}

.reader-end div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.reader-end strong{
  font-size:11.5px;
}

.reader-end span{
  color:#64748b;
  font-size:10.5px;
}

.continuous-empty{
  padding:60px 20px;
  text-align:center;
  color:#64748b;
}

.continuous-empty svg{
  width:34px;
  height:34px;
  margin-bottom:8px;
}

.continuous-empty h3{
  margin:0 0 5px;
  color:#1e293b;
}

/* Keep quiz + magazine functions visually consistent */
.view-title,
.quiz-landing,
.quiz-instructions,
.live-quiz,
.result-card,
.solutions-card,
.magazine-table{
  margin-top:18px;
}

/* Responsive */
@media(max-width:1180px){
  .content{max-width:100%}
  .continuous-news-item{
    grid-template-columns:38px minmax(0,1fr) 240px 32px;
  }
}

@media(max-width:980px){
  .ca-navigation{
    align-items:flex-start;
    flex-direction:column;
  }

  .ca-secondary-actions{
    width:100%;
  }

  .continuous-news-item{
    grid-template-columns:38px minmax(0,1fr) 32px;
  }

  .exam-points{
    grid-column:2/4;
    width:100%;
    margin-top:3px;
  }

  .news-bookmark{
    grid-column:3;
    grid-row:1;
  }
}

@media(max-width:700px){
  .content{
    padding:90px 12px 24px;
  }

  .ca-reading-tabs{
    width:100%;
    grid-template-columns:repeat(3,1fr);
  }

  .ca-secondary-actions{
    flex-wrap:wrap;
  }

  .reader-period-control{
    align-items:stretch;
    flex-direction:column;
  }

  .period-selector{
    width:100%;
  }

  .category-strip-wrap{
    align-items:stretch;
    flex-direction:column;
  }

  .bookmarks-filter{
    width:max-content;
  }

  .continuous-news-item{
    grid-template-columns:34px minmax(0,1fr) 30px;
    gap:10px;
    padding:20px 2px;
  }

  .news-number{
    width:30px;
    height:30px;
    font-size:12px;
  }

  .news-main h2{
    font-size:15px;
  }

  .news-copy{
    font-size:12px;
  }

  .exam-points{
    grid-column:2/4;
  }
}

/* =========================================================
   PROFESSIONAL QUIZ LANDING + WORKING PERIOD DROPDOWNS
   ========================================================= */

.quiz-page-shell{
  padding-top:4px;
}

.quiz-toolbar{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 0 16px;
  border-bottom:1px solid #e7ebf1;
}

.quiz-toolbar-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.quiz-toolbar-copy>span{
  color:#101828;
  font-size:13px;
  font-weight:750;
}

.quiz-toolbar-copy small{
  color:#7a8699;
  font-size:10.5px;
}

.quiz-period-wrap{
  position:relative;
  z-index:25;
}

.quiz-period-trigger{
  min-width:205px;
  height:42px;
  display:grid;
  grid-template-columns:18px 1fr 15px;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid #d9e1ec;
  border-radius:9px;
  background:#fff;
  color:#12203e;
  font-size:12px;
  font-weight:700;
  text-align:left;
  box-shadow:0 1px 2px rgba(16,24,40,.02);
}

.quiz-period-trigger:hover,
.quiz-period-wrap.open .quiz-period-trigger{
  border-color:#a9c4f5;
  box-shadow:0 0 0 3px rgba(23,105,255,.06);
}

.quiz-period-trigger svg{
  width:16px;
  height:16px;
  color:#1769ff;
}

.quiz-period-menu{
  display:none;
  position:absolute;
  top:48px;
  right:0;
  width:250px;
  padding:7px;
  border:1px solid #e0e6ef;
  border-radius:10px;
  background:#fff;
  box-shadow:0 16px 38px rgba(15,23,42,.14);
}

.quiz-period-wrap.open .quiz-period-menu{
  display:block;
}

.quiz-period-menu button{
  width:100%;
  min-height:40px;
  display:grid;
  grid-template-columns:17px 1fr 15px;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:#fff;
  color:#344054;
  font-size:11.5px;
  font-weight:600;
  text-align:left;
}

.quiz-period-menu button:hover{
  background:#f5f8fd;
}

.quiz-period-menu button.selected{
  color:#0d57de;
  background:#edf4ff;
  font-weight:700;
}

.quiz-period-menu svg{
  width:14px;
  height:14px;
}

.quiz-page-heading{
  display:flex;
  align-items:center;
  gap:13px;
  margin:20px 0 16px;
}

.quiz-heading-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  flex:0 0 48px;
  border-radius:13px;
}

.quiz-heading-icon.green{background:#e9f8ef;color:#0b9348}
.quiz-heading-icon.purple{background:#f2ebff;color:#6d28d9}
.quiz-heading-icon.orange{background:#fff1e7;color:#ea641b}

.quiz-heading-icon svg{
  width:23px;
  height:23px;
}

.quiz-page-heading h2{
  margin:0 0 4px;
  color:#071b52;
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.35px;
}

.quiz-page-heading p{
  margin:0;
  color:#667085;
  font-size:12.5px;
}

.quiz-overview-card{
  overflow:hidden;
  border:1px solid #e1e7f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(16,24,40,.035);
}

.quiz-overview-main{
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:16px;
  padding:20px 22px;
  border-radius:11px;
}

.quiz-overview-main.green{background:linear-gradient(105deg,#eefaf2,#f8fcf9)}
.quiz-overview-main.purple{background:linear-gradient(105deg,#f5f0ff,#fbf9ff)}
.quiz-overview-main.orange{background:linear-gradient(105deg,#fff3ec,#fffaf7)}

.quiz-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  margin-bottom:7px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  color:#344054;
  font-size:10px;
  font-weight:750;
}

.quiz-overview-copy h3{
  margin:0 0 5px;
  color:#071b52;
  font-size:20px;
  letter-spacing:-.2px;
}

.quiz-overview-copy p{
  margin:0;
  color:#667085;
  font-size:11.5px;
}

.quiz-overview-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  color:#50608f;
}

.quiz-overview-icon svg{
  width:29px;
  height:29px;
}

.quiz-stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr) 175px;
  align-items:stretch;
  border-top:1px solid #e7ebf1;
}

.quiz-stat-pro{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:16px;
  border-right:1px solid #e7ebf1;
}

.quiz-stat-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
}

.quiz-stat-icon svg{
  width:17px;
  height:17px;
}

.quiz-stat-icon.blue{background:#edf4ff;color:#1769ff}
.quiz-stat-icon.purple{background:#f4efff;color:#7c3aed}
.quiz-stat-icon.orange{background:#fff2e9;color:#f97316}

.quiz-stat-pro div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.quiz-stat-pro strong{
  color:#071b52;
  font-size:18px;
  line-height:1;
}

.quiz-stat-pro span{
  color:#667085;
  font-size:10.5px;
}

.quiz-start-pro{
  align-self:center;
  justify-self:center;
  min-width:140px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:8px;
  color:#fff;
  font-size:12px;
  font-weight:750;
  box-shadow:0 7px 18px rgba(0,0,0,.08);
}

.quiz-start-pro.green{background:#0b9348}
.quiz-start-pro.purple{background:#6d28d9}
.quiz-start-pro.orange{background:#e96720}

.quiz-start-pro:hover{
  transform:translateY(-1px);
  filter:brightness(.97);
}

/* Professional category selector */
.quiz-category-panel{
  margin-top:18px;
  padding:19px 20px 20px;
  border:1px solid #e1e7f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 15px rgba(16,24,40,.03);
}

.quiz-category-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:15px;
}

.quiz-category-heading h3{
  margin:0 0 4px;
  color:#101828;
  font-size:15px;
}

.quiz-category-heading p{
  margin:0;
  color:#667085;
  font-size:11px;
}

.quiz-selected-category{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  background:#edf4ff;
  color:#0d57de;
  font-size:10px;
  font-weight:700;
}

.quiz-category-grid{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px 10px;
}

.quiz-category-btn{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid #cad8ed;
  border-radius:8px;
  background:#fff;
  color:#1254cf;
  font-size:11px;
  font-weight:650;
  transition:.16s ease;
}

.quiz-category-btn svg{
  width:15px;
  height:15px;
}

.quiz-category-btn:hover{
  border-color:#8fb4f4;
  background:#f7faff;
}

.quiz-category-btn.active{
  border-color:#1769ff;
  background:#1769ff;
  color:#fff;
  box-shadow:0 5px 14px rgba(23,105,255,.16);
}

/* Improve quiz instructions to match landing */
.quiz-instructions{
  margin-top:18px;
  border-radius:14px;
  box-shadow:0 5px 18px rgba(16,24,40,.035);
}

@media(max-width:980px){
  .quiz-stat-row{
    grid-template-columns:repeat(3,1fr);
  }

  .quiz-start-pro{
    grid-column:1/-1;
    margin:14px auto;
  }
}

@media(max-width:700px){
  .quiz-toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  .quiz-period-trigger{
    width:100%;
  }

  .quiz-period-menu{
    left:0;
    right:auto;
    width:100%;
  }

  .quiz-page-heading h2{
    font-size:22px;
  }

  .quiz-overview-main{
    min-height:auto;
  }

  .quiz-stat-row{
    grid-template-columns:1fr;
  }

  .quiz-stat-pro{
    min-height:70px;
    justify-content:flex-start;
    border-right:0;
    border-bottom:1px solid #e7ebf1;
  }

  .quiz-category-panel{
    padding:16px 13px;
  }

  .quiz-category-heading{
    flex-direction:column;
  }

  .quiz-category-btn{
    min-height:36px;
    padding:0 10px;
  }
}


/* =========================================================
   CHOOSE CATEGORY — CURRENT AFFAIRS READING ONLY
   ========================================================= */

/* The category selector belongs to Daily/Weekly/Monthly reading, not Quiz. */
.quiz-category-panel{
  display:none !important;
}

.reading-category-panel{
  margin:14px 0 0;
  padding:16px 17px 17px;
  border:1px solid #e1e7f0;
  border-radius:12px;
  background:#fff;
  box-shadow:0 3px 12px rgba(16,24,40,.025);
}

.reading-category-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:13px;
}

.reading-category-heading h3{
  margin:0 0 4px;
  color:#101828;
  font-size:14px;
  font-weight:750;
}

.reading-category-heading p{
  margin:0;
  color:#667085;
  font-size:10.8px;
  line-height:1.45;
}

.reading-category-panel .category-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 9px;
  overflow:visible;
}

.reading-category-panel .category-pill{
  min-height:36px;
  height:auto;
  padding:0 12px;
  border:1px solid #cdd9eb;
  border-radius:8px;
  background:#fff;
  color:#1254cf;
  font-size:10.8px;
  font-weight:650;
}

.reading-category-panel .category-pill svg{
  width:15px;
  height:15px;
}

.reading-category-panel .category-pill:hover{
  border-color:#8fb4f4;
  background:#f7faff;
}

.reading-category-panel .category-pill.active{
  border-color:#1769ff;
  background:#1769ff;
  color:#fff;
  box-shadow:0 5px 14px rgba(23,105,255,.14);
}

.reading-category-panel .bookmarks-filter{
  min-height:34px;
  height:34px;
  border-radius:8px;
  font-size:10.8px;
}

@media(max-width:700px){
  .reading-category-panel{
    padding:14px 12px;
  }

  .reading-category-heading{
    flex-direction:column;
  }

  .reading-category-panel .category-strip{
    gap:7px;
  }

  .reading-category-panel .category-pill{
    min-height:34px;
    padding:0 9px;
    font-size:10px;
  }
}

/* =========================================================
   FINAL CATEGORY STYLE — COMPACT INLINE FILTERS
   Matches the approved clean style: only All has a green pill;
   other categories use icon + text without boxed buttons.
   ========================================================= */

.reading-category-panel{
  margin:12px 0 0;
  padding:10px 0 12px;
  border:0;
  border-top:1px solid #eef1f5;
  border-bottom:1px solid #e7ebf1;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.reading-category-heading{
  margin:0 0 8px;
  align-items:center;
}

.reading-category-heading h3,
.reading-category-heading p{
  display:none;
}

.reading-category-panel .category-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 18px;
  overflow:visible;
}

.reading-category-panel .category-pill{
  min-height:32px;
  height:32px;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#12203d;
  box-shadow:none;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}

.reading-category-panel .category-pill svg{
  width:14px;
  height:14px;
  color:#273650;
  stroke-width:1.9;
}

.reading-category-panel .category-pill:hover{
  border:0;
  background:#f6f8fb;
  color:#0b52d8;
}

.reading-category-panel .category-pill:hover svg{
  color:#0b52d8;
}

.reading-category-panel .category-pill.active{
  min-width:38px;
  padding:0 11px;
  border:1px solid #78d09c;
  border-radius:8px;
  background:#effaf3;
  color:#087a38;
  box-shadow:none;
}

.reading-category-panel .category-pill.active svg{
  color:#087a38;
}

.reading-category-panel .bookmarks-filter{
  min-height:32px;
  height:32px;
  margin-left:auto;
  border:1px solid #dce3ed;
  border-radius:7px;
  background:#fff;
  font-size:10.5px;
}

@media(max-width:700px){
  .reading-category-panel{
    padding:9px 0 11px;
  }

  .reading-category-heading{
    margin-bottom:6px;
  }

  .reading-category-panel .category-strip{
    gap:6px 13px;
  }

  .reading-category-panel .category-pill{
    min-height:30px;
    height:30px;
    font-size:10px;
  }

  .reading-category-panel .category-pill.active{
    padding:0 9px;
  }
}

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:0;
  border-radius:12px;
  background:#0b52d8;
  color:#fff;
  box-shadow:0 12px 28px rgba(11,82,216,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease;
  z-index:120;
  font-size:10px;
  font-weight:700;
}

.back-to-top svg{
  width:16px;
  height:16px;
}

.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top:hover{
  background:#0848be;
}

@media(max-width:700px){
  .back-to-top{
    right:14px;
    bottom:14px;
    width:42px;
    height:42px;
    border-radius:11px;
  }

  .back-to-top span{
    display:none;
  }
}

/* =========================================================
   PROFESSIONAL QUIZ INSTRUCTIONS
   ========================================================= */

.quiz-instructions-page{
  padding-top:4px;
}

.quiz-instructions-top{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.quiz-back-btn{
  height:36px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid #dce3ed;
  border-radius:8px;
  background:#fff;
  color:#344054;
  font-size:11.5px;
  font-weight:650;
}

.quiz-back-btn:hover{
  color:#0b52d8;
  border-color:#a9c3f2;
  background:#f8fbff;
}

.quiz-back-btn svg{
  width:15px;
  height:15px;
}

.quiz-instructions-period{
  height:36px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid #dce3ed;
  border-radius:8px;
  background:#fff;
  color:#253553;
  font-size:11.5px;
  font-weight:700;
}

.quiz-instructions-period svg{
  width:15px;
  height:15px;
  color:#1769ff;
}

.quiz-instructions-hero{
  min-height:120px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 24px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
  position:relative;
}

.quiz-instructions-hero.green{
  background:linear-gradient(105deg,#eefaf2,#fbfefc);
}

.quiz-instructions-hero.purple{
  background:linear-gradient(105deg,#f5f0ff,#fcfaff);
}

.quiz-instructions-hero.orange{
  background:linear-gradient(105deg,#fff3ec,#fffaf7);
}

.quiz-instructions-hero-icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.88);
  color:#52628c;
  box-shadow:0 5px 15px rgba(16,24,40,.055);
}

.quiz-instructions-hero-icon svg{
  width:30px;
  height:30px;
}

.quiz-instructions-kicker{
  display:block;
  margin-bottom:5px;
  color:#667085;
  font-size:10px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.quiz-instructions-hero h2{
  margin:0 0 5px;
  color:#071b52;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.35px;
}

.quiz-instructions-hero p{
  margin:0;
  color:#667085;
  font-size:12.5px;
}

.quiz-instructions-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:14px 0;
  overflow:hidden;
  border:1px solid #e2e7ef;
  border-radius:12px;
  background:#fff;
}

.instruction-summary-item{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:14px;
  border-right:1px solid #e7ebf1;
}

.instruction-summary-item:last-child{
  border-right:0;
}

.instruction-summary-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
}

.instruction-summary-icon svg{
  width:17px;
  height:17px;
}

.instruction-summary-icon.blue{
  color:#1769ff;
  background:#edf4ff;
}

.instruction-summary-icon.purple{
  color:#7c3aed;
  background:#f3efff;
}

.instruction-summary-icon.orange{
  color:#ea641b;
  background:#fff1e7;
}

.instruction-summary-item>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.instruction-summary-item strong{
  color:#071b52;
  font-size:17px;
  line-height:1;
}

.instruction-summary-item span{
  color:#667085;
  font-size:10.5px;
}

.quiz-instructions-card{
  padding:22px;
  border:1px solid #e1e7f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(16,24,40,.035);
}

.quiz-instructions-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:17px;
  margin-bottom:17px;
  border-bottom:1px solid #edf0f4;
}

.quiz-instructions-card-head h3{
  margin:0 0 4px;
  color:#101828;
  font-size:16px;
}

.quiz-instructions-card-head p{
  margin:0;
  color:#667085;
  font-size:11.5px;
}

.instruction-status{
  min-height:29px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border-radius:999px;
  background:#edf9f1;
  color:#087a3b;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.instruction-status svg{
  width:14px;
  height:14px;
}

.instruction-rules-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
}

.instruction-rule{
  min-height:92px;
  display:grid;
  grid-template-columns:40px 1fr;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid #e6eaf0;
  border-radius:10px;
  background:#fbfcfe;
}

.instruction-rule>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#eef4ff;
  color:#1769ff;
}

.instruction-rule>span svg{
  width:17px;
  height:17px;
}

.instruction-rule strong{
  display:block;
  margin:1px 0 4px;
  color:#14213d;
  font-size:12px;
}

.instruction-rule p{
  margin:0;
  color:#667085;
  font-size:10.8px;
  line-height:1.55;
}

.instruction-note{
  min-height:45px;
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  padding:0 13px;
  border:1px solid #dce8f9;
  border-radius:9px;
  background:#f7faff;
  color:#41506d;
  font-size:10.8px;
}

.instruction-note svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:#1769ff;
}

.quiz-instructions-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:18px;
  margin-top:18px;
  border-top:1px solid #edf0f4;
}

.quiz-cancel-btn,
.quiz-begin-btn{
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 16px;
  border-radius:8px;
  font-size:11.5px;
  font-weight:750;
}

.quiz-cancel-btn{
  border:1px solid #dce3ed;
  background:#fff;
  color:#344054;
}

.quiz-cancel-btn:hover{
  color:#0b52d8;
  border-color:#a9c3f2;
  background:#f8fbff;
}

.quiz-begin-btn{
  min-width:145px;
  border:0;
  color:#fff;
}

.quiz-begin-btn.green{background:#0b9348}
.quiz-begin-btn.purple{background:#6d28d9}
.quiz-begin-btn.orange{background:#e96720}

.quiz-begin-btn:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
}

.quiz-cancel-btn svg,
.quiz-begin-btn svg{
  width:15px;
  height:15px;
}

@media(max-width:760px){
  .quiz-instructions-summary{
    grid-template-columns:1fr;
  }

  .instruction-summary-item{
    justify-content:flex-start;
    border-right:0;
    border-bottom:1px solid #e7ebf1;
  }

  .instruction-summary-item:last-child{
    border-bottom:0;
  }

  .instruction-rules-grid{
    grid-template-columns:1fr;
  }

  .quiz-instructions-card-head{
    flex-direction:column;
  }

  .quiz-instructions-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .quiz-cancel-btn,
  .quiz-begin-btn{
    width:100%;
  }
}

@media(max-width:520px){
  .quiz-instructions-hero{
    align-items:flex-start;
    padding:18px;
  }

  .quiz-instructions-hero-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .quiz-instructions-hero h2{
    font-size:21px;
  }

  .quiz-instructions-card{
    padding:16px 13px;
  }
}