:root{--primary:#1E4D8C;--primary-pale:#EBF1FA;--accent:#2A9D8F;--accent-pale:#E8F7F6;--gold:#E09B2D;--gold-pale:#FDF3E0;--coral:#E05C3A;--coral-pale:#FDEEE9;--purple:#5B4FCF;--purple-pale:#EEEDFE;--white:#fff;--bg:#F7F9FC;--bg2:#EDF1F7;--text:#1A2332;--text-mid:#3D5166;--text-light:#7A8FA6;--border:rgba(30,77,140,0.1);--border-mid:rgba(30,77,140,0.18);--shadow-sm:0 2px 8px rgba(30,77,140,0.07);--shadow-md:0 6px 24px rgba(30,77,140,0.1);--r:12px;--rl:18px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:var(--bg2);}::-webkit-scrollbar-thumb{background:#2E6DB4;border-radius:3px;}

nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);box-shadow:0 1px 12px rgba(30,77,140,0.06);padding:0 2.5%;display:flex;align-items:center;justify-content:space-between;height:58px;gap:1rem;}
.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:'DM Serif Display',serif;font-size:0.95rem;color:var(--primary);flex-shrink:0;}
.logo-mark{width:28px;height:28px;background:var(--primary);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#fff;font-family:'DM Sans',sans-serif;}
.nav-pills{display:flex;gap:0.25rem;align-items:center;overflow-x:auto;padding:0 0.25rem;scrollbar-width:none;flex:1;min-width:0;}
.nav-pills::-webkit-scrollbar{display:none;}
.npill{padding:0.25rem 0.6rem;border-radius:999px;font-size:0.7rem;font-weight:500;text-decoration:none;color:var(--text-mid);white-space:nowrap;transition:all 0.18s;border:1px solid transparent;}
.npill:hover{background:var(--primary-pale);color:var(--primary);}
.npill.cur{background:var(--primary);color:#fff;}
.btn-home{padding:0.32rem 0.8rem;border-radius:8px;border:1.5px solid var(--border-mid);background:none;color:var(--primary);font-weight:500;font-size:0.75rem;text-decoration:none;white-space:nowrap;}
.btn-home:hover{background:var(--primary-pale);}
.prog-bar{position:fixed;top:58px;left:0;right:0;height:3px;background:var(--border);z-index:199;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));width:0%;transition:width 0.15s;}

.hero{padding:82px 3% 44px;text-align:center;position:relative;overflow:hidden;}
.hero h1{font-family:'DM Serif Display',serif;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;margin-bottom:0.65rem;}
.hero p{font-size:0.9rem;max-width:520px;margin:0 auto 1.4rem;color:var(--text-mid);line-height:1.75;}
.hero-badges{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem;}
.hb-item{text-align:center;}
.hb-num{font-family:'DM Serif Display',serif;font-size:1.5rem;line-height:1;}
.hb-lbl{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.07em;margin-top:2px;}
.search-wrap{max-width:480px;margin:0 auto;position:relative;}
.search-bar{width:100%;padding:0.65rem 1rem 0.65rem 2.5rem;border-radius:10px;border:1.5px solid var(--border-mid);font-family:'DM Sans',sans-serif;font-size:0.9rem;color:var(--text);outline:none;background:var(--white);transition:border-color 0.2s;}
.search-bar:focus{border-color:var(--primary);}
.si{position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:0.8rem;pointer-events:none;}
.sc{position:absolute;right:0.8rem;top:50%;transform:translateY(-50%);font-size:0.7rem;color:var(--text-light);font-family:'Fira Code',monospace;}

.main-wrap{max-width:1200px;margin:0 auto;padding:1.75rem 2.5%;display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.5rem;align-items:start;}

/* SIDEBAR */
.sidebar{position:sticky;top:72px;}
.sb-h{font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-light);margin-bottom:0.5rem;}
.sec-list{display:flex;flex-direction:column;gap:0.2rem;margin-bottom:1.1rem;}
.sl-link{display:flex;align-items:center;gap:0.5rem;padding:0.45rem 0.7rem;border-radius:8px;text-decoration:none;color:var(--text-mid);font-size:0.78rem;font-weight:500;transition:all 0.18s;border:1px solid transparent;}
.sl-link:hover{background:var(--white);border-color:var(--border);color:var(--primary);}
.sl-link.cur{background:var(--primary);color:#fff;border-color:var(--primary);}
.sl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sl-cnt{margin-left:auto;font-size:0.66rem;padding:1px 5px;border-radius:3px;}
.sl-link.cur .sl-cnt{background:rgba(255,255,255,0.2);color:#fff;}
.sl-link:not(.cur) .sl-cnt{background:var(--bg2);color:var(--text-light);}
.diff-btns{display:flex;flex-direction:column;gap:0.2rem;margin-bottom:1rem;}
.db-btn{display:flex;align-items:center;gap:0.5rem;padding:0.42rem 0.7rem;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--text-mid);font-size:0.78rem;font-weight:500;transition:all 0.18s;text-align:left;width:100%;}
.db-btn:hover{background:var(--white);border-color:var(--border);}
.db-btn.on{background:var(--primary);color:#fff;border-color:var(--primary);}
.sb-tip{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:0.75rem;font-size:0.76rem;color:var(--text-mid);line-height:1.6;}
.sb-tip strong{display:block;font-size:0.64rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px;}

/* Q&A CONTENT */
.content-col{min-width:0;width:100%;}

/* PAGINATION */
.page-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding:0.6rem 0.75rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r);font-size:0.82rem;}
.page-info-text{color:var(--text-mid);}
.page-info-text strong{color:var(--text);}
.pg-nav-row{display:flex;gap:0.4rem;align-items:center;flex-wrap:wrap;}
.pg-btn{padding:0.3rem 0.65rem;border-radius:7px;border:1.5px solid var(--border-mid);background:none;color:var(--primary);font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.18s;font-family:'DM Sans',sans-serif;}
.pg-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.pg-btn:disabled{opacity:0.3;cursor:default;}

