:root{--v4-navy:#081e3d;--v4-blue:#0964c7;--v4-gold:#ffc928;--v4-line:#dce6f4;--v4-muted:#65758d}
body.v274-roadmap-page{background:#f5f8fe;color:#10254a}
body.v274-roadmap-page .public-header{background:#fff;border-bottom:1px solid var(--v4-line)}
body.v274-roadmap-page .public-main.v274-main{max-width:1380px;margin:0 auto;padding:28px 32px 65px}
.v274-breadcrumb{font-size:12px;color:#73839c;margin:0 0 16px}.v274-breadcrumb a{color:#0964c7;font-weight:750;text-decoration:none}
.v274-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.v274-kicker{font-size:11px;letter-spacing:1.1px;color:#cc7010;font-weight:900}
.v274-heading h1{font-size:clamp(27px,3vw,37px);font-weight:900;letter-spacing:-1.2px;color:var(--v4-navy);margin:5px 0}
.v274-heading h1 span{color:#3468a5}.v274-heading p{margin:0;color:var(--v4-muted);font-size:13px}
.v274-levels{display:flex;gap:6px;background:#eaf0f8;border-radius:12px;padding:5px}
.v274-levels button{border:0;border-radius:9px;background:transparent;color:#1b385e;font-weight:850;padding:11px 17px;cursor:pointer}
.v274-levels button.active{background:#0b2e5a;color:#fff;box-shadow:0 2px 9px #0b2e5a28}
.v274-summary{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:18px 22px;background:#fff;border:1px solid var(--v4-line);border-radius:15px;margin-bottom:20px}
.v274-summary strong{font-size:15px}.v274-summary p{font-size:12px;color:var(--v4-muted);margin:5px 0 0;max-width:730px}
.v274-primary,.v274-secondary{display:inline-flex;justify-content:center;align-items:center;text-align:center;border-radius:9px;padding:11px 14px;text-decoration:none;font-size:12px;font-weight:850}
.v274-primary{background:var(--v4-blue);color:white}.v274-secondary{background:#f3f7fe;color:#0d427f;border:1px solid #d1e0f1}
.v274-columns{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.9fr);gap:20px;align-items:start}
.v274-list-panel{min-width:0}.v274-section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.v274-section-title h2{font-size:19px;margin:0;color:#0a254a}.v274-section-title span{font-size:12px;color:var(--v4-muted)}
#v274-topics{display:grid;gap:11px}
.v274-topic{width:100%;display:flex;align-items:center;text-align:left;gap:15px;padding:12px;border:1px solid var(--v4-line);border-radius:14px;background:white;cursor:pointer;color:#10284d;box-shadow:0 4px 17px #15365d08}
.v274-topic:hover,.v274-topic.selected{background:#f1f7ff;border-color:#70a5e7}
.v274-topic img{width:100px;height:76px;object-fit:cover;border-radius:9px;flex-shrink:0}
.v274-topic-copy{flex:1;min-width:0;display:grid;gap:3px}.v274-topic-copy small{font-size:10px;color:#5b80b1;font-weight:850;letter-spacing:.7px}
.v274-topic-copy strong{font-size:14px;font-weight:850}.v274-topic-copy em{font-size:11px;color:#8492a7;font-style:normal}
.v274-topic-arrow{font-size:25px;color:#3675bf;margin-right:5px}
.v274-aside{display:grid;gap:17px;position:sticky;top:20px}
.v274-aside-card{background:white;border:1px solid var(--v4-line);border-radius:15px;padding:20px}
.v274-aside-card>img{width:100%;height:190px;object-fit:cover;border-radius:11px;margin-bottom:14px}
.v274-aside-card h2{font-size:22px;line-height:1.25;margin:6px 0;color:#0b284e}.v274-aside-card h3{font-size:17px;margin:0 0 12px}
.v274-aside-card p{font-size:13px;color:var(--v4-muted);line-height:1.6}
.v274-selected{padding:14px;background:#f2f7ff;border-left:3px solid #1266c3;border-radius:9px;font-size:15px;font-weight:850;margin:14px 0}
#v274-actions{display:grid;gap:8px}.v274-resource-links{display:grid;gap:10px}
.v274-resource-links a{display:block;background:#f4f8fe;border:1px solid #e3ebf6;border-radius:9px;padding:11px;font-size:12px;color:#1c487d;text-decoration:none;font-weight:800}
body .public-footer .legal-links-v21{display:flex;flex-wrap:wrap;gap:13px}
body .public-footer>div:not(.public-brand){display:flex;flex-wrap:wrap;gap:14px}
/* V27 color and card consistency on existing live pages, without replacing working JS */
body .public-main .public-intro,body .exam-center .public-intro{background:linear-gradient(100deg,#fff,#eff5ff);border:1px solid #dce6f4;border-radius:17px;padding:25px 29px;margin-bottom:20px}
body .public-main .public-intro h1,body .library-hero h1{color:#0a2347;letter-spacing:-.8px}
body .public-main .public-intro>span{color:#bf6a0e}
body .public-main .level-tabs button.active,body .public-main .tabs button.active{background:#0c3262;color:#fff}
body .public-main .topic-list,body .public-main .lesson-preview,body .public-main .exam-tree article,body .public-main .grammar-detail-mount{border-color:#dce6f4;border-radius:14px}
body .public-main .exam-levels a,body .public-main .lesson-page-nav a.all-topics{background:#0d5ebc;color:#fff}
body .library-main .library-hero{background:linear-gradient(110deg,#fff,#edf5ff);border:1px solid #dce6f4;border-radius:16px}
body .library-main .library-search button{background:#0a60c4;color:#fff}
@media(max-width:1050px){.v274-columns{grid-template-columns:1fr}.v274-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.v274-aside-card>img{height:140px}}
@media(max-width:760px){body.v274-roadmap-page .public-main.v274-main{padding:20px 14px}.v274-heading,.v274-summary{flex-direction:column;align-items:flex-start}.v274-levels{width:100%;justify-content:space-between}.v274-levels button{flex:1}.v274-aside{grid-template-columns:1fr}.v274-topic img{width:72px;height:68px}.v274-topic-copy strong{font-size:12px}}