:root{--ink: #17211b;--muted: #657268;--line: rgba(31, 54, 39, .13);--panel: rgba(255, 255, 255, .86);--paper: #fffdf7;--green: #1D4ED8;--green-dark: #1E3A8A;--mint: #DBEAFE;--amber: #f4c45f;--coral: #d96b55;--cyan: #3B82F6;font-family:Inter,Microsoft YaHei,PingFang SC,system-ui,sans-serif;color:var(--ink);background:#eef3ee;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{cursor:pointer;font:inherit}.app-shell{min-height:100vh;padding:26px;background:linear-gradient(rgba(33,58,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(33,58,42,.035) 1px,transparent 1px),linear-gradient(135deg,#f6f1e5,#eef5f0 46%,#edf4f6);background-size:28px 28px,28px 28px,auto}.hero{max-width:1460px;margin:0 auto 22px;min-height:138px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:linear-gradient(120deg,#1d4ed8,#2563eb 52%,#3b82f6);color:#fff;padding:24px 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;box-shadow:0 18px 42px #233c2a2e}.eyebrow{margin:0 0 8px;color:#496052;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:0}.hero .eyebrow{color:#d9f2df}.hero h1{max-width:780px;margin:0;font-size:34px;line-height:1.18;letter-spacing:0}.hero-copy{max-width:840px;margin:10px 0 0;color:#ffffffc7;line-height:1.7}.stat-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.stat-row span{min-width:118px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#ffffff1f;padding:12px 14px;color:#ffffffc7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-row strong{display:block;color:#fff;font-size:24px;line-height:1.1}.workspace{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:22px;align-items:start}.microbe-wall{display:grid;gap:22px}.category-band{position:relative}.category-band h2{margin:0 0 12px;display:flex;align-items:center;gap:10px;font-size:20px;line-height:1.3;letter-spacing:0}.category-band h2:before{content:"";width:10px;height:24px;border-radius:999px;background:var(--green);box-shadow:0 0 0 5px #1d4ed81f}.category-band:nth-child(2) h2:before{background:var(--amber);box-shadow:0 0 0 5px #f4c45f2e}.category-band:nth-child(3) h2:before{background:var(--coral);box-shadow:0 0 0 5px #d96b5529}.microbe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.microbe-card{position:relative;min-height:196px;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:12px;display:grid;grid-template-rows:122px minmax(0,1fr);gap:12px;text-align:left;box-shadow:0 10px 26px #233c2a14;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.microbe-card:before{content:"";position:absolute;inset:0;border-radius:8px;border-top:4px solid rgba(29,78,216,.42);pointer-events:none}.category-band:nth-child(2) .microbe-card:before{border-top-color:#f4c45fcc}.category-band:nth-child(3) .microbe-card:before{border-top-color:#d96b55c2}.microbe-card:hover,.microbe-card.active{transform:translateY(-3px);border-color:#1d4ed86b;background:#fff;box-shadow:0 18px 36px #233c2a26}.microbe-card.active{outline:3px solid rgba(29,78,216,.16)}.microbe-card.active:after{content:"已选择";position:absolute;top:10px;right:10px;border-radius:999px;background:var(--green);color:#fff;padding:4px 8px;font-size:12px;font-weight:800}.microbe-card img{width:100%;height:122px;object-fit:contain;border-radius:8px;background:linear-gradient(135deg,#ffffffe6,#ecf4edf0);border:1px solid rgba(33,58,42,.08);padding:8px}.microbe-card strong{display:block;color:#1d2f22;font-size:16px;line-height:1.35}.microbe-card small{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.35;word-break:break-word}.qa-panel{position:sticky;top:20px;border:1px solid rgba(33,58,42,.14);border-radius:8px;background:#fffdf7eb;padding:18px;box-shadow:0 22px 48px #233c2a29;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.selected-profile{display:grid;grid-template-columns:136px minmax(0,1fr);gap:16px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(33,58,42,.12)}.selected-profile>img{width:136px;height:136px;object-fit:contain;border-radius:8px;background:linear-gradient(135deg,#fff,#eef6ec);border:1px solid rgba(33,58,42,.1);padding:8px;box-shadow:inset 0 0 0 1px #fffc}.selected-profile h2{margin:0;font-size:25px;line-height:1.25;letter-spacing:0}.selected-profile p{margin:7px 0 12px;color:var(--muted);line-height:1.45}.selected-profile span{display:inline-flex;border-radius:999px;background:var(--mint);color:#1e40af;padding:6px 10px;font-size:12px;font-weight:800}.question-dropdown{margin-top:16px;border:1px solid rgba(33,58,42,.14);border-radius:8px;background:#fff;overflow:hidden}.question-dropdown summary{min-height:52px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;list-style:none;color:#243927;font-weight:800}.question-dropdown summary::-webkit-details-marker{display:none}.question-dropdown summary svg{transition:transform .16s ease}.question-dropdown[open] summary svg{transform:rotate(180deg)}.question-list{border-top:1px solid rgba(33,58,42,.1);padding:10px;display:grid;gap:8px;background:#fbfbf6}.question-list button{border:1px solid rgba(33,58,42,.12);border-radius:8px;background:#fff;color:#26372a;padding:12px 12px 12px 36px;text-align:left;line-height:1.5;position:relative;transition:border-color .16s ease,background .16s ease,transform .16s ease}.question-list button:before{content:"?";position:absolute;left:12px;top:13px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#dbeafe;color:var(--green);font-size:12px;font-weight:900}.question-list button:hover,.question-list button.active{transform:translate(2px);border-color:#2563eb73;background:#eff6ff}.answer-thread{margin-top:16px;display:grid;gap:12px}.bubble{border-radius:8px;padding:14px 15px;line-height:1.75;box-shadow:0 10px 24px #213a2a14}.bubble div{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800}.bubble p{margin:8px 0 0}.bubble.student{background:var(--green-dark);color:#fff}.bubble.student div{color:#ffffffd1}.bubble.microbe{border:1px solid rgba(244,196,95,.34);background:#fff5dd;color:#1f2b20}.bubble.microbe div{color:#73582d}@media(max-width:1180px){.workspace{grid-template-columns:1fr}.qa-panel{position:static}.microbe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.app-shell{padding:14px}.hero{display:block;padding:20px}.stat-row{justify-content:flex-start;margin-top:16px}.hero h1{font-size:28px}.microbe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.selected-profile{grid-template-columns:96px minmax(0,1fr)}.selected-profile>img{width:96px;height:96px}}@media(max-width:520px){.microbe-grid{grid-template-columns:1fr}.microbe-card{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto;min-height:118px;align-items:center}.microbe-card img{height:96px}}.microbe-card{grid-template-rows:auto minmax(0,1fr)}.microbe-card img{aspect-ratio:16 / 9;height:auto;object-fit:cover;object-position:top center;padding:0}.latin-name{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.35;word-break:break-word;font-family:Georgia,Times New Roman,Times,serif}.latin-italic{font-style:italic;font-synthesis:style}.latin-roman{font-style:normal}.selected-profile{grid-template-columns:168px minmax(0,1fr)}.selected-profile>img{width:168px;aspect-ratio:16 / 9;height:auto;object-fit:cover;object-position:top center;padding:0}.latin-line{margin:7px 0 12px;color:var(--muted);line-height:1.45;font-family:Georgia,Times New Roman,Times,serif}@media(max-width:760px){.selected-profile{grid-template-columns:132px minmax(0,1fr)}.selected-profile>img{width:132px;height:auto}}@media(max-width:520px){.microbe-card{grid-template-columns:132px minmax(0,1fr)}.microbe-card img{height:auto}}.answer-source{margin-left:8px;border-radius:999px;padding:3px 8px;background:#1d4ed81a;color:#1d4ed8;font-size:12px;font-style:normal;font-weight:800}.answer-source.loading{background:#f59e0b24;color:#b45309}.answer-source.fallback{background:#64748b21;color:#475569}.model-error{display:block;margin-top:10px;color:#64748b;line-height:1.5}.llm-banner{margin-top:16px;border:1px solid rgba(37,99,235,.22);border-radius:8px;background:linear-gradient(135deg,#1d4ed81a,#3b82f629);padding:12px 14px;color:#1e3a8a}.llm-banner strong{display:block;font-size:16px;line-height:1.35}.llm-banner small{display:block;margin-top:5px;color:#475569;line-height:1.55}