/* Web-only overrides. These files are not loaded by Electron. */
:root { --web-bar-height: calc(36px + env(safe-area-inset-top, 0px)); --web-height: 100dvh; --web-offset: 0px; }
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
[hidden] { display: none !important; }
.web-topbar { position: fixed; inset: var(--web-offset) 0 auto; height: var(--web-bar-height); padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fafafa; border-bottom: 1px solid #dedee1; z-index: 300; font-size: 11px; }
.web-topbar strong { white-space: nowrap; font-size: 13px; }
.web-topbar strong span { color: #777; font-size: 10px; font-weight: 500; margin-left: 7px; }
.web-topbar > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.web-topbar button { min-height: 30px; background: transparent; padding: 3px 8px; border-radius: 7px; font-size: 10px; }
#webNetwork { color: #78787c; font-size: 10px; white-space: nowrap; }
#webSaveState { color: #4b4b50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
#webSaveState[data-state="error"] { color: #a02d25; background: #fceae7; }
.desktop-bg { position: fixed; top: calc(var(--web-offset) + var(--web-bar-height)); left: 0; width: 100%; height: calc(var(--web-height) - var(--web-bar-height)); padding: 0; }
.app-frame, .app-frame.sidebar-collapsed { height: 100%; grid-template-columns: minmax(0, 1fr); border-radius: 0; transition: none; }
.content { grid-column: 1; grid-row: 1; padding-bottom: env(safe-area-inset-bottom, 0px); }
.sidebar { position: absolute; top: 0; left: 0; bottom: 0; width: 228px; max-height: 100%; padding: 55px 16px 16px; border-radius: 0 18px 18px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; z-index: 110; transition: transform 180ms ease, opacity 180ms ease; }
.app-frame.sidebar-collapsed .sidebar { width: 228px; padding: 55px 16px 16px; transform: translateX(-100%); }
.nav-list { gap: 3px; }.nav-item { font-size: 16px; min-height: 42px; }.brand { font-size: 23px; }.settings-button { position: static; margin: auto auto 0; padding: 14px; }
.sidebar-toggle-button, .app-frame.sidebar-collapsed .sidebar-toggle-button { top: 10px; left: max(10px, env(safe-area-inset-left, 0px)); width: 38px; height: 38px; z-index: 120; background: rgba(244,244,246,.94); }
.web-nav-shade { position: absolute; inset: 0; z-index: 100; background: #0003; }.sidebar-collapsed .web-nav-shade { display: none; }
.page-top, .calendar-top, [data-page-panel="experiments"] > .page-top { width: calc(100% - 24px); margin: 10px auto 12px; min-height: 38px; padding-left: 48px; flex-direction: row; align-items: center; gap: 10px; }
.app-frame.sidebar-collapsed .page-top, .app-frame.sidebar-collapsed .calendar-top { padding-left: 48px; }
.page-top > div { min-width: 0; }.page-top h1 { font-size: clamp(17px, 2.4vw, 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.page-kicker { font-size: 10px; }
.workspace-board, [data-page-panel="experiments"] > .experiment-workspace, .day-board, .calendar, .year-grid { width: calc(100% - 24px); height: calc(100% - 12px); margin: 0 auto; border-radius: 16px; min-width: 0; min-height: 0; }
input, textarea, select { font-size: 16px !important; max-width: 100%; }
button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; } button:not(.plate-well):not(.plate-label):not(.apple-date-day):not(.apple-time-option):not(.split-handle) { min-height: 34px; }
.blue-button, .secondary-button { min-width: 0; padding: 8px 12px; font-size: 12px; }
.experiment-workspace { --experiment-list-width: 180px; grid-template-columns: var(--experiment-list-width) 6px minmax(0,1fr); }
.experiment-editor-shell { grid-column: 3; grid-row: 1; grid-template-rows: auto minmax(0,1fr) auto; }
.web-editor-tabs { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-bottom: 1px solid #e8e8ea; min-height: 44px; background: #fafafa; }
.web-editor-tabs button { border-radius: 8px; padding: 5px 10px; background: #eeeef0; font-size: 11px; }.web-editor-tabs button[aria-pressed="true"] { background: #1d1d1f; color: white; }.web-editor-tabs button:last-child { margin-left: auto; }
.experiment-primary-column, .experiment-secondary-column { padding: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.experiment-main-field > span, .experiment-block-heading h2 { font-size: 14px; }.step-rendered-view, .result-rendered-view, .scientific-rich-text { font-size: 14px; line-height: 1.65; }
.experiment-action-bar { grid-template-columns: auto minmax(0,1fr) auto; padding: 8px 10px; gap: 6px; min-height: 54px; }.experiment-action-bar > span { display: none; }.experiment-action-bar > div { gap: 5px; }.experiment-action-bar > div:last-child { justify-self: end; }.experiment-action-bar button { font-size: 11px; padding: 7px 10px; min-width: 0; }
.plate-grid-scroller, .experiment-data-table-scroller, .cfu-plate-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }.web-multiselect .plate-grid, .web-multiselect .experiment-data-table { touch-action: none; }.web-multiselect .experiment-data-table input { pointer-events: none; }.web-multiselect .plate-well { touch-action: none; }
.plate-well { min-width: 26px; min-height: 26px; }.module-toolbar, .experiment-table-toolbar { flex-wrap: wrap; }.module-batch-row { grid-template-columns: minmax(0,1fr) auto; }
.web-list-button { position: absolute; top: 6px; left: 10px; z-index: 35; padding: 5px 10px; border-radius: 8px; background: #eeeef0; font-size: 11px; }
.planning-panel-workspace, .mind-workspace { position: relative; grid-template-columns: minmax(0,1fr); padding-top: 44px; }
.planning-list-panel, .mind-list-panel { position: absolute; z-index: 30; left: 0; top: 44px; bottom: 0; width: min(290px, 85%); max-height: none; background: #fafafa; box-shadow: 5px 0 20px #0002; display: none; }.web-plans-open .planning-list-panel { display: grid; }.web-minds-open .mind-list-panel { display: block; }
.planning-editor-shell { grid-template-rows: minmax(0,1fr) auto; }.planning-editor-grid { display: block; overflow-y: auto; min-height: 0; }.planning-primary-column, .planning-secondary-column { overflow: visible; padding: 16px; }.planning-action-bar { min-height: 54px; padding: 8px 12px; gap: 5px; }.planning-action-bar > span { display: none; }.planning-panel-time-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
.analysis-workspace { position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 44px minmax(0,1fr); }
.web-analysis-tabs { display: flex; gap: 8px; padding: 5px 12px; background: #fafafa; border-bottom: 1px solid #e2e2e5; }.web-analysis-tabs button { background: #eeeef0; border-radius: 8px; padding: 5px 12px; font-size: 11px; }
.analysis-editor { grid-row: 2; padding: 15px; }.analysis-tool-panel, .analysis-history-panel { display: none; position: absolute; z-index: 30; top: 44px; bottom: 0; left: 0; width: min(300px,85%); max-height: none; box-shadow: 5px 0 20px #0002; }.analysis-history-panel { left: auto; right: 0; }.web-tools-open .analysis-tool-panel, .web-history-open .analysis-history-panel { display: grid; }.analysis-tool-list small { display: block; }.analysis-tool-list button { min-height: 44px; }.analysis-form { grid-template-columns: repeat(2,minmax(0,1fr)); }.analysis-form label span, .analysis-editor p { font-size: 12px; }.analysis-action-buttons { flex-wrap: wrap; }
.mind-toolbar { flex-wrap: wrap; }.mind-toolbar input { min-width: 120px; }.mind-footer { font-size: 10px; }.mind-inspector { min-width: 0; }.mind-inspector textarea { min-width: 0; }.mind-canvas { touch-action: none; }.mind-actions button { font-size: 11px; }
.paperang-workspace { overflow-y: auto; }.web-capability-note { margin: 0 12px 8px; padding: 8px 12px; border-radius: 10px; background: #e8e8eb; color: #606067; font-size: 11px; line-height: 1.5; }
[data-page-panel="paperang"].active { grid-template-rows: auto auto minmax(0,1fr); }
.todo-drawer { max-width: calc(100vw - 24px); max-height: calc(var(--web-height) - var(--web-bar-height) - 20px); }.modal-backdrop { left: 0; }.compact-dialog { max-width: calc(100vw - 24px); max-height: calc(var(--web-height) - var(--web-bar-height) - 20px); overflow-y: auto; }.drawer-fields { overflow-y: auto; }.drawer-header, .drawer-footer { flex-shrink: 0; }.drawer-field input { min-height: 38px; }
.todo-drawer form { max-height: calc(var(--web-height) - var(--web-bar-height) - 20px); }.modal-backdrop { top: calc(var(--web-offset) + var(--web-bar-height)); bottom: auto; height: calc(var(--web-height) - var(--web-bar-height)); }
.settings-workspace { overflow-y: auto; }.web-settings p { font-size: 12px; line-height: 1.7; color: #65656d; margin: 8px 0 12px; }.web-settings h3 { font-size: 13px; margin: 18px 0 6px; }.web-setting-actions { display: flex; flex-wrap: wrap; gap: 8px; }.web-settings button { padding: 7px 12px; background: #eeeef0; border: 1px solid #dedee2; border-radius: 8px; font-size: 12px; }.web-settings select { width: 100%; margin: 7px 0; min-height: 38px; }.web-settings button:first-child { color: #1d1d1f; }
.web-save-alert { position: fixed; top: calc(var(--web-offset) + var(--web-bar-height)); left: 12px; right: 12px; z-index: 400; background: #fff0ed; border: 1px solid #c67666; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; font-size: 13px; }.web-save-alert button { white-space: nowrap; border-radius: 7px; padding: 6px; }
.web-import-dialog { width: min(460px,calc(100vw - 32px)); max-height: calc(var(--web-height) - 60px); overflow-y: auto; border: 1px solid #c9c9ce; border-radius: 18px; padding: 20px; background: #f7f7f9; color: #1d1d1f; box-shadow: 0 15px 60px #0003; }.web-import-dialog::backdrop { background: #0003; backdrop-filter: blur(3px); }.web-import-dialog h2 { font-size: 18px; }.web-import-dialog p { font-size: 12px; line-height: 1.6; margin: 10px 0; overflow-wrap: anywhere; }.web-import-dialog table { width: 100%; font-size: 12px; border-collapse: collapse; margin: 12px 0; }.web-import-dialog th, .web-import-dialog td { padding: 7px 3px; border-bottom: 1px solid #dedee1; text-align: left; }.web-import-dialog select { width: 100%; font-size: 13px !important; min-height: 40px; }.web-import-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }.web-import-dialog button { padding: 7px 14px; border-radius: 8px; background: #e9e9ec; }.web-import-dialog button:last-child { background: #1d1d1f; color: white; }
.web-boot { position: fixed; inset: 0; z-index: 999; background: #f5f5f7; padding: 30vh 24px 24px; text-align: center; }.web-boot strong { font-size: 26px; }.web-boot p { margin: 18px auto; max-width: 480px; font-size: 14px; }.web-boot small { display: block; margin: 12px; }.web-boot button { margin: 8px; padding: 10px; border-radius: 8px; }
@media (max-width:1179px) {
  .experiment-workspace, .experiment-workspace.experiment-list-collapsed { grid-template-columns: 0 0 minmax(0,1fr); }
  .experiment-list-panel { position: absolute; z-index: 25; top: 44px; bottom: 0; left: 0; width: min(290px,85%); max-height: none; box-shadow: 5px 0 20px #0002; }.experiment-list { max-height: none; }.experiment-list-collapsed .experiment-list-panel { visibility: hidden; }
  .experiment-list-toggle-button, .experiment-workspace.experiment-list-collapsed .experiment-list-toggle-button { left: 7px; top: 6px; width: 36px; height: 34px; z-index: 40; }
  .workspace-split-handle, .editor-split-handle { display: none; }
  .web-editor-tabs { padding-left: 48px; }.experiment-editor-grid { display: block; overflow: hidden; }.experiment-primary-column, .experiment-secondary-column { display: none; height: 100%; overflow-y: auto; border: 0; }.experiment-editor-shell[data-web-tab="steps"] .experiment-primary-column, .experiment-editor-shell[data-web-tab="details"] .experiment-secondary-column { display: block; }.experiment-workspace.experiment-list-collapsed .experiment-primary-column { padding-top: 16px; }
}
@media (min-width:1180px) { .web-editor-tabs > button:not(:last-child) { display: none; }.experiment-editor-grid { --experiment-default-primary-ratio: .63; } }
@media (max-width:600px) {
  .web-topbar strong span, #webNetwork { display: none; }#webSaveState { max-width: 185px; }.web-topbar > div { gap: 2px; }
  .page-top h1, .calendar-top h1 { font-size: 17px; }.page-top, .calendar-top { gap: 6px; margin-bottom: 10px; }.page-kicker { display: none; }.page-top .blue-button { padding: 8px; font-size: 11px; }.view-switch { padding: 2px; }.view-switch button { min-width: 28px; padding: 4px; }
  .workspace-board, [data-page-panel="experiments"] > .experiment-workspace, .day-board, .calendar, .year-grid { width: calc(100% - 16px); }.workspace-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }.search-input { width: 100%; }
  .experiment-action-bar { display: flex; justify-content: space-between; flex-wrap: wrap; }.experiment-action-bar button { padding: 6px 8px; font-size: 10px; }.experiment-action-bar .danger-link { display: none; }.experiment-secondary-column { --preparation-columns: 18px minmax(0,1.3fr) minmax(0,.65fr) minmax(0,.7fr) 18px; }
  .analysis-form, .analysis-metrics, .cfu-defaults, .analysis-save-fields { grid-template-columns: minmax(0,1fr); }.analysis-section-heading, .cfu-group-heading { flex-wrap: wrap; gap: 6px; }.cfu-quick-row { flex-wrap: wrap; }.web-editor-tabs button { font-size: 10px; padding: 5px 8px; }.module-batch-row { grid-template-columns: minmax(0,1fr); }
  .year-grid { grid-template-columns: repeat(2,minmax(0,1fr)); overflow-y: auto; }.weekday { font-size: 12px; }.day { min-height: 60px; }.day-number { font-size: 13px; }.day-board-actions { flex-wrap: wrap; }.apple-reminders-status { display: none; }.mind-inspector { display: flex; flex-wrap: wrap; }.mind-inspector textarea { width: 65%; }.planning-link-row { grid-template-columns: minmax(0,1fr); }
  .paperang-workspace { display: block; }.paperang-preview-panel, .paperang-controls { min-width: 0; }.web-save-alert { flex-wrap: wrap; }
}