:root{--bg:#f5f7fb;--surface:#fff;--text:#152033;--muted:#5f6b7a;--brand:#175cff;--brand2:#0ea5e9;--dark:#0b1220;--line:#e5eaf2;--soft:#eef5ff;--success:#0f9f6e;--warning:#f59e0b;--radius:18px;--shadow:0 12px 35px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1180px,94%);margin:auto}.topbar{background:var(--dark);color:#dbeafe;font-size:14px}.topbar .container{display:flex;justify-content:space-between;gap:14px;padding:8px 0;flex-wrap:wrap}.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}.logo{display:flex;align-items:center;font-weight:900;font-size:23px;color:var(--dark)}.logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));margin-right:10px;box-shadow:var(--shadow)}.menu{display:flex;gap:8px;flex-wrap:wrap}.menu a{padding:9px 12px;border-radius:999px;color:#344155;font-weight:700;font-size:14px}.menu a:hover{background:var(--soft);color:var(--brand)}.hero{padding:56px 0 32px;background:radial-gradient(circle at top left,#e9f3ff 0,#f7fbff 45%,#fff 100%)}.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:center}.badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:#e8f1ff;color:#1554d1;font-weight:800;font-size:14px}.hero h1{font-size:clamp(34px,5vw,62px);line-height:1.04;margin:18px 0;color:var(--dark);letter-spacing:-1.2px}.hero p{font-size:18px;color:#45556c;max-width:760px}.searchbox{display:flex;gap:10px;margin-top:24px;background:#fff;padding:10px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.searchbox input{border:0;outline:0;flex:1;font-size:16px;padding:12px}.btn{border:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:12px 18px;border-radius:14px;font-weight:900;cursor:pointer;display:inline-block}.hero-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.hero-card h3{margin-top:0}.mini-list{display:grid;gap:10px}.mini-list a{padding:12px;background:#f8fbff;border:1px solid var(--line);border-radius:14px;font-weight:800;color:#26374f}.ad{border:2px dashed #c7d2fe;background:#f8fbff;color:#64748b;text-align:center;border-radius:18px;padding:22px;margin:24px 0;font-weight:800}.layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;padding:34px 0}.sidebar{position:sticky;top:84px;align-self:start}.side-card,.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);margin-bottom:20px}.side-card h3,.panel h2{margin-top:0;color:var(--dark)}.cat-list{display:grid;gap:9px}.cat-list a{padding:11px 12px;background:#f8fafc;border:1px solid var(--line);border-radius:13px;font-weight:800;color:#344155}.cat-list a:hover{background:#e8f1ff;color:var(--brand)}.section-title{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:10px 0 18px}.section-title h2{margin:0;font-size:28px;color:var(--dark)}.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.topic-card,.article-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:.2s}.topic-card:hover,.article-card:hover{transform:translateY(-3px)}.thumb{height:145px;background:#dbeafe}.thumb svg{width:100%;height:100%}.card-body{padding:16px}.card-body h3{margin:0 0 8px;color:var(--dark);font-size:18px;line-height:1.25}.card-body p{margin:0 0 14px;color:var(--muted);font-size:14px}.read{font-weight:900;color:var(--brand)}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.popular-list{display:grid;gap:12px}.popular-row{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}.popular-row .thumb{height:70px;border-radius:14px;overflow:hidden}.faq{display:grid;gap:12px}.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px}.faq summary{font-weight:900;cursor:pointer;color:var(--dark)}.footer{background:#0b1220;color:#cbd5e1;margin-top:30px;padding:42px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}.footer a{color:#e0f2fe;display:block;margin:8px 0}.article-wrap{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow)}.article-wrap h1{font-size:38px;line-height:1.1;color:var(--dark)}.meta{color:var(--muted);font-weight:700}.toc{background:#f8fbff;border:1px solid var(--line);border-radius:18px;padding:18px;margin:20px 0}.steps{counter-reset:step}.step{counter-increment:step;background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0}.step:before{content:counter(step);display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:var(--brand);color:white;font-weight:900;margin-right:8px}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}.table th,.table td{border:1px solid var(--line);padding:12px;text-align:left}.table th{background:#f1f5f9}.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:12px}.mobile-toggle{display:none}
@media(max-width:900px){.hero-grid,.layout{grid-template-columns:1fr}.sidebar{position:static}.topic-grid,.article-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}.menu{display:none}.mobile-toggle{display:block}.searchbox{flex-direction:column}.btn{text-align:center}}
@media(max-width:560px){.topic-grid,.article-grid{grid-template-columns:1fr}.popular-row{grid-template-columns:1fr}.hero{padding-top:32px}.article-wrap h1{font-size:30px}.topbar .container{display:block}.nav{align-items:flex-start}.logo{font-size:20px}}


/* RGB colourful sidebar category cards */
.sidebar .side-card:first-child .cat-list a{
  color:#fff !important;
  border:0 !important;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
  position:relative;
  overflow:hidden;
}
.sidebar .side-card:first-child .cat-list a:hover{
  color:#fff !important;
  transform:translateY(-2px);
  filter:saturate(1.15) brightness(1.03);
}
.sidebar .side-card:first-child .cat-list a:nth-child(1){background:linear-gradient(135deg,rgb(255,70,70),rgb(255,154,60)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(2){background:linear-gradient(135deg,rgb(255,0,128),rgb(126,87,255)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(3){background:linear-gradient(135deg,rgb(0,180,255),rgb(0,220,180)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(4){background:linear-gradient(135deg,rgb(34,197,94),rgb(14,165,233)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(5){background:linear-gradient(135deg,rgb(245,158,11),rgb(239,68,68)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(6){background:linear-gradient(135deg,rgb(99,102,241),rgb(236,72,153)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(7){background:linear-gradient(135deg,rgb(16,185,129),rgb(59,130,246)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(8){background:linear-gradient(135deg,rgb(168,85,247),rgb(14,165,233)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(9){background:linear-gradient(135deg,rgb(244,63,94),rgb(251,191,36)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(10){background:linear-gradient(135deg,rgb(6,182,212),rgb(59,130,246)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(11){background:linear-gradient(135deg,rgb(132,204,22),rgb(20,184,166)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(12){background:linear-gradient(135deg,rgb(249,115,22),rgb(217,70,239)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(13){background:linear-gradient(135deg,rgb(37,99,235),rgb(124,58,237)) !important;}
.sidebar .side-card:first-child .cat-list a:nth-child(14){background:linear-gradient(135deg,rgb(20,184,166),rgb(34,197,94)) !important;}