/* Scoped enhancement styles. Shared page typography and navigation are untouched. */
.gram-lab { border:1px solid #c7ccd6; border-radius:12px; padding:clamp(16px,3vw,28px); background:#fffdf8; color:#18283e; margin:24px 0; }
.gram-lab [hidden], [data-gram-browser] [hidden] { display:none !important; }
.gram-lab h4 { margin:0 0 16px; font-size:1.05em; }
.gram-lab [data-gram-controls] { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin:20px 0; }
.gram-lab label, [data-gram-browser] label { display:block; flex:1 1 210px; min-width:0; }
.gram-lab select, [data-gram-browser] select, [data-gram-browser] input { display:block; width:100%; min-height:44px; padding:9px; border:1px solid #6e7887; border-radius:6px; background:white; color:#18283e; font:inherit; box-sizing:border-box; }
.gram-lab button, [data-gram-browser] button { min-height:44px; padding:10px 16px; border:1px solid #655081; border-radius:6px; background:#f1ecf8; color:#18283e; font:inherit; cursor:pointer; }
.gram-lab :focus-visible, [data-gram-browser] :focus-visible { outline:3px solid #594280; outline-offset:3px; }
.gram-lab select:disabled { opacity:.7; cursor:not-allowed; }
.gram-specimens { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:20px 0; }
.gram-specimens > div { min-width:0; }
.gram-cells { display:grid; grid-template-columns:repeat(3,24px); gap:9px; padding:10px 0; min-height:70px; }
.gram-cells i { display:block; height:22px; width:22px; border:2px solid #584466; box-sizing:border-box; }
.gram-cocci i { border-radius:50%; }
.gram-rods i { border-radius:8px; height:12px; margin:5px 0; }
.gram-cells[data-color="purple"] i { background:#6b4c9a; }
.gram-cells[data-color="pink"] i { background:#c65380; }
.gram-cells[data-color="clear"] i { background:transparent; border-style:dashed; }
.gram-lab [data-gram-result] { border-left:4px solid #8e74b2; padding-left:16px; }
[data-gram-browser] [data-gram-filter-controls] { display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin:16px 0; }
[data-gram-browser] table { table-layout:fixed; width:100%; border-collapse:collapse; }
[data-gram-browser] th, [data-gram-browser] td { overflow-wrap:anywhere; vertical-align:top; padding:12px 8px; border-bottom:1px solid #c7ccd6; text-align:left; }
[data-gram-browser] th:first-child { width:36%; }
@media(max-width:520px) { .gram-specimens { grid-template-columns:1fr; } .gram-lab [data-gram-controls] { display:block; } .gram-lab label { margin-bottom:16px; } }