* { box-sizing: border-box; }
:root { --tg-accent: #2f8f7b; --tg-border: #dfe5ec; --tg-muted: #667785; --tg-bg: #f6f7f9; }
body { margin: 0; background: var(--tg-bg) !important; color: #1f2933; font-family: "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { letter-spacing: 0; }
.transgenic-header-inner { max-width: 1760px; }
.module-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.module-tabs .nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 13px; border: 1px solid transparent; border-radius: 999px; color: #607080; font-weight: 800; text-decoration: none; }
.module-tabs .nav-link.active { color: #237361; border-color: rgba(47,143,123,.28); background: #e4f4f0; }
.transgenic-shell { width: 100%; max-width: none !important; padding: 0 !important; }
.page-wrap { max-width: 1760px; margin: 0 auto; padding: 18px 18px 38px; }
.panel { margin-bottom: 16px; padding: 16px; border: 1px solid var(--tg-border); border-radius: 9px; background: #fff; box-shadow: 0 8px 24px rgba(31,41,51,.04); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-title { margin: 0; color: #1f2d3d; font-size: 1.04rem; font-weight: 850; }
.item-count { color: var(--tg-muted); font-size: .8rem; font-weight: 800; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid #d2dcda; border-radius: 7px; background: #fff; color: #1f2933; font-weight: 750; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: #9fb4af; background: #f7faf9; }
.btn-success { color: #fff; background: var(--tg-accent); border-color: var(--tg-accent); }
.btn-success:hover { color: #fff; background: #237361; }
.btn-danger { color: #91352f; background: #fae8e7; border-color: rgba(189,75,69,.34); }
.toolbar, .filter-bar, .sheet-filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.toolbar { margin-bottom: 14px; }
.filter-bar { margin-bottom: 12px; }
.filter-bar input, .filter-bar select, .sheet-filters input, .sheet-filters select { min-height: 38px; padding: 7px 10px; border: 1px solid #cfd9df; border-radius: 7px; background: #fff; }
.empty-state { padding: 14px 4px; color: #71808c; }
.helper-text { color: var(--tg-muted); font-size: .82rem; }
.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(140px,1fr)); gap: 12px; margin-bottom: 16px; }
.summary-tile { min-height: 106px; padding: 16px 18px; border: 1px solid var(--tg-border); border-left: 4px solid #607d8b; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(31,41,51,.05); }
.summary-tile.success { border-left-color: #2f8f7b; }.summary-tile.info { border-left-color: #3d7ebd; }.summary-tile.warning { border-left-color: #b97818; }.summary-tile.danger { border-left-color: #bd4b45; }
.summary-title { display: block; color: #52616f; font-size: .84rem; font-weight: 750; }.summary-value { display: block; margin-top: 14px; color: #102a43; font-size: 2rem; line-height: 1; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.alert-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.alert-item { display: grid; gap: 3px; padding: 10px 12px; border-left: 4px solid #607d8b; border-radius: 7px; background: #f3f6f8; }.alert-item.warning { background: #fff8e8; border-color: #b97818; }.alert-item.danger { background: #fae8e7; border-color: #bd4b45; }.alert-item.info { background: #e9f3fb; border-color: #3d7ebd; }
.activity-list { display: grid; }.activity-item { display: grid; grid-template-columns: 120px minmax(0,1fr) 150px; gap: 10px; padding: 9px 0; border-bottom: 1px solid #edf1f4; }.activity-item time { color: var(--tg-muted); font-size: .76rem; }
.line-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 9px; }
.line-card { display: grid; gap: 5px; min-height: 72px; padding: 12px; border: 1px solid color-mix(in srgb, var(--line-color) 38%, #dfe5ec); border-left: 5px solid var(--line-color); border-radius: 8px; background: color-mix(in srgb, var(--line-color) 10%, #fff); text-align: left; cursor: pointer; }.line-card span { color: var(--tg-muted); font-size: .76rem; }
.record-columns { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 16px; align-items: start; }
.mouse-list, .cage-record-list { display: grid; gap: 7px; max-height: 720px; overflow: auto; }
.mouse-row { display: grid; grid-template-columns: 9px 90px minmax(150px,.8fr) minmax(220px,1.6fr) 90px 110px; gap: 9px; align-items: center; width: 100%; padding: 9px 10px; border: 1px solid #dfe5ec; border-radius: 7px; background: #fff; color: #334454; text-align: left; cursor: pointer; }.mouse-row:hover { border-color: #9fb4af; background: #f8fbfa; }.line-swatch { width: 9px; height: 30px; border-radius: 5px; }.mouse-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.cage-record { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px; border: 1px solid #dfe5ec; border-left: 4px solid #71879a; border-radius: 7px; background: #fff; text-align: left; cursor: pointer; }.cage-record small { grid-column: 1/-1; color: var(--tg-muted); }
.board-page { max-width: 1960px; }.board-filter { position: sticky; top: 0; z-index: 10; padding: 10px; border: 1px solid #dfe5ec; border-radius: 8px; background: rgba(246,247,249,.96); }
.board-grid { display: grid; grid-template-columns: repeat(4,minmax(280px,1fr)); gap: 10px; align-items: start; }
.cage-section { padding: 10px; }.cage-section .panel-heading { margin-bottom: 8px; }.cage-maintain { border-top: 4px solid #2f8f7b; }.cage-mating { border-top: 4px solid #3d7ebd; }.cage-pregnant { border-top: 4px solid #b97818; }.cage-offspring { border-top: 4px solid #7a5bb8; }
.cage-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(165px,1fr)); gap: 8px; }
.cage-card { min-height: 104px; padding: 7px; border: 1px solid #d9e1ea; border-radius: 8px; background: #fbfcfd; transition: .15s; }.cage-card.drag-over { border-color: #3a86ff; box-shadow: 0 0 0 3px rgba(58,134,255,.18); transform: translateY(-1px); }.cage-card > header { display: flex; justify-content: space-between; gap: 6px; }.cage-card > header button { padding: 0; border: 0; background: transparent; color: #102a43; cursor: pointer; }.cage-card > small { display: block; min-height: 16px; color: var(--tg-muted); font-size: .67rem; }
.cage-mice { display: grid; grid-template-columns: repeat(auto-fill,minmax(72px,1fr)); gap: 5px; margin-top: 5px; }.empty-cage { grid-column: 1/-1; padding: 12px 4px; color: #8996a0; text-align: center; font-size: .75rem; }
.mouse-card { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1/1; min-height: 72px; padding: 5px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--line-color) 35%,#d7e0ea); border-left: 4px solid var(--line-color); border-radius: 7px; background: color-mix(in srgb,var(--line-color) 7%,#fff); text-align: left; cursor: grab; }.mouse-card strong { font-size: .78rem; }.mouse-card span { display: -webkit-box; overflow: hidden; color: #52616f; font-size: .6rem; line-height: 1.15; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }.mouse-card small { color: #667785; font-size: .59rem; }
.app-dialog { width: min(640px,calc(100vw - 36px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid #d2dcda; border-radius: 9px; background: #fff; box-shadow: 0 24px 70px rgba(31,41,51,.25); }.wide-dialog { width: min(820px,calc(100vw - 36px)); }.compact-dialog { width: min(460px,calc(100vw - 36px)); }.app-dialog::backdrop { background: rgba(31,41,51,.38); }
.dialog-header, .dialog-footer { display: flex; align-items: center; gap: 9px; padding: 14px 18px; }.dialog-header { justify-content: space-between; border-bottom: 1px solid #e3e8e6; }.dialog-header h2 { margin: 0; font-size: 1.08rem; }.dialog-footer { justify-content: flex-end; border-top: 1px solid #e3e8e6; }.split-footer { display: grid; grid-template-columns: auto auto 1fr auto auto; }.dialog-body { padding: 18px; overflow-y: auto; }
.icon-button { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #607080; font-size: 1.5rem; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.form-grid label, .dialog-body > label { display: grid; gap: 5px; color: #52616f; font-size: .78rem; font-weight: 750; }.form-grid input, .form-grid select, .form-grid textarea, .dialog-body > label input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #cfd9df; border-radius: 6px; background: #fff; color: #1f2933; }.form-span { grid-column: 1/-1; }.form-span h3 { margin: 3px 0 8px; font-size: .88rem; }.checkbox-row { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; }.checkbox-row input { width: auto !important; min-height: 0 !important; }
.genotype-panel, .tam-panel, .litter-panel { padding: 12px; border: 1px solid #e2e8ec; border-radius: 7px; background: #f9fbfc; }.genotype-fields-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.history-panel { padding: 10px 12px; border: 1px solid #e2e8ec; border-radius: 7px; }.history-panel summary { color: #405261; font-weight: 800; cursor: pointer; }.history-row { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid #edf1f4; font-size: .76rem; }.history-row span { color: var(--tg-muted); }
.wean-pup-row { display: grid; grid-template-columns: 45px 1fr 1fr; gap: 8px; align-items: end; margin-top: 8px; }.wean-pup-row label { display: grid; gap: 4px; font-size: .74rem; }.wean-pup-row select { min-height: 36px; border: 1px solid #cfd9df; border-radius: 6px; }
.toast-region { position: fixed; top: 18px; right: 18px; z-index: 2000; display: grid; gap: 8px; }.toast { min-width: 260px; max-width: 440px; padding: 11px 14px; border: 1px solid #afded4; border-radius: 7px; background: #e4f4f0; color: #0f5c53; box-shadow: 0 8px 24px rgba(31,41,51,.15); font-weight: 700; }.toast.error { border-color: #e2b5bc; background: #fae8e7; color: #91352f; }
.is-hidden { display: none !important; }
.sheet-panel { padding: 12px; }.sheet-filters { margin-bottom: 8px; }.sheet-filters input { min-width: 280px; }.table-scroll { width: 100%; overflow: auto; }.sheet-panel table, .activity-table { width: 100%; border-collapse: collapse; font-size: .76rem; }.sheet-panel th, .sheet-panel td, .activity-table th, .activity-table td { padding: 6px; border: 1px solid #dfe5ec; text-align: left; vertical-align: top; }.sheet-panel th, .activity-table th { position: sticky; top: 0; z-index: 2; background: #edf2f4; color: #405261; }.sheet-panel input:not([type=checkbox]), .sheet-panel select { width: 100%; min-width: 74px; min-height: 32px; padding: 4px 6px; border: 1px solid #cfd9df; border-radius: 4px; }.sheet-panel td:nth-child(2) input { min-width: 95px; }.sheet-panel td:nth-child(4) input { min-width: 85px; }.sheet-panel td:nth-child(7) select { min-width: 180px; }.sheet-panel tr.sheet-hidden { display: none; }.activity-table td { max-width: 420px; word-break: break-word; }
@media (max-width: 1200px) { .summary-grid { grid-template-columns: repeat(3,1fr); }.board-grid { grid-template-columns: repeat(2,minmax(280px,1fr)); }.record-columns, .dashboard-grid { grid-template-columns: 1fr; }.mouse-row { grid-template-columns: 9px 80px 1fr 1.5fr; }.mouse-row span:nth-last-child(-n+2) { display: none; } }
@media (max-width: 720px) { .app-local-header-inner { align-items: flex-start !important; flex-direction: column; }.module-tabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; }.module-tabs .nav-link { white-space: nowrap; }.page-wrap { padding: 12px 10px 30px; }.summary-grid, .board-grid { grid-template-columns: 1fr; }.form-grid { grid-template-columns: 1fr; }.form-span { grid-column: auto; }.mouse-row { grid-template-columns: 8px 75px 1fr; }.mouse-row span:nth-of-type(n+3) { display: none; }.split-footer { display: flex; flex-wrap: wrap; }.toolbar .btn { flex: 1; }.activity-item { grid-template-columns: 1fr; } }