*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  :root{
    --navy:#1a3558; --blue:#2E75B6; --amber:#D97706; --bg:#EEF2F7; --white:#fff;
    --ink:#1E293B; --muted:#64748B; --line:#E2E8F0;
    --gold:#C8780C; --quiz:#A21D63; --grid:#0B7A56; --purple:#5B49C7; --teal:#0F6E56;
  }
  html,body{ height:100%; }
  body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--ink);
    display:flex; flex-direction:column; min-height:100dvh; -webkit-font-smoothing:antialiased; }

  .topbar{ flex-shrink:0; height:54px; background:var(--navy); color:#fff; display:flex; align-items:center;
    padding:0 18px; box-shadow:0 2px 8px rgba(0,0,0,.25); position:sticky; top:0; z-index:5; }
  .logo{ font-size:1.1rem; font-weight:800; letter-spacing:-.2px; }
  .logo span{ color:var(--amber); }

  .screen{ flex:1; overflow-y:auto; padding:18px 16px 120px; }
  .screen h2{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; margin:6px 2px 11px; }
  .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
  .tile{ display:flex; flex-direction:column; justify-content:space-between; gap:14px; border-radius:15px; padding:16px 15px; min-height:104px;
    color:#fff; text-decoration:none; box-shadow:0 3px 10px rgba(15,30,55,.14); transition:transform .15s ease, box-shadow .15s ease; }
  .tile:active{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,30,55,.2); }
  .tile b{ font-size:1.02rem; font-weight:800; line-height:1.2; } .tile small{ font-size:.74rem; opacity:.92; font-weight:600; display:block; margin-top:3px; }
  .tile svg{ width:26px; height:26px; }
  .t-gold{ background:var(--gold); } .t-navy{ background:var(--navy); } .t-quiz{ background:var(--quiz); } .t-grid{ background:var(--grid); }

  .savedfab{ position:fixed; right:16px; bottom:92px; z-index:25; background:#fff; border:1px solid #E6EBF2; border-radius:999px;
    box-shadow:0 6px 18px rgba(15,30,55,.22); display:flex; align-items:center; gap:6px; padding:9px 14px; font-size:.82rem; font-weight:800; color:var(--navy); text-decoration:none; }
  .savedfab svg{ width:17px; height:17px; color:var(--amber); }

  .scrim{ position:fixed; inset:0; background:rgba(15,25,45,.30); opacity:0; pointer-events:none; transition:opacity .18s; z-index:18; }
  .scrim.show{ opacity:1; pointer-events:auto; }

  .tabbar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:30; background:#fff; border:1px solid #E6EBF2;
    border-radius:24px; box-shadow:0 8px 26px rgba(15,30,55,.20); display:grid; grid-template-columns:repeat(4,1fr);
    padding:9px 6px calc(9px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto; }
  .tab{ appearance:none; background:none; border:0; cursor:pointer; text-decoration:none; display:flex; flex-direction:column; align-items:center;
    gap:4px; padding:6px 2px; min-height:52px; color:var(--muted); font-size:.7rem; font-weight:800; border-radius:16px; }
  .tab svg{ width:25px; height:25px; }
  .tab:active{ background:#F1F5FA; }
  .tab .lbl{ display:flex; align-items:center; gap:3px; }
  .tab .chev{ width:12px; height:12px; transition:transform .2s; }
  .tab.open{ color:var(--amber); } .tab.open .chev{ transform:rotate(180deg); }

  .dropup{ position:fixed; left:12px; right:12px; bottom:84px; z-index:31; background:#fff; border:1px solid #E6EBF2;
    border-radius:18px; box-shadow:0 14px 36px rgba(15,30,55,.26); padding:8px; max-width:560px; margin:0 auto; max-height:72vh; overflow-y:auto;
    transform:translateY(14px) scale(.98); opacity:0; pointer-events:none; transition:transform .2s ease, opacity .2s ease; }
  .dropup.show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .dropup .caret{ position:absolute; bottom:-8px; width:16px; height:16px; margin-left:-8px; background:#fff;
    border-right:1px solid #E6EBF2; border-bottom:1px solid #E6EBF2; transform:rotate(45deg); }
  #drop-act .caret{ left:37.5%; } #drop-lib .caret{ left:62.5%; }
  .dropup .head{ font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:800; padding:8px 10px 6px; }
  .li{ display:flex; align-items:center; gap:13px; width:100%; text-decoration:none; padding:11px 10px; border-radius:12px; color:var(--ink); font-size:.92rem; font-weight:800; }
  .li:active{ background:#F1F5FA; }
  .li .lic{ width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .li .lic svg{ width:20px; height:20px; }
  .li small{ display:block; font-size:.72rem; font-weight:600; color:var(--muted); margin-top:1px; }
  .li .arr{ margin-left:auto; color:#C2CCDA; width:17px; height:17px; }
  .li + .li{ border-top:1px solid #F1F4F8; }
  .c-quiz{ background:#FBE9F1; color:#A21D63; } .c-blue{ background:#E7F0FB; color:#2E75B6; }
  .c-green{ background:#E5F4EC; color:#0B7A56; } .c-gold{ background:#FEF3E2; color:#C8780C; }
  .c-purple{ background:#EAE7FA; color:#5B49C7; } .c-teal{ background:#E1F5EE; color:#0F6E56; } .c-navy{ background:#EEF1F5; color:#1a3558; }

.filters{position:sticky;top:54px;z-index:4;background:var(--bg);padding:12px 14px 8px;border-bottom:1px solid var(--line)}
.sf{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d8e0ea;border-radius:10px;padding:9px 11px;font-size:1rem}
.sf svg{width:16px;height:16px;color:#9aa6b6;flex-shrink:0}.sf input{border:0;outline:0;font:inherit;flex:1;background:none}
.lwrap{flex:1;overflow-y:auto;padding:10px 14px 120px}
.count{font-size:.74rem;color:var(--muted);font-weight:700;padding:4px 2px 8px}
.lit{display:block;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:8px;text-decoration:none;color:inherit}
.lit:active{background:#F1F5FA}
.lit .nm{font-weight:800;color:var(--navy);font-size:.95rem}
.lit .tg{font-size:.6rem;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.03em;margin-left:6px}
.lit .d{font-size:.84rem;color:#475569;line-height:1.5;margin-top:4px}
.none{display:none;text-align:center;color:var(--muted);font-size:.9rem;padding:30px 10px}
.go{margin-left:auto;color:#c2ccda;font-weight:800;font-size:1.1rem;flex-shrink:0}
.phint{font-size:.88rem;color:var(--muted);text-align:center;padding:16px 16px 2px}
.pgroup{margin:16px 14px 0}
.pgh{font-size:.72rem;font-weight:800;color:#fff;padding:6px 12px;border-radius:8px;display:inline-block;margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{font-size:.92rem;font-weight:800;color:var(--navy);background:#fff;border:1px solid #d8e0ea;border-radius:999px;padding:9px 16px;cursor:pointer}
.pchip:active{background:#F1F5FA}
.bck{display:flex;align-items:center;gap:6px;padding:11px 14px 4px}
.bck button{background:none;border:0;font:inherit;font-weight:800;color:var(--blue);cursor:pointer;display:flex;align-items:center;gap:4px}
.qlist{padding:6px 14px 120px}
.qi{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:8px;text-decoration:none;color:inherit}
.qi:active{background:#F1F5FA}.qm{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:54px}
.yr{font-size:.72rem;font-weight:800;color:var(--navy);text-align:center;line-height:1.15}
.mk{font-size:.64rem;font-weight:800;color:#fff;padding:2px 7px;border-radius:999px}.m30{background:var(--amber)}.m24{background:#5B49C7}.m12{background:var(--blue)}.mo{background:var(--muted)}
.qt{font-size:.9rem;line-height:1.4}.pl{display:block;font-size:.64rem;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.dwrap{flex:1;overflow-y:auto;padding:14px 16px 120px}
.back{display:inline-block;font-size:.84rem;font-weight:800;color:var(--blue);text-decoration:none;margin-bottom:12px}
.qhead{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:14px}
.qmeta{font-size:.68rem;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.qbig{font-size:1.02rem;font-weight:800;color:var(--navy);line-height:1.35}.qtopic{font-size:.78rem;color:var(--muted);margin-top:7px}
.ms{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.msh{font-size:.82rem;font-weight:800;color:#fff;padding:10px 14px}.msh-a{background:#0B7A56}.msh-d{background:#b3261e}.msh-n{background:#1a3558}
.mstext{padding:13px 15px;font-size:.9rem;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.src{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}.srch{font-size:.82rem;font-weight:800;color:#fff;background:#2E75B6;padding:10px 14px}
.srcintro{padding:11px 15px;font-size:.86rem;color:var(--muted);border-bottom:1px solid var(--line)}.ext{padding:11px 15px;border-bottom:1px solid #f1f4f8}.ext:last-child{border-bottom:0}
.extl{font-size:.74rem;font-weight:800;margin-bottom:5px;color:var(--navy)}.ext.a .extl{color:#0B7A56}.ext.d .extl{color:#b3261e}.extt{font-size:.88rem;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.fulllink{display:block;text-align:center;background:var(--navy);color:#fff;font-weight:800;font-size:.86rem;padding:12px;border-radius:11px;text-decoration:none;margin-top:6px}
.tab.cur{color:var(--amber)}

.shint{font-size:.92rem;color:var(--muted);text-align:center;padding:34px 24px}
.scount{font-size:.74rem;color:var(--muted);font-weight:700;padding:4px 2px 8px}
.res{display:block;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:8px;text-decoration:none;color:inherit}
.res:active{background:#F1F5FA}
.rtag{display:inline-block;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px;margin-bottom:5px}
.tg-Question{background:#FAEEDA;color:#854F0B}.tg-Concept{background:#FBEAF0;color:#72243E}.tg-Example{background:#E6F1FB;color:#0C447C}
.tg-Thinker{background:#EEEDFE;color:#26215C}.tg-Org{background:#EAF3DE;color:#173404}.tg-Walkthrough{background:#E1F5EE;color:#0F6E56}
.res .nm{font-weight:800;color:var(--navy);font-size:.95rem;line-height:1.35;display:block}
.res .br{font-size:.84rem;color:#475569;line-height:1.5;margin-top:4px}

.res.link{position:relative}.res .opn{display:block;margin-top:7px;font-size:.78rem;font-weight:800;color:var(--blue)}