/* Q&A CARDS */
.qa-list{display:flex;flex-direction:column;gap:0.5rem;width:100%;}
.qa-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color 0.2s,box-shadow 0.2s;}
.qa-card:hover{border-color:var(--border-mid);box-shadow:var(--shadow-sm);}
.qa-card.open{border-color:var(--primary);box-shadow:0 0 0 2px rgba(30,77,140,0.07);}
.qa-trigger{width:100%;padding:0.8rem 1rem;display:flex;flex-direction:row;align-items:flex-start;gap:0.6rem;background:none;border:none;cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;color:var(--text);font-size:0.875rem;font-weight:500;line-height:1.5;min-width:0;}
.q-num{font-family:'Fira Code',monospace;font-size:0.64rem;padding:2px 6px;border-radius:4px;background:var(--primary-pale);color:var(--primary);flex-shrink:0;margin-top:3px;white-space:nowrap;}
.qa-card.open .q-num{background:var(--primary);color:#fff;}
.q-text{flex:1 1 0%;min-width:0;word-break:break-word;overflow-wrap:anywhere;}
.diff{font-size:0.62rem;padding:2px 6px;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0;margin-top:4px;white-space:nowrap;}
.easy{background:#E8F5E9;color:#1B5E20;}
.med{background:#FDF3E0;color:#7B4F00;}
.hard{background:#FDEEE9;color:#8B1A00;}
.qa-chev{flex-shrink:0;color:var(--text-light);transition:transform 0.28s;font-size:0.68rem;margin-top:5px;}
.qa-card.open .qa-chev{transform:rotate(180deg);color:var(--primary);}
.qa-ans{display:none;padding:0.85rem 1rem 0.9rem;font-size:0.855rem;color:var(--text-mid);line-height:1.82;border-top:1px solid var(--border);}
.qa-card.open .qa-ans{display:block;}
.qa-ans strong{color:var(--text);font-weight:600;}
.qa-ans code{font-family:'Fira Code',monospace;font-size:0.77rem;background:var(--bg2);padding:1px 5px;border-radius:4px;color:var(--primary);word-break:break-all;}
.tip{margin-top:0.7rem;padding:0.6rem 0.85rem;background:var(--accent-pale);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;font-size:0.8rem;color:#15574F;line-height:1.65;}
.warn{margin-top:0.7rem;padding:0.6rem 0.85rem;background:var(--gold-pale);border-left:3px solid var(--gold);border-radius:0 6px 6px 0;font-size:0.8rem;color:#7B4F00;line-height:1.65;}
.ex{margin-top:0.7rem;padding:0.6rem 0.85rem;background:var(--purple-pale);border-left:3px solid var(--purple);border-radius:0 6px 6px 0;font-size:0.8rem;color:#3A2F8F;line-height:1.65;}
.tbl{width:100%;border-collapse:collapse;font-size:0.8rem;margin-top:0.5rem;}
.tbl th{background:var(--bg2);padding:4px 7px;border:1px solid var(--border);font-weight:600;text-align:left;}
.tbl td{padding:4px 7px;border:1px solid var(--border);vertical-align:top;}

/* SECTION NAV */
.sec-nav-bar{margin-top:2rem;padding:1.1rem 1.25rem;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.snb-btn{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.9rem;border-radius:9px;border:1.5px solid var(--border-mid);background:none;color:var(--primary);font-weight:600;font-size:0.8rem;text-decoration:none;transition:all 0.2s;white-space:nowrap;}
.snb-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.snb-center{text-align:center;}
.snb-center span{font-size:0.72rem;color:var(--text-light);}
.snb-center strong{display:block;font-size:0.875rem;color:var(--text);margin-top:2px;}

.no-r{text-align:center;padding:2rem;color:var(--text-light);font-size:0.9rem;display:none;}
.back-top{position:fixed;bottom:1.5rem;right:1.5rem;width:36px;height:36px;background:var(--primary);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:0.85rem;box-shadow:var(--shadow-md);display:none;align-items:center;justify-content:center;z-index:100;}
.back-top.vis{display:flex;}
footer{background:#0E1E35;color:rgba(255,255,255,0.4);padding:1.4rem 3%;text-align:center;font-size:0.77rem;margin-top:1.5rem;}
footer a{color:rgba(255,255,255,0.6);text-decoration:none;}

@media(max-width:860px){.main-wrap{grid-template-columns:1fr;}.sidebar{position:static;}.sec-list{flex-direction:row;flex-wrap:wrap;}.sl-link{padding:0.35rem 0.6rem;font-size:0.75rem;}.diff-btns{flex-direction:row;}.nav-pills{display:none;}}
@media(max-width:540px){.main-wrap{padding:1.25rem 3%;}.hero{padding:72px 3% 36px;}.qa-trigger{padding:0.7rem 0.875rem;font-size:0.845rem;}.sec-nav-bar{flex-direction:column;text-align:center;}}