:root{--bg:#f7f8fb;--card:#fff;--text:#1b1f2a;--muted:#586174;--border:#dce1ea;--accent:#1f5eff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;background:#101827;color:white;padding:22px;overflow:auto}.brand{font-size:1.25rem;font-weight:800;margin-bottom:18px}
.sidebar a{display:block;color:#dbe7ff;text-decoration:none;padding:9px 8px;border-radius:8px;margin:3px 0}.sidebar a:hover{background:#1f2d46}
#search{width:100%;padding:10px;border-radius:8px;border:0;margin-bottom:10px}#searchResults{font-size:.88rem;margin-bottom:12px}#searchResults a{background:#243552;color:white;margin:4px 0;padding:7px}
.content{margin-left:280px;padding:42px;max-width:1100px}.hero{background:linear-gradient(135deg,#fff,#eaf0ff);padding:48px;border:1px solid var(--border);border-radius:18px;margin-bottom:28px}.hero h1{font-size:2.7rem;margin:.2rem 0}.lead,.hero p{color:var(--muted);font-size:1.1rem}
.button{display:inline-block;background:var(--accent);color:white;text-decoration:none;padding:12px 18px;border-radius:10px;font-weight:700;margin-right:10px}.button.secondary{background:#2f3a4d}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.card{display:block;background:var(--card);padding:22px;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--text);box-shadow:0 8px 20px rgba(15,23,42,.04)}.card:hover{border-color:var(--accent)}
h1{font-size:2.2rem;margin-top:0}h2{margin-top:2rem;border-bottom:1px solid var(--border);padding-bottom:.35rem}table{border-collapse:collapse;width:100%;background:white;margin:12px 0 22px;border-radius:12px;overflow:hidden}th,td{border:1px solid var(--border);padding:10px;text-align:left}th{background:#eaf0ff}
pre{background:#111827;color:#f9fafb;padding:18px;border-radius:12px;overflow:auto}.algorithm{background:#fff7e6;border-left:5px solid #f59e0b;padding:16px;border-radius:10px;margin:12px 0 20px}
.flashcard{background:white;border:1px solid var(--border);border-radius:14px;padding:24px;margin:16px 0;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.04)}.flashcard .front{font-weight:800}.flashcard .back{display:none;margin-top:12px;color:#0f5132;background:#e9f7ef;border-left:4px solid #198754;padding:12px;border-radius:8px}.flashcard.show .back{display:block}
footer{margin-top:50px;color:var(--muted);font-size:.9rem}@media(max-width:800px){.sidebar{position:relative;width:100%;height:auto}.content{margin-left:0;padding:24px}.hero h1{font-size:2rem}}@media print{.sidebar{display:none}.content{margin-left:0;padding:0}body{background:white}.card,.hero,table{box-shadow:none}}


.objective-tools{background:white;border:1px solid var(--border);border-radius:14px;padding:16px;margin:16px 0 24px}
#pearlFilter{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;font-size:1rem}
.pearl-card{background:white;border:1px solid var(--border);border-radius:16px;padding:22px;margin:18px 0;box-shadow:0 8px 20px rgba(15,23,42,.04)}
.pearl-card h2{margin-top:0;border-bottom:0;padding-bottom:0}
.trap{background:#fff1f2;border-left:4px solid #e11d48;padding:12px;border-radius:8px}


/* Dynamic Educational Objectives */
.category-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 16px}
.category-tab{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.04)}
.category-tab:hover{border-color:var(--accent)}
.category-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.category-tab span{opacity:.75;margin-left:5px;font-weight:800}.muted-count{color:var(--muted);font-size:1rem;font-weight:600;margin-left:8px}.pearl-card h3{margin-top:0;font-size:1.35rem}.pearl-card p{margin:.72rem 0}.pearl-card strong{color:#111827}

/* =========================================================
   IMG REGISTRY VISUAL SYSTEM — 2026
   Applied to the USMLE Step 3 Study Center
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{
  --img-navy:#0f2745;--img-blue:#175ca8;--img-blue2:#2b7bc5;--img-gold:#d4af37;
  --img-ink:#172033;--img-muted:#667085;--img-line:#dbe5ef;--img-soft:#edf5fd;
  --bg:#f4f8fc;--card:#fff;--text:var(--img-ink);--muted:var(--img-muted);
  --border:var(--img-line);--accent:var(--img-blue)
}
body{font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(135deg,#eef6fd 0%,#fff 46%,#f2f7fb 100%);color:var(--img-ink)}
.sidebar{width:292px;background:linear-gradient(180deg,#0f2745 0%,#102f55 100%);padding:25px 20px;box-shadow:12px 0 34px rgba(15,39,69,.12)}
.brand{font-family:"Cormorant Garamond",serif;font-size:1.55rem;font-weight:700;line-height:1.05;margin:0 0 20px;padding:4px 2px 17px;border-bottom:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:11px}
.brand:before{content:"⚕";font-family:Georgia,serif;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#1769b0;color:#fff;font-size:1.35rem;box-shadow:0 7px 17px rgba(0,0,0,.18);flex:0 0 auto}
.sidebar a{color:#dbe7f5;padding:10px 11px;border-radius:10px;font-size:.9rem;font-weight:600;transition:.18s}
.sidebar a:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateX(2px)}
#search{font-family:Montserrat,sans-serif;padding:11px 12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.96);border-radius:10px;box-shadow:0 5px 14px rgba(0,0,0,.08)}
#searchResults a{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.08)}
.content{margin-left:292px;padding:44px 48px;max-width:1220px}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#edf6ff 62%,#e5f1fc 100%);padding:52px;border:1px solid var(--img-line);border-radius:22px;margin-bottom:30px;box-shadow:0 14px 44px rgba(15,39,69,.09)}
.hero:after{content:"";position:absolute;right:-72px;top:-90px;width:270px;height:270px;border-radius:50%;background:rgba(43,123,197,.08);pointer-events:none}
.hero:before{content:"IMG REGISTRY  •  STEP 3 STUDY CENTER";display:inline-block;position:relative;z-index:1;color:var(--img-blue);font-size:.75rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase;margin-bottom:8px}
.hero h1,h1,h2{font-family:"Cormorant Garamond",Georgia,serif;color:var(--img-navy)}
.hero h1{position:relative;z-index:1;font-size:3.15rem;line-height:1.02;margin:.15rem 0 .65rem}
.hero p{position:relative;z-index:1;max-width:760px;color:var(--img-muted);font-size:1.06rem}
.hero-actions{position:relative;z-index:1;margin-top:22px}
.button{background:linear-gradient(135deg,var(--img-blue),#104578);border-radius:10px;padding:12px 18px;font-size:.9rem;box-shadow:0 7px 16px rgba(23,92,168,.20);transition:.18s}
.button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(23,92,168,.24)}
.button.secondary{background:#fff;color:#435268;border:1px solid #cbd8e5;box-shadow:none}
.grid{gap:18px}.card{position:relative;background:rgba(255,255,255,.97);padding:23px;border:1px solid var(--img-line);border-radius:16px;box-shadow:0 10px 28px rgba(15,39,69,.06);transition:.2s}
.card:hover{border-color:#a9cce9;transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,39,69,.10)}
.card h2{font-size:1.55rem;margin:0 0 7px;border:0;padding:0}.card p{color:var(--img-muted);font-size:.92rem;margin:0}
h1{font-size:2.55rem;line-height:1.08}h2{font-size:1.7rem;border-bottom:1px solid var(--img-line);padding-bottom:.42rem}
table{border-radius:14px;box-shadow:0 8px 24px rgba(15,39,69,.05)}th{background:#edf5fd;color:var(--img-navy)}
.algorithm{background:#fff9e9;border-left-color:var(--img-gold);box-shadow:0 6px 18px rgba(15,39,69,.04)}
.flashcard,.pearl-card,.objective-tools{border-color:var(--img-line);box-shadow:0 10px 28px rgba(15,39,69,.06)}
.category-tab{font-family:Montserrat,sans-serif}.category-tab.active{background:linear-gradient(135deg,var(--img-blue),#104578)}
footer{border-top:1px solid var(--img-line);padding-top:20px}
@media(max-width:800px){.sidebar{width:100%;box-shadow:none}.content{margin-left:0;padding:24px 18px}.hero{padding:30px 24px}.hero h1{font-size:2.35rem}.brand{max-width:380px}}


/* =========================================================
   MOBILE OFF-CANVAS NAVIGATION
   Keeps the Step 3 menu out of document flow on phones/tablets.
   ========================================================= */
.mobile-nav-toggle,.nav-backdrop{display:none}
@media(max-width:800px){
  body{padding-top:64px}
  body.nav-open{overflow:hidden}
  .mobile-nav-toggle{
    display:flex;position:fixed;top:10px;left:12px;z-index:1002;
    align-items:center;gap:9px;min-height:44px;padding:0 14px;
    border:1px solid rgba(15,39,69,.14);border-radius:12px;
    background:#fff;color:var(--img-navy);font:700 .88rem Montserrat,system-ui,sans-serif;
    box-shadow:0 8px 24px rgba(15,39,69,.16);cursor:pointer
  }
  .mobile-nav-toggle .menu-bars{width:19px;height:14px;position:relative;display:inline-block}
  .mobile-nav-toggle .menu-bars:before,.mobile-nav-toggle .menu-bars:after,.mobile-nav-toggle .menu-bars span{
    content:"";position:absolute;left:0;width:19px;height:2px;border-radius:2px;background:currentColor;transition:.2s
  }
  .mobile-nav-toggle .menu-bars:before{top:0}.mobile-nav-toggle .menu-bars span{top:6px}.mobile-nav-toggle .menu-bars:after{top:12px}
  body.nav-open .mobile-nav-toggle .menu-bars:before{top:6px;transform:rotate(45deg)}
  body.nav-open .mobile-nav-toggle .menu-bars span{opacity:0}
  body.nav-open .mobile-nav-toggle .menu-bars:after{top:6px;transform:rotate(-45deg)}
  .sidebar{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:min(86vw,320px)!important;height:100dvh!important;margin:0!important;
    padding:76px 20px 24px!important;overflow-y:auto!important;overscroll-behavior:contain;
    transform:translateX(-105%);transition:transform .24s ease;z-index:1001;
    box-shadow:14px 0 42px rgba(4,20,38,.28)!important
  }
  body.nav-open .sidebar{transform:translateX(0)}
  .sidebar .brand{margin-top:0}
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:1000;background:rgba(8,22,40,.50);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease
  }
  body.nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .content{margin-left:0!important;padding:18px 16px 28px!important;max-width:none}
  .hero{padding:28px 22px;margin-bottom:20px;border-radius:18px}.hero h1{font-size:2.25rem}
}
@media(max-width:430px){
  .mobile-nav-toggle{left:10px;top:9px}
  .sidebar{width:min(90vw,310px)!important}
  .content{padding-left:13px!important;padding-right:13px!important}
  .hero{padding:26px 19px}.hero h1{font-size:2.05rem}
}
@media print{.mobile-nav-toggle,.nav-backdrop{display:none!important}}