/* --- General Styles --- */
#biology-visualiser-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border: 1px solid #ddd; padding: 20px; border-radius: 8px; background: #fdfdfd; }
#bv-tabs { border-bottom: 1px solid #ccc; }
.bv-tab-button { padding: 10px 15px; border: 1px solid transparent; background-color: #f1f1f1; cursor: pointer; font-size: 16px; border-radius: 5px 5px 0 0; margin-bottom: -1px; }
.bv-tab-button.active { background-color: #fff; border-color: #ccc; border-bottom-color: #fff; }
.bv-tab-content { padding: 20px; border: 1px solid #ccc; border-top: 0; background: #fff; }
.bv-workspace { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 15px; }
.bv-tray { border: 1px solid #ddd; padding: 15px; width: 200px; background: #fafafa; border-radius: 5px; }
.bv-info-box { margin-top: 20px; padding: 15px; background-color: #e7f3fe; border-left: 5px solid #2196F3; min-height: 40px; border-radius: 0 5px 5px 0; }

/* --- Draggable Base Style --- */
.cell-draggable, .allele-draggable, .eco-draggable { padding: 10px; margin-bottom: 10px; cursor: grab; text-align: center; border-radius: 5px; user-select: none; font-weight: bold; }

/* --- 1. Cells Styles --- */
#cell-diagram { width: 400px; height: 400px; border: 2px dashed #ccc; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.cell-draggable { background-color: #87CEEB; }
#cell-diagram.drop-active { border-color: #28a745; background: #e9f5e9; }

/* --- 2. Genetics Styles --- */
#punnett-square { display: grid; grid-template-areas: "label-side label-top" "label-side grid" "label-side actions"; grid-template-columns: 50px auto; grid-template-rows: 50px auto auto; gap: 5px; }
.punnett-label-top, .punnett-label-side { font-weight: bold; text-align: center; align-self: center; }
.punnett-label-top { grid-area: label-top; }
.punnett-label-side { grid-area: label-side; writing-mode: vertical-rl; transform: rotate(180deg); }
.punnett-top-alleles, .punnett-side-alleles { display: flex; gap: 5px; }
.punnett-top-alleles { grid-area: label-top; margin-left: 55px; }
.punnett-side-alleles { grid-area: label-side; flex-direction: column; margin-top: 55px; }
#punnett-grid { grid-area: grid; display: grid; grid-template-columns: repeat(2, 70px); grid-template-rows: repeat(2, 70px); gap: 5px; }
.punnett-cell, .punnett-allele-drop { width: 70px; height: 70px; border: 1px solid #333; display: flex; justify-content: center; align-items: center; font-size: 24px; background: #fff; }
.allele-draggable { background-color: #ffc107; }
.punnett-allele-drop.drop-hover { background-color: #fffbe0; }
.punnett-actions { grid-area: actions; display: flex; gap: 10px; margin-top: 10px; }
#calculate-punnett, #reset-punnett { padding: 10px 15px; border: 0; border-radius: 5px; cursor: pointer; }
#calculate-punnett { background-color: #28a745; color: white; }
#reset-punnett { background-color: #dc3545; color: white; }

/* --- 3. Evolution Styles --- */
#phylo-tree ul { padding-left: 20px; position: relative; }
#phylo-tree ul li { list-style-type: none; margin: 10px 0; position: relative; }
#phylo-tree ul li::before { content: ''; position: absolute; top: 0; left: -20px; border-left: 1px solid #ccc; height: 100%; }
#phylo-tree ul li:last-child::before { height: 1em; }
#phylo-tree ul li span::before { content: ''; position: absolute; top: 1em; left: -20px; border-top: 1px solid #ccc; width: 20px; }
.phylo-node { cursor: pointer; border: 1px solid #ddd; padding: 5px 10px; border-radius: 5px; background: #f0f0f0; display: inline-block; }
.phylo-node:hover, .phylo-node.active { background-color: #d4edda; border-color: #c3e6cb; }

/* --- 4. Ecosystems Styles --- */
#food-web-area { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; }
.trophic-level { border: 2px dashed #ccc; padding: 15px; min-height: 80px; border-radius: 5px; background: #fdfdfd; transition: background-color 0.2s; }
.eco-draggable { background-color: #90ee90; }
.trophic-level.drop-hover { background-color: #e6f4ea; border-color: #28a745; }
.trophic-level .eco-draggable { display: inline-block; margin: 5px; }