/*
File: styles.css
Purpose: Styling for the ServiceFab web client.
Author: Yves Metz
Changelog:
- 2026-03-07: Added .login-field--row, .login-field__col, .login-field__section-label, .login-field__optional for LexOffice registration form layout.
- 2026-03-07: Added .sf-analytics-* components for the self-hosted analytics admin dashboard (bar chart, totals, tables).
- 2026-03-07: Added .app-legal-footer component for Impressum/Datenschutz/AGB links on unauthenticated pages (§5 TMG compliance).
- 2026-03-06: iPad layout improvements — stepper tab horizontal scroll on touch (overflow-x fix
  on .workflow-stepper--header), Back/Next bigger font (0.78rem) on all coarse-pointer devices,
  header-actions wrap + chip hide on portrait to give the stepper more room.
- 2026-04-19: Added touch/iPad compatibility CSS: @media (pointer:coarse) block with 44px min-touch-targets for all buttons/tabs/inputs, .touch-pick-active viewport canvas pulse animation, improved workflow sidebar and step tabs for tablet viewports.
- 2026-03-05: Added WeTransfer-style transfer page CSS (dark gradient, centered card, drag-drop zone, progress bar, receipt, responsive), mesh-reduce order badge.
- 2026-03-04: Added loading/empty [hidden] overrides, measure-label is-total variant, toolbar sub-mode + disabled styles.
- 2026-03-06: Added upload-toast, inline-review-toolbar, and inline-review-measure-label styles; increased inline review canvas min-height to 360px.
- 2026-03-04: Replaced review overlay modal with non-intrusive bottom-left toast notification (auto-dismiss after 8s, click to open Order History, slide-in/out animation).
- 2026-03-07: Inspector compact redesign — reduced all inspector spacing (gaps, margins, padding, font sizes), tighter index sidebar, section dividers, and smaller field labels for a denser, tidier panel.
- 2026-03-04: Enterprise Admin Theme — complete visual overhaul of admin sidebar, cards, form fields, toggles, tables, and access control for a world-class professional appearance.
- 2026-03-04: Enterprise Shell 2.0 redesign – unified dark header, uppercase tab-style navigation with active underline, professional Orders data table (uppercase headers, subtle stripe, refined status chips), improved typography (Inter fallback, antialiasing), extended design tokens.
- 2026-03-03: Removed the fixed Orders inbox height clamp so the Orders list is no longer visually limited and can expand to show full content.
- 2026-03-03: Added inline Orders review viewport loading overlay with progress bar so expanded rows show visible loading progress directly in the preview canvas.
- 2026-03-03: Added embedded inline Orders review viewer styling (preview card, canvas host, and empty/loading state) so the 3D model renders directly inside the expanded order row.
- 2026-03-03: Added inline expandable order-row review workflow styling (accordion detail row with summary cards, decision controls, notes, and status) for the Orders page.
- 2026-03-03: Added professional Review Workflow sidebar styling (Paint/Notes/Review nodes, contextual panels, paint action controls) for the Order Review overlay.
- 2026-03-03: Refined Review Viewer toolbar styling to workflow-like grouped controls and conditional Paint control visibility (shown only in Paint mode).
- 2026-03-01: Added intake upload progress styling (per-slot track, animated active bar, percent label) so shared workflow intake can display live upload percentages.
- 2026-02-28: Removed step-navigation/sidebar badge styling after reverting the admin step-based setup UI for a cleaner look.
- 2026-02-28: Added styling for admin setup-flow wizard controls (`Previous`/`Next` + step label) in the Infrastructure navigation group.
- 2026-02-28: Added styling for the Admin navigation "Start here" marker on the Core tab to provide a clear onboarding cue.
- 2026-03-05: Complete WorkflowEditor dark Grasshopper-inspired enterprise theme rewrite — dark canvas, dark panels, color-coded nodes, improved connections, enterprise-grade polish.
- 2026-02-28: Added styling for per-tab admin intro lines and suppressed the intro in workfloweditor fullscreen shell mode.
- 2026-02-28: Added grouped admin sidebar navigation styling (`Infrastructure`/`Operations`/`Governance`) for clearer information architecture and faster scanning.
- 2026-02-27: Workflow runtime: moved the black viewport toast popup to the bottom-left and raised its stacking order so it always appears in the foreground.
- 2026-02-22: Workflow runtime: removed the fixed minimized Uploads handle so Uploads is toggled only via the header button.
- 2026-02-22: Made workflow runtime header more compact by hiding the title/subtitle column and tightening header action button spacing.
- 2026-02-22: Web workflow runtime: footer instruction bar shows only the instructions (no step title) and uses a vertical layout with a larger contain-fit media preview and text underneath.
- 2026-02-22: Web workflow runtime: footer instruction bar now shrink-wraps its content (no full-width background) while keeping a reasonable max width for long text.
- 2026-02-22: Web workflow runtime: when footer media is present, the instruction card width matches the media block (product-image sized) and avoids unused right-side space.
- 2026-02-22: Web workflow runtime: footer instructions visual refinement (single flowing card: no separate media frame; one-line text with ellipsis).
- 2026-02-22: Web workflow runtime: footer instruction text now shows fully (no ellipsis); card can extend wider than the image and the text line scrolls horizontally if needed.
- 2026-02-22: Web workflow runtime: footer instructions now render as two separate overlay cards (media card + text card) for a cleaner layout with no empty background areas.
- 2026-02-22: Web workflow runtime: clicking footer instruction media opens a modal viewer to display the image/video at natural size (clamped to the viewport).
- 2026-02-22: Web workflow runtime: instruction media viewer modal now shows the instruction text under the media.
- 2026-02-22: Web workflow runtime: footer instruction media + text cards now render side-by-side (media left, text right) instead of stacked.
- 2026-02-22: Web workflow runtime: align side-by-side footer instruction text card to the bottom edge of the media card.
- 2026-02-22: Web workflow runtime: moved footer instruction media card to the bottom-right with the text card beside it, and raised the right-side viewport icon column so the media fits below.
- 2026-02-22: Web workflow runtime: lowered the raised right-side viewport icon column slightly to better balance spacing above the footer media.
- 2026-02-22: Web workflow runtime: fixed workflow header button clickability (Close) by ensuring header actions are above the stepper/tabs and the stepper can't overlap into the actions column.
- 2026-02-22: Added compact Uploads header icon styles (cloud-upload title + screen-reader text utility) for a clearer, space-saving workflow overlay.
- 2026-02-22: Anchored the workflow Uploads panel so it stays reachable when switching steps, and positioned the minimized handle above the bottom-right chat toggle.
- 2026-02-22: Moved the minimized Uploads handle to the bottom-left and excluded Uploads from tall-viewport sidebar expansion so it doesn't hide other menus.
- 2026-02-22: Aligned the minimized Uploads handle flush with the left menu edge by reducing its fixed left offset.
- 2026-02-22: Corrected minimized Uploads handle alignment by shifting it right to match the left edge of the workflow menus.
- 2026-02-22: Hid the workflow runtime Login/Logout service status bar (kept markup for future use).
- 2026-02-22: Hid the workflow runtime chat toggle/overlay (kept for future use).
- 2026-02-22: Added compact embedded WorkflowEditor header mode and admin-shell top-bar wrapping so the canvas area is maximized while keeping shortcut chips visible.
- 2026-02-22: WorkflowEditor: made Node Library search full-width by placing it on its own row under the Node Library header.
- 2026-02-22: WorkflowEditor: fixed Node Library list height so the scroll area matches the full height of the A–Z jump index.
- 2026-02-22: WorkflowEditor: expanded the embedded editor shell so library/canvas/inspector fill the viewport and timeline/runtime move below (scroll to reach).
- 2026-02-22: Admin: replaced the large hero/access blocks with a sticky compact top bar (admin key + load/save + navigation + status) and enabled full-width layout.
- 2026-02-22: WorkflowEditor: restored embedded Node Library/Inspector internal scrolling by constraining the shell height to the viewport.
- 2026-02-22: Index: applied the same compact sticky top bar pattern and switched the landing page to full-width.
- 2026-02-22: Web UI: hid the compute Login/Logout widget and the floating chat overlay globally (kept code for future use).
- 2026-02-22: Orders: applied the compact sticky top bar layout (full-width) to match index/admin.
- 2026-02-19: Increased hero logo display to ~3x and reserved hero header space when branding is present so the logo no longer looks lost.
- 2026-02-22: Web UI: added a shared two-row shell header (search + signed-in user, plus an accent nav bar) inspired by Amazon layout using existing design tokens.
- 2026-02-19: Increased hero logo size again (and tightened positioning) after validating public branding on unauthenticated pages.
- 2026-02-22: Web workflow runtime: added separate Menu vs Footer instruction media styling; footer media now overlays above the footer bar (capped) without resizing the footer.
- 2026-02-22: Web workflow runtime: prevent footer instructions/media from looking text-selected (disable user selection) and refine the footer media cap styling to blend with the instruction bar.
- 2026-02-22: Web workflow runtime: render footer media inline (no overlap) and preserve original aspect ratio (contain) with a capped size.
- 2026-02-19: Added a centered viewport overlay style for the Analysis slice viewer (rendered inside the viewport canvas) and reusable slice container styling.
- 2026-02-18: Improved workflow sidebar menu usability on large viewports by letting docked overlay menus flex to fill available height when others are minimized; removed the 40vh/200px height caps for sidebar overlay bodies and upload lists only in that context.
- 2026-02-18: Added tree-style object list styling for ScanSolution uploads (root scan rows + indented child rows with icons and a Latest badge).
- 2026-02-18: Fixed ScanSolution object list layout so child items render beneath the root scan row (stacked) instead of beside it.
- 2026-02-21: Added styling for the Hand Pose Mass Sheet viewport overlay (tabs + compact joint table) using existing overlay-menu primitives.
- 2026-02-21: Hand Pose Mass Sheet: reduced overlay width and tightened table column spacing so it can stay open on the left while keeping the model visible.
- 2026-02-21: Hand Pose Mass Sheet: fixed overlay-menu width override by forcing the sheet overlay width (prevents full-width sheet).
- 2026-02-21: Streamlined Landmarks/Hand Rig/Hand Pose panels by adding compact Advanced (details/summary) styling and constraining the landmark point list height.
- 2026-02-21: Hand Pose Mass Sheet: moved Preview/Approve actions into the top bar and added compact styling for the new action group.
- 2026-02-16: Added Measurements inner protected-region control styling (`Use Inner Protect Region`, status chip) in the vector configuration panel.
- 2026-02-16: Added Measurements vector-region control styling (`Use Trimline Region`, `Clear Region`, status chip) in the vector configuration panel.
- 2026-02-15: Added Vector influence panel styling for anchor-side and radius/length controls in the measurements vector config block.
- 2026-02-15: Added Vector configuration section styling (preset/add/select/save controls) to support adding and saving multiple vectors with landmark/axis selection.
- 2026-02-15: Added operator-focused Vector runtime row styles (abbreviation, current mm, target input) and vector overlay label styling for viewport line annotations.
- 2026-02-15: Refined Measurements/MeasurementSheet visual hierarchy with compact dense table typography, larger effective values area, and cleaner advanced-controls presentation for improved at-a-glance readability.
- 2026-02-15: Fixed non-interactive viewport overlay menus caused by stacking conflicts by raising viewport settings/analysis overlays above workflow sidebar and toolbar layers.
- 2026-02-15: Integrated workflow Undo/Redo into the viewport toolbar beside view controls, added curved-arrow icon treatment, and styled disabled history buttons for clear state feedback.
- 2026-02-15: Aligned collapsed workflow menus flush-left and removed extra collapsed container background so minimized menu chips no longer show a second backing surface.
- 2026-02-15: Updated collapsed workflow node styling to show compact arrow+title chips (instead of unlabeled arrows) for clear identification when multiple nodes are minimized.
- 2026-02-15: Changed collapsed workflow overlay menus to an arrow-only compact handle so minimizing leaves only a MeasurementSheet-style reopen arrow.
- 2026-02-15: Repositioned viewport info badges (`Active Scan` and `Viewport Status`) to the top-right corner for cleaner alignment with the new left-side menu design.
- 2026-02-15: Switched workflow runtime to a global left-side overlay menu system (instead of fixed right sidebar) with existing hide/show toggle behavior.
- 2026-02-15: Repositioned MeasurementSheet overlay and reopen handle to the left viewport side and enforced a larger always-visible table area for immediate measurement visibility.
- 2026-02-15: Added styling for a right-edge MeasurementSheet overlay reopen handle shown when the panel is hidden.
- 2026-02-15: Added MeasurementSheet focus layout that hides the right sidebar in measurements mode and anchors a slim integrated control+values overlay on the viewport right edge.
- 2026-02-15: Reduced MeasurementSheet viewport overlay width and introduced dense compact table styling with near-full-height layout for showing significantly more values at once.
- 2026-02-15: Added a dedicated viewport MeasurementSheet results overlay panel (outside the right tools sidebar) with scroll-safe full-list editing styles.
- 2026-02-15: Increased Measurement overlay table height budget with internal scrolling so full MeasurementSheet value lists remain accessible inside the viewport menu.
- 2026-02-14: Increased right-side viewport tools stacking above floating chat/widgets to prevent lower secondary icon click interception by overlay controls.
- 2026-02-14: Raised the lower right secondary viewport icon group above overlay layers and forced button-level pointer/touch interaction to prevent dead icon clicks.
- 2026-02-14: Raised right viewport tools stacking order and explicitly enabled pointer events on the secondary icon group so lower viewport icon clicks remain reliable.
- 2026-02-14: Added full WorkflowEditor Help Center modal styling (tabbed reference layout, schema tables, and troubleshooting cards) for in-app documentation.
- 2026-02-14: Added WorkflowEditor compact More-actions dropdown and keyboard shortcut hint strip for faster expert usage without removing actions.
- 2026-02-22: Refined WorkflowEditor toolbar sizing consistency and upgraded Node Library UI with a grouped list and A–Z index for faster navigation.
- 2026-02-22: Fixed WorkflowEditor Node Library scrolling in normal mode by making the library list a flex row with a constrained scroll container (stable visible scrollbar).
- 2026-02-22: Ensured WorkflowEditor Node Library scroll works in non-fullscreen mode by clamping the list viewport height to the window height.
- 2026-02-14: Refined WorkflowEditor header usability with grouped toolbar layout, section surfaces, and responsive action wrapping for clearer non-destructive admin editing flow.
- 2026-02-20: Reduced landmark list typography and added selected-row styling for manual landmark adjustment.
- 2026-02-14: Added shared intake hero media styling so selected product images can be displayed on the unified intake page.
- 2026-02-14: Upgraded order upload dialog styling with structured transfer/detail sections, improved checkbox rows, and a clearer progress bar with percentage readout.
- 2026-02-14: Added pending-required Landmark row styling in workflow runtime so required labels are visible before points are picked and next required points are visually clear.
- 2026-02-14: Changed WorkflowEditor Landmark preset auto-builder row layout to vertical stacked fields with labels for clearer JSON-authoring UX.
- 2026-02-14: Fixed chat overlay click blocking by disabling pointer events on the chat root container and enabling them only on the chat toggle/panel.
- 2026-02-14: Added WorkflowEditor landmark preset auto-builder styling so custom preset title/point-list editing works without manual JSON authoring.
- 2026-02-14: Added tiny plane-vs-axis accent variants for WorkflowEditor Align quick preset buttons so preset groups are visually distinguishable at a glance.
- 2026-02-14: Added WorkflowEditor inspector schema-action icon button styling for Align quick presets to improve scanability of axis/plane mapping choices.
- 2026-02-14: Made WorkflowEditor flow canvas stretch to the full center-column height so it matches the node-library panel height for easier node placement without forced upward panning.
- 2026-02-14: Added subtle WorkflowEditor inspector hint emphasis styling (icon badge + soft accent surface) for schema hint text visibility.
- 2026-02-14: Added large workflow info popup modal styling (media-rich body, responsive sizing, and scroll-safe content) for inter-step `workflow.info` popup mode.
- 2026-02-14: Redesigned admin UI styling with a professional backend look (structured side navigation, refined cards/forms/tables, and clearer visual hierarchy).
- 2026-02-14: Updated WorkflowEditor node library sizing to use full available panel height and only show scrollbars when viewport space is insufficient.
- 2026-02-14: Switched WorkflowEditor inspector port editor rows to a vertical stacked layout to avoid cramped side-by-side field overlap.
- 2026-02-14: Added WorkflowEditor optional Preview/Runtime panel toggle styling and expanded-canvas mode when both panels are disabled.
- 2026-02-14: Restored GH mesh selector to compact dropdown styling and removed upload-card option layout styles.
- 2026-02-14: Styled GH mesh selection as upload-like option cards with matching swatch colors and active-state visuals.
- 2026-02-14: Added GH mesh selector color-marker styling to mirror upload list mesh colors.
- 2026-02-14: Added GH runtime step progress bar styling for visible Grasshopper execution feedback in workflow runtime panels.
- 2026-02-14: Ensured WorkflowEditor runtime progress overlay respects hidden state to display GH/workflow progress reliably.
- 2026-02-14: Styled workflow instruction video media for info-step runtime guidance panels.
- 2026-02-14: Added workflow instruction image and info-step panel styling for customizable per-step guidance media.
- 2026-02-13: Added runtime GH step form styles for parameter editing, manual run, and auto-run toggle.
- 2026-02-13: Added checkbox-grid styling for admin Grasshopper role access controls.
- 2026-02-13: Added centered runtime progress overlay styling for WorkflowEditor Grasshopper runs.
- 2026-02-13: Added WorkflowEditor node action button styling.
- 2026-02-13: Limited orders overview table height and enabled scrolling.
- 2026-02-13: Added docked review viewer styling for orders overview.
- 2026-02-13: Added reply summary styling for the orders overview table.
- 2026-02-12: Added review viewer modal layout and annotation styling.
- 2026-02-12: Unified viewport settings and transform controls in one overlay menu.
- 2026-02-12: Repositioned the transform overlay menu to the left-middle of the viewport.
- 2026-02-12: Added dock toggle styling for viewport overlay menus.
- 2026-02-12: Refined viewport overlay menu styling for better integration.
- 2026-02-12: Added transform gizmo mode toggle styling.
- 2026-02-12: Added slider hover labels and a collapsed toolbar state.
- 2026-02-12: Added tooltip styling and responsive layout for the viewport toolbar.
- 2026-02-12: Added top viewport toolbar styling for sculpt and view controls.
- 2026-02-12: Added sculpt mode button styling in the viewport overlay.
- 2026-02-12: Added styling for the always-on sculpt overlay menu.
- 2026-02-12: Added left-side viewport view button styling.
- 2026-02-12: Added styling for upload send selection toggles.
- 2026-02-12: Added measurement table and label overlay styling.
- 2026-02-12: Forced viewer canvases to fill their containers.
- 2026-02-12: Added viewer debug overlay action styling.
- 2026-02-12: Added styling for the workflow viewer debug overlay.
- 2026-02-12: Styled multi-viewport loading status badges.
- 2026-02-12: Allowed uploads list to shrink for reliable scrolling.
- 2026-02-12: Adjusted product card images to fit without cropping.
- 2026-02-12: Added workflow product image upload layout styling.
- 2026-02-12: Added guided access control layout styles for admin rules.
- 2026-02-12: Added grouped upload list styling for derived items.
- 2026-02-10: Added preview edit palette styling for fullscreen layout edits.
- 2026-02-10: Added preview inspector styling for fullscreen layout edits.
- 2026-02-10: Added real layout snap guide styling for preview edit mode.
- 2026-02-10: Ensured nodes sit above connection overlay for port clicks.
- 2026-02-10: Styled workflow node port/link buttons for clarity.
- 2026-02-10: Added floating chat overlay styling for web UI.
- 2026-02-10: Added chat mic button and disabled mode styles.
- 2026-02-10: Added chat mic hint styling.
- 2026-02-10: Added preview snapshot styling for real layout editing.
- 2026-02-10: Styled runtime element overlays in the WorkflowEditor real layout view.
- 2026-02-10: Added product card image styling for workflow catalog.
- 2026-02-10: Adjusted real preview panel to overlay the runtime iframe.
- 2026-02-10: Styled editable real layout items for the WorkflowEditor.
- 2026-02-10: Added real layout preview styling for the WorkflowEditor.
- 2026-02-10: Added detail panel styles for workflow layout items.
- 2026-02-10: Added workflow manager table styling and runtime layout container styles.
- 2026-02-10: Added fullscreen styling for WorkflowEditor panels.
- 2026-02-10: Restored WorkflowEditor preview sizing and iframe styling.
- 2026-02-10: Fixed WorkflowEditor inspector list CSS block termination.
- 2026-02-09: Added WorkflowEditor runtime panel styling.
- 2026-02-09: Tuned WorkflowEditor preview panel and layout element styling.
- 2026-02-09: Added preview panel layout styling for WorkflowEditor.
- 2026-02-09: Styled WorkflowEditor node link buttons and preview status widgets.
- 2026-02-09: Added WorkflowEditor layout editor and preview styling.
- 2026-02-09: Styled WorkflowEditor inspector actions and connections list.
- 2026-02-09: Added WorkflowEditor connection port styling.
- 2026-02-09: Added WorkflowEditor canvas zoom/pan affordances.
- 2026-02-09: Expanded WorkflowEditor layout and enabled canvas wires/drag styling.
- 2026-02-09: Added WorkflowEditor timeline row styling.
- 2026-02-09: Ensure WorkflowEditor guard respects the hidden attribute.
- 2026-02-09: Added WorkflowEditor layout and canvas styling.
- 2026-02-09: Fixed orders inbox styles placement and restored admin CSS blocks.
- 2026-02-09: Added orders inbox table styling to match the samples layout.
- 2026-02-09: Styled grouped order upload rows with inline actions.
- 2026-02-08: Styled grouped order review status chips.
- 2026-02-08: Added grouped order history row styles.
- 2026-02-08: Added left-side admin tab layout styling.
- 2026-02-08: Styled order history customer filter input.
- 2026-02-08: Styled access rules JSON cards.
- 2026-02-08: Styled admin table filters and license manager detail sections.
- 2026-02-08: Added registration request detail row and action styles.
- 2026-02-08: Added warning chip styling for license manager statuses.
- 2026-02-08: Added login button row styling.
- 2026-02-08: Added stacked registration form layout.
- 2026-02-08: Aligned colors and typography to the provided admin style.
- 2026-02-08: Tuned palette to a neutral Ossur-style slate tone.
- 2026-02-08: Updated web UI palette and typography to match Ossur styling.
- 2026-02-08: Styled order detail modal decision section.
- 2026-02-08: Strengthened order history status colors and modal layout.
- 2026-02-07: Added compute auth mode card styling.
- 2026-02-07: Added upload debug console styling.
- 2026-02-07: Added chip selector styles for admin field lists.
- 2026-02-07: Added locked admin settings styling.
- 2026-02-07: Added order history detail panel styling.
- 2026-02-07: Added modal styles for order upload dialog.
- 2026-02-07: Added admin compute status row styling.
- 2026-02-07: Added admin settings page styling.
- 2026-02-07: Added landmark label list styling.
- 2026-02-07: Added viewport active scan overlay styling.
- 2026-02-07: Added trimline manual start/finish accent styles.
- 2026-02-07: Restored single-row workflow stepper layout with horizontal scrolling.
- 2026-02-07: Rebalanced workflow columns to widen the viewport while keeping sidebar width.
- 2026-02-07: Expanded prep/uploads panel width further.
- 2026-02-07: Reduced viewport width so sidebar menus stay within the window.
- 2026-02-07: Widened workflow sidebar panels for prep and uploads.
- 2026-02-07: Expanded workflow panel width for a wider viewport.
- 2026-02-07: Further widened the viewport by rebalancing panel columns.
- 2026-02-07: Widened workflow panel and right sidebar for more viewport space.
- 2026-02-07: Added viewport status styling.
- 2026-02-07: Added multi-viewport maximize controls and count header layout.
- 2026-02-07: Raised overlay menus above the footer instructions bar.
- 2026-02-07: Centered header stepper and enabled wrapping rows.
- 2026-02-07: Styled stepper row layout and transform gizmo overlay menu.
- 2026-02-07: Kept workflow stepper visible above multi-viewport layout.
- 2026-02-06: Initial creation.
- 2026-02-06: Added product grid styles for quick selection.
- 2026-02-06: Added viewport panel styling for WebGL viewer.
- 2026-02-06: Added workflow mode styling for full-size viewport.
- 2026-02-06: Added workflow overlay styles for the viewer.
- 2026-02-06: Constrained overlay layout to prevent canvas overflow.
- 2026-02-06: Added overlay tool panel styling for alignment scaffolding.
- 2026-02-06: Added align-to-plane point list styling and light viewport colors.
- 2026-02-06: Added active button styling for picking controls.
- 2026-02-06: Added workflow step tabs and navigation styling.
- 2026-02-06: Increased workflow overlay size.
- 2026-02-06: Positioned workflow stepper over the viewport.
- 2026-02-06: Positioned workflow stepper between header and viewport.
- 2026-02-06: Added collapsible overlay menu styling.
- 2026-02-06: Reduced workflow stepper and sidebar width for more viewport.
- 2026-02-06: Placed workflow stepper over the viewport.
- 2026-02-06: Removed workflow stepper background panel.
- 2026-02-06: Added viewport instruction overlay styling.
- 2026-02-06: Adjusted stepper layout for prep step.
- 2026-02-06: Added prep mesh control value styling.
- 2026-02-06: Added viewport icon button styling for crop tools.
- 2026-02-06: Adjusted crop overlay placement and selection rectangle styling.
- 2026-02-06: Added mesh appearance overlay menu styling.
- 2026-02-06: Added order history table styling for web overview.
- 2026-02-06: Added lasso overlay styling for crop selection.
- 2026-02-06: Improved lasso visibility in the viewport.
- 2026-02-06: Added selection toggle placement styling.
- 2026-02-06: Grouped viewer tool buttons on the right.
- 2026-02-06: Added mesh analysis overlay styling.
- 2026-02-06: Added collapsible shrinkwrap settings styling.
- 2026-02-06: Reduced workflow step tab sizing.
- 2026-02-06: Forced advanced panel hidden state.
- 2026-02-06: Reduced workflow step navigation button sizing.
- 2026-02-06: Added ScanSolution intake panel styling.
- 2026-02-06: Added compact upload list styling with remove action.
- 2026-02-06: Added upload color swatches and hidden picker input.
- 2026-02-06: Added viewport toast styling and upload row click affordance.
- 2026-02-06: Highlighted active upload row with scan color.
- 2026-02-06: Enlarged workflow overlay and added collapsible sidebar.
- 2026-02-06: Added active scan display styling and centered align controls.
- 2026-02-06: Added 3D service status indicator styling.
- 2026-02-06: Added service status login/logout button styling.
- 2026-02-06: Added multi-viewport and upload visibility styling.
*/

:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --bg-alt: #f3f6fb;
  --ink: #1b2b3a;
  --muted: #5d6b7a;
  --accent: #1e6fd9;
  --accent-strong: #1b5fc0;
  --accent-soft: #e6f0ff;
  --border: #dfe6ef;
  --shadow: rgba(16, 33, 50, 0.06);
  --panel: #ffffff;
  --chip: #f3f6fb;
  --code: #1b2b3a;
  --ok: #1b8f5a;
  --warn: #d99b00;
  --alert: #c23b3b;
  font-size: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #f7f9fc;
  color: var(--ink);
  min-height: 100vh;
}

/* Shared shell header (Amazon-like): top row for identity/search/user, second row for nav links. */
.sf-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 18px var(--shadow);
}

.sf-header__left,
.sf-header__center,
.sf-header__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sf-header__left {
  flex: 0 0 auto;
}

.sf-header__center {
  flex: 1 1 auto;
  justify-content: center;
}

.sf-header__right {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.sf-header__logo {
  height: 28px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.sf-header__title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
}

.sf-header__search {
  width: min(720px, 52vw);
}

.sf-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 18px var(--shadow);
}

.sf-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
}

.sf-nav__link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.sf-nav__link.is-active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.28);
}

.sf-nav__spacer {
  flex: 1 1 auto;
}

@media (max-width: 900px) {
  .sf-header__top {
    flex-wrap: wrap;
  }
  .sf-header__center {
    order: 3;
    width: 100%;
    justify-content: stretch;
  }
  .sf-header__search {
    width: 100%;
  }
  .sf-nav {
    flex-wrap: wrap;
  }
}

/* ── WorkflowEditor Page – Enterprise Dark Theme (Grasshopper-inspired) ── */
/* Keep nav + action toolbar on a single row; allow horizontal scroll instead of wrapping. */
body.workfloweditor-page .sf-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

body.workfloweditor-page .sf-nav__tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

body.workfloweditor-page .sf-nav__divider {
  width: 1px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

body.workfloweditor-page .sf-nav__tools .button,
body.workfloweditor-page .sf-nav__tools summary.button {
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.16s ease;
}

body.workfloweditor-page .sf-nav__tools .button:hover,
body.workfloweditor-page .sf-nav__tools summary.button:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

body.workfloweditor-page .sf-nav__tools .button:not(.button--ghost) {
  background: rgba(59, 130, 246, 0.35);
  border-color: rgba(59, 130, 246, 0.45);
  color: #ffffff;
  font-weight: 700;
}

body.workfloweditor-page .sf-nav__tools .button:not(.button--ghost):hover {
  background: rgba(59, 130, 246, 0.5);
}

body.workfloweditor-page .sf-nav__tools .chip {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
}

body.workfloweditor-page .sf-nav__tools .workfloweditor-toolbar__status {
  margin-left: 0;
}

body.workfloweditor-embedded .workfloweditor-nav-tools {

  display: none;
}

/* Web UI currently does not need the manual compute Login/Logout controls.
   Keep them in markup for future use, but hide globally to reduce UI clutter. */
.service-status-bar {
  display: none !important;
}

/* Chat overlay is planned for later; hide globally for now to keep the UI focused. */
.servicefab-chat {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.service-status-bar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.16);
  z-index: 60;
}

.service-status {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #9aa6b2;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(16, 33, 50, 0.12);
}

.service-status.is-online {
  background: var(--ok);
}

.service-status-button {
  appearance: none;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-status-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(16, 14, 10, 0.15);
}

.service-status-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.measurement-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  max-height: min(42vh, 420px);
  overflow-y: auto;
}

.measurement-table--overlay {
  max-height: none;
  flex: 1;
  overflow-y: auto;
  min-height: min(62vh, 640px);
}

.measurement-table--overlay table {
  table-layout: fixed;
  font-size: 0.63rem;
}

.measurement-table--overlay th,
.measurement-table--overlay td {
  padding: 2px 4px;
  line-height: 1.2;
}

.measurement-table--overlay input {
  padding: 3px 5px;
  min-height: 22px;
  font-size: 0.7rem;
}

.measurement-table--overlay th:nth-child(1),
.measurement-table--overlay td:nth-child(1),
.measurement-table--overlay th:nth-child(2),
.measurement-table--overlay td:nth-child(2) {
  width: 22%;
}

.measurement-table--overlay th:nth-child(3),
.measurement-table--overlay td:nth-child(3),
.measurement-table--overlay th:nth-child(4),
.measurement-table--overlay td:nth-child(4) {
  width: 28%;
}

.measurement-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.measurement-table th,
.measurement-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.measurement-table tbody tr.is-active {
  background: var(--accent-soft);
}

.measurement-table input {
  width: 100%;
}

.measurement-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.measurement-labels.is-visible {
  display: block;
}

.measurement-label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(23, 35, 52, 0.86);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.measurement-label--vector {
  background: color-mix(in srgb, var(--accent) 28%, var(--surface));
  border: 1px solid var(--border-strong);
}

.measurement-vector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.measurement-vector-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
}

.measurement-vector-abbr {
  min-width: 44px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  padding: 2px 8px;
}

.measurement-vector-name {
  min-width: 0;
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.measurement-vector-current {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.measurement-vector-target {
  width: 96px;
}

.measurement-vector-config {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.measurement-vector-config .overlay-menu__row--split {
  align-items: end;
  gap: 8px;
}

.measurement-vector-config #measurementAxisVectorPanel,
.measurement-vector-config #measurementAxisLandmarkPanel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.measurement-vector-config #measurementAxisLandmarkPanel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.measurement-vector-config #measurementVectorInfluencePanel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.measurement-vector-config #measurementVectorRegionPanel {
  align-items: center;
}

.measurement-vector-config #measurementVectorRegionStatus {
  width: fit-content;
}

.measurement-vector-config #measurementVectorProtectedRegionPanel {
  align-items: center;
}

.measurement-vector-config #measurementVectorProtectedRegionStatus {
  width: fit-content;
}

.measurement-results-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  width: clamp(340px, 30vw, 440px);
  max-width: calc(100% - 28px);
  height: calc(100% - 28px);
  max-height: none;
  z-index: 8;
  pointer-events: auto;
}

.measurement-results-overlay.overlay-menu {
  width: clamp(340px, 30vw, 440px) !important;
}

.measurement-results-overlay[hidden] {
  display: none !important;
}

.measurement-results-overlay .overlay-menu__body {
  max-height: none;
  flex: 1;
  min-height: 0;
  padding: 7px 8px 8px;
  gap: 6px;
}

.measurement-results-overlay .overlay-menu__header {
  padding: 7px 8px;
}

.measurement-results-overlay .overlay-menu__header h3 {
  font-size: 0.86rem;
}

.measurement-results-overlay .overlay-menu__body label {
  font-size: 0.72rem;
  gap: 3px;
}

.measurement-results-overlay .overlay-menu__body select,
.measurement-results-overlay .overlay-menu__body input {
  padding: 5px 6px;
  font-size: 0.72rem;
}

.measurement-results-overlay .overlay-menu__section {
  gap: 5px;
}

.measurement-overlay-show {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  z-index: 9;
  min-width: 30px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}

.measurement-overlay-show[hidden] {
  display: none !important;
}

.hand-pose-sheet-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  width: clamp(320px, 26vw, 420px);
  max-width: calc(100% - 28px);
  height: calc(100% - 28px);
  max-height: none;
  z-index: 8;
  pointer-events: auto;
}

.hand-pose-sheet-overlay[hidden] {
  display: none !important;
}

.hand-pose-sheet-overlay .overlay-menu__body {
  max-height: none;
  flex: 1;
  min-height: 0;
  padding: 7px 8px 8px;
  gap: 8px;
}

.hand-pose-sheet-overlay .overlay-menu__header {
  padding: 7px 8px;
}

.hand-pose-sheet-overlay .overlay-menu__header h3 {
  font-size: 0.86rem;
}

.hand-pose-sheet-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.hand-pose-sheet-tabs .button {
  padding: 5px 8px;
  font-size: 0.74rem;
}

.hand-pose-sheet-tabs .button.is-active {
  border-color: var(--accent);
}

.hand-pose-sheet-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hand-pose-sheet-actions .button {
  padding: 5px 8px;
  font-size: 0.74rem;
}

.hand-pose-sheet-table {
  min-height: min(56vh, 560px);
}

.hand-pose-sheet-table table {
  table-layout: fixed;
  font-size: 0.66rem;
}

.hand-pose-sheet-table th,
.hand-pose-sheet-table td {
  padding: 3px 4px;
  line-height: 1.2;
}

.hand-pose-sheet-table input {
  padding: 3px 5px;
  min-height: 22px;
  font-size: 0.7rem;
}

.hand-pose-sheet-table th:nth-child(1),
.hand-pose-sheet-table td:nth-child(1) {
  width: 44%;
}

.hand-pose-sheet-table th:nth-child(2),
.hand-pose-sheet-table td:nth-child(2),
.hand-pose-sheet-table th:nth-child(3),
.hand-pose-sheet-table td:nth-child(3) {
  width: 28%;
}

.hand-pose-sheet-group-row td {
  font-weight: 700;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.03);
}

.workflow-overlay.is-measurements-focus .workflow-overlay__body {
  grid-template-columns: minmax(0, 1fr);
}

.workflow-overlay.is-measurements-focus .viewer__sidebar {
  display: none;
}

.service-status-button--ghost {
  background: transparent;
}

body.workflow-active {
  overflow: hidden;
}

.layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.index-page .layout {
  max-width: none;
  width: 100%;
  padding: 16px 16px 40px;
  gap: 16px;
}

body.orders-page .layout {
  max-width: none;
  width: 100%;
  padding: 16px 16px 40px;
  gap: 16px;
}

.hero {
  background: linear-gradient(135deg, #ffffff 0%, #f3f6fb 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 18px 32px var(--shadow);
  position: relative;
  overflow: hidden;
}

.hero:has(.js-brand-logo:not([hidden])) {
  padding-right: clamp(26px, calc(26px + 38vw), 560px);
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 6px;
  background: var(--accent);
  border-bottom-left-radius: 12px;
}

.hero__logo {
  position: absolute;
  top: 12px;
  right: 16px;
  height: 120px;
  width: auto;
  max-width: min(560px, 62vw);
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 10px 18px var(--shadow);
}

@media (max-width: 560px) {
  .hero:has(.js-brand-logo:not([hidden])) {
    padding-right: 26px;
    padding-top: 120px;
  }

  .hero__logo {
    height: 96px;
    top: 12px;
    right: 12px;
    max-width: min(520px, 86vw);
  }
}

.hero h1 {
  font-size: 2.1rem;
  margin-bottom: 8px;
}

.hero p {
  color: var(--muted);
  margin-bottom: 16px;
}

.hero__badge {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.hero__row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.intake-hero-media {
  margin: 8px 0 14px;
  width: min(100%, 420px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px var(--shadow);
  overflow: hidden;
}

.intake-hero-media__image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #ffffff;
}

.panel {
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: 0 12px 24px var(--shadow);
}

.panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panel__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.panel__header--sub {
  margin-top: 18px;
  margin-bottom: 12px;
}

/* ────────────────────────────────────────────────────────
   Admin Enterprise Theme — World-class control center
   ──────────────────────────────────────────────────────── */

.admin-layout {
  max-width: none;
  width: 100%;
  padding: 0;
  gap: 0;
}

.admin-backend {
  background: #f1f5f9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.admin-backend__layout {
  gap: 0;
}

/* ── Legacy topbar (superseded by sf-header) ────────── */
.admin-topbar,
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 18px var(--shadow);
}

.admin-topbar__left,
.admin-topbar__center,
.admin-topbar__right,
.app-topbar__left,
.app-topbar__center,
.app-topbar__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-topbar__left,
.app-topbar__left { flex: 0 0 auto; }

.admin-topbar__center,
.app-topbar__center { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }

.admin-topbar__right,
.app-topbar__right { flex: 0 0 auto; justify-content: flex-end; }

.admin-topbar__key { width: min(420px, 42vw); }

.admin-topbar__logo,
.app-topbar__logo {
  height: 28px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.app-topbar__title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}

body.index-page .service-status-bar {
  position: static;
  right: auto;
  bottom: auto;
  transform: none;
  box-shadow: none;
  padding: 0;
}

/* ── Legacy hero blocks (no longer rendered) ────────── */
.admin-hero {
  border-radius: 10px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px var(--shadow);
}

.admin-hero h1 { font-size: 1.8rem; margin-bottom: 6px; }

.admin-hero .hero__badge {
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-access-panel {
  border-radius: 10px;
  box-shadow: 0 8px 20px var(--shadow);
}

/* ── Admin Settings Container ────────────────────────── */
.admin-settings--tabs {
  display: block;
}

/* ── Admin Shell (sidebar + content) ─────────────────── */
.admin-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 97px);
}

/* ── Sidebar Navigation ──────────────────────────────── */
.admin-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg, #0f172a 0%, #162033 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px 14px 32px;
  position: sticky;
  top: 97px;
  height: calc(100vh - 97px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.admin-tabs::-webkit-scrollbar { width: 4px; }
.admin-tabs::-webkit-scrollbar-track { background: transparent; }
.admin-tabs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }

.admin-tabs__title {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 12px 16px;
}

.admin-tabs__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.admin-tabs__group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.admin-tabs__group-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px 8px;
  margin-bottom: 2px;
}

.admin-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

.admin-tab.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.admin-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-tab__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.65;
}

.admin-tab.is-active .admin-tab__icon {
  opacity: 1;
}

/* ── Content Panel Area ──────────────────────────────── */
.admin-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 28px 36px 48px;
  background: #f1f5f9;
}

.admin-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.admin-panel-intro {
  margin: 0 0 4px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: rgba(59, 130, 246, 0.05);
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.55;
  font-weight: 500;
}

.admin-panel.is-active {
  display: flex;
}

/* ── WorkflowEditor Embed ────────────────────────────── */
.admin-workfloweditor__frame {
  width: 100%;
  height: clamp(520px, calc(100vh - 320px), 980px);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

/* Fullscreen admin shell mode for embedded WorkflowEditor */
body.admin-route--workfloweditor { overflow: hidden; }
body.admin-route--workfloweditor .admin-topbar { display: none; }

body.admin-route--workfloweditor .admin-hero,
body.admin-route--workfloweditor .admin-access-panel,
body.admin-route--workfloweditor .admin-tabs { display: none; }

body.admin-route--workfloweditor .admin-layout.admin-backend__layout {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.admin-route--workfloweditor .admin-settings--tabs { margin-top: 0; }
body.admin-route--workfloweditor .admin-shell { display: block; }
body.admin-route--workfloweditor .admin-panels { gap: 0; padding: 0; }
body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] { display: flex; }
body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] .admin-panel-intro { display: none; }

body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] .panel {
  position: fixed;
  inset: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] .panel__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] .panel__header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] .admin-workfloweditor__actions .button {
  padding: 6px 10px;
  font-size: 0.78rem;
  border-radius: 10px;
}

body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] .panel__hint { display: none; }

body.admin-route--workfloweditor .admin-panel[data-tab-panel="workfloweditor"] iframe.admin-workfloweditor__frame {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border: none;
  border-radius: 0;
}

/* ── Grid / Form Layout ──────────────────────────────── */
.admin-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: end;
}

.form-stack {
  display: grid;
  gap: 14px;
  max-width: 520px;
}

.admin-grid--inline {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: center;
}

.admin-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin-settings.is-locked {
  display: none;
}

/* ── Responsive Sidebar ──────────────────────────────── */
@media (max-width: 1024px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-tabs {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    background: #0f172a;
    border-right: none;
    border-radius: 12px;
    padding: 12px;
    margin: 12px 16px 0;
  }

  .admin-tabs__group {
    display: contents;
    border-top: 0;
    padding: 0;
  }

  .admin-tabs__title,
  .admin-tabs__group-label { display: none; }

  .admin-tab {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-size: 0.8rem;
    border-radius: 6px;
  }

  .admin-tab.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }

  .admin-tab__icon { display: none; }

  .admin-panels { padding: 16px; }
}

/* ── Form Fields ─────────────────────────────────────── */
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #64748b;
  font-size: 0.82rem;
}

.admin-field label {
  letter-spacing: 0.01em;
}

.admin-input,
.admin-textarea {
  width: 100%;
  padding: 10px 13px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-input:hover,
.admin-textarea:hover {
  border-color: #cbd5e1;
}

.admin-input:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.admin-textarea {
  min-height: 120px;
  resize: vertical;
  font-weight: 500;
}

.admin-hint {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.5;
}

.admin-toggle {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.admin-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 12px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.admin-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.admin-toggle input[type="checkbox"]:checked {
  background: var(--accent);
}

.admin-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

.admin-input--compact {
  min-width: 200px;
  padding: 7px 11px;
  font-size: 0.8rem;
}

.admin-image-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-image-upload {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-input--file {
  min-width: 180px;
  padding: 4px 6px;
  font-size: 0.75rem;
}

/* ── Admin Chip List (chat modes, etc.) ──────────────── */
.admin-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.admin-chip:has(input:checked) {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent-strong);
}

.admin-chip input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ── Lists ───────────────────────────────────────────── */
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-list__item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-list__meta {
  font-size: 0.75rem;
  color: #94a3b8;
}

.admin-list__actions {
  display: inline-flex;
  gap: 8px;
}

.admin-list__empty {
  padding: 24px;
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
  color: #94a3b8;
  font-size: 0.85rem;
  text-align: center;
}

/* ── Tables ──────────────────────────────────────────── */
.admin-table-wrapper {
  width: 100%;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

.admin-table th,
.admin-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.82rem;
  text-align: left;
}

.admin-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  border-bottom: 1px solid #e2e8f0;
}

.admin-table tbody tr:hover {
  background: #f8fafc;
}

/* ── Content Cards ───────────────────────────────────── */
.admin-panel .panel {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 22px 26px;
  background: #ffffff;
  transition: box-shadow 0.2s ease;
}

.admin-panel .panel:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.admin-panel .panel__header {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.admin-panel .panel__header h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.admin-status-row {
  border-top: 1px solid #e2e8f0;
  margin-top: 16px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.admin-table__center {
  text-align: center;
}

.admin-table__empty {
  text-align: center;
  color: #94a3b8;
  padding: 24px;
  font-size: 0.85rem;
}


.gh-role-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gh-role-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.gh-role-option input {
  margin: 0;
}

.order-history-filter {
  min-width: 200px;
}

.orders-inbox {
  margin-top: 12px;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th,
.orders-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  text-align: left;
}

.orders-table thead th {
  font-weight: 600;
  color: #556070;
  position: sticky;
  top: 0;
  background: var(--bg-alt);
  z-index: 1;
}

.orders-table tr:hover {
  background: #f0f6ff;
  cursor: pointer;
}

.orders-table tr.orders-inline-detail-row:hover {
  background: transparent;
  cursor: default;
}

.orders-inline-detail-cell {
  padding: 0;
  border-bottom: none;
}

.orders-inline-detail {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  margin: 6px 8px 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 12px;
}

.orders-inline-detail__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.orders-inline-review {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.orders-inline-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
}

.orders-inline-review__canvas {
  position: relative;
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f3f2ee;
  overflow: hidden;
}

.orders-inline-review__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  background: color-mix(in srgb, var(--bg-alt) 72%, transparent);
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.orders-inline-review__loading[hidden] {
  display: none !important;
}

.orders-inline-review__loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.orders-inline-review__loading-card {
  width: min(360px, calc(100% - 32px));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.orders-inline-review__loading-label {
  font-size: 0.84rem;
  color: var(--ink);
}

.orders-inline-review__loading-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}

.orders-inline-review__loading-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.24s ease;
}

.orders-inline-review__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.orders-inline-review__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}

.orders-inline-review__empty[hidden] {
  display: none !important;
  z-index: 1;
}

.orders-inline-detail__actions {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.orders-inline-detail__notes textarea {
  min-height: 78px;
}

.orders-inline-detail__status-row {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .orders-inline-detail {
    grid-template-columns: 1fr;
  }
}

.history-reply {
  margin-top: 6px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

.history-reply__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-reply__file {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 0.75rem;
}

.row-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.row-ok {
  background: rgba(27, 143, 90, 0.08);
}

.row-warn {
  background: rgba(217, 155, 0, 0.12);
}

.row-alert {
  background: rgba(194, 59, 59, 0.12);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-ok {
  background: rgba(27, 143, 90, 0.15);
  color: var(--ok);
}

.status-warn {
  background: rgba(217, 155, 0, 0.2);
  color: var(--warn);
}

.status-alert {
  background: rgba(194, 59, 59, 0.2);
  color: var(--alert);
}

/* ── JSON Cards ──────────────────────────────────────── */
.json-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.json-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s ease;
}

.json-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.json-card__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.json-card__header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 2px;
  color: #0f172a;
}

.json-card__header p {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}

.json-card__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.json-card__actions label {
  font-weight: 600;
  color: #94a3b8;
}

/* ── Access Control ──────────────────────────────────── */
.access-control {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.access-control__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  background: #f8fafc;
}

.access-control__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.access-control__list-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.access-control__item {
  appearance: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  text-align: left;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.access-control__item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.access-control__item.is-active {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.06);
  color: var(--accent-strong);
}

.access-control__item.is-muted {
  opacity: 0.55;
}

.access-control__editor {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.access-control__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.access-control__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: end;
}

.access-control__section h4 {
  margin-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.access-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.access-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.access-toggle:hover {
  border-color: #cbd5e1;
}

.access-toggle input {
  accent-color: var(--accent);
}

.access-toggle input:disabled + span {
  opacity: 0.5;
}

.access-control__empty {
  padding: 16px;
  border-radius: 10px;
  border: 1px dashed #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.85rem;
  text-align: center;
}

.access-advanced {
  margin-top: 16px;
}

.access-advanced summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
  font-size: 0.88rem;
}

@media (max-width: 960px) {
  .access-control {
    grid-template-columns: 1fr;
  }
}

.admin-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}


/* =====================================================================
   WorkflowEditor – Dark Grasshopper-inspired Enterprise Theme
   Purpose: Professional dark-canvas node editor matching admin enterprise
            design language. Inspired by Grasshopper's charcoal workspace,
            color-coded components, and dense professional IDE feel.
   Author: Yves Metz
   Changelog:
   - 2026-03-05: Complete dark-theme rewrite — dark canvas, dark panels,
                  color-coded nodes, improved connection wires, Grasshopper
                  density, enterprise-grade polish.
   ===================================================================== */

/* ── WFE Design Tokens ──────────────────────────────── */
.workfloweditor-page {
  --wfe-bg: #0c1220;
  --wfe-surface: #151d2e;
  --wfe-surface-raised: #1a2438;
  --wfe-surface-hover: #1f2a40;
  --wfe-surface-active: #243050;
  --wfe-border: rgba(148, 163, 184, 0.12);
  --wfe-border-strong: rgba(148, 163, 184, 0.22);
  --wfe-ink: #e2e8f0;
  --wfe-muted: #8896a8;
  --wfe-accent: #3b82f6;
  --wfe-accent-glow: rgba(59, 130, 246, 0.18);
  --wfe-shadow: rgba(0, 0, 0, 0.35);
  --wfe-canvas: #0f1623;
  --wfe-grid-dot: rgba(148, 163, 184, 0.1);
  --wfe-node-bg: #1a2438;
  --wfe-node-border: rgba(148, 163, 184, 0.15);
  --wfe-node-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --wfe-input-bg: rgba(255, 255, 255, 0.04);
  --wfe-input-border: rgba(148, 163, 184, 0.16);
  --wfe-input-focus: rgba(59, 130, 246, 0.25);
  --wfe-radius: 8px;
  --wfe-radius-lg: 12px;
  --wfe-transition: 0.16s ease;

  background: linear-gradient(160deg, #0c1220 0%, #101828 50%, #0e1525 100%);
  min-height: 100vh;
  color: var(--wfe-ink);
}

.workfloweditor-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: none;
  width: 100%;
  min-height: 100vh;
}

.workfloweditor-hero .hero__row {
  flex-wrap: wrap;
}

.workfloweditor-toolbar-shell {
  margin: 0 16px;
}

.workfloweditor-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.workfloweditor-toolbar .button,
.workfloweditor-toolbar summary.button {
  padding: 5px 10px;
  font-size: 0.76rem;
  border-radius: var(--wfe-radius);
  color: var(--wfe-ink);
  background: var(--wfe-surface-raised);
  border: 1px solid var(--wfe-border);
  transition: all var(--wfe-transition);
}

.workfloweditor-toolbar .button:hover,
.workfloweditor-toolbar summary.button:hover {
  background: var(--wfe-surface-hover);
  border-color: var(--wfe-border-strong);
}

.workfloweditor-toolbar .button--compact {
  padding: 5px 10px;
  font-size: 0.76rem;
  border-radius: var(--wfe-radius);
}

.workfloweditor-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--wfe-border);
  border-radius: var(--wfe-radius-lg);
  background: var(--wfe-surface);
}

.workfloweditor-toolbar__group--state {
  justify-content: flex-end;
}

.workfloweditor-toolbar__status {
  margin-left: auto;
  color: var(--wfe-muted);
}

/* ── More actions dropdown ──────────────────────────── */
.workfloweditor-more {
  position: relative;
}

.workfloweditor-more > summary {
  list-style: none;
}

.workfloweditor-more > summary::-webkit-details-marker {
  display: none;
}

.workfloweditor-more__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--wfe-border-strong);
  border-radius: var(--wfe-radius);
  background: var(--wfe-surface-raised);
  box-shadow: 0 12px 28px var(--wfe-shadow);
  z-index: 6;
}

.workfloweditor-more__action {
  justify-content: flex-start;
  color: var(--wfe-ink);
}

.workfloweditor-more__action:hover {
  background: var(--wfe-surface-hover);
}

/* ── Shortcut chips (legacy) ────────────────────────── */
.workfloweditor-shortcuts {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.workfloweditor-shortcuts__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--wfe-muted);
  padding: 3px 7px;
  border: 1px solid var(--wfe-border);
  border-radius: 999px;
  background: var(--wfe-surface);
}

.workfloweditor-shortcuts__item kbd {
  font-family: "IBM Plex Mono", "Consolas", monospace;
  font-size: 0.68rem;
  color: var(--wfe-ink);
  border: 1px solid var(--wfe-border-strong);
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--wfe-surface-raised);
}

/* ── Embedded mode ──────────────────────────────────── */
body.workfloweditor-embedded .workfloweditor-hero .hero__badge,
body.workfloweditor-embedded .workfloweditor-hero h1,
body.workfloweditor-embedded .workfloweditor-hero p,
body.workfloweditor-embedded .workfloweditor-toolbar {
  display: none;
}

body.workfloweditor-embedded .workfloweditor-toolbar-shell {
  display: none;
}

body.workfloweditor-embedded .workfloweditor-hero {
  padding-top: 8px;
  padding-bottom: 6px;
}

body.workfloweditor-embedded .workfloweditor-layout {
  height: 100vh;
  padding: 10px;
  gap: 10px;
  overflow-y: auto;
}

body.workfloweditor-embedded .workfloweditor-shortcuts {
  margin-top: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-gutter: stable;
}

body.workfloweditor-embedded .workfloweditor-shortcuts__item {
  white-space: nowrap;
}

body.workfloweditor-embedded .workfloweditor-shell {
  height: clamp(520px, calc(100vh - 120px), 1600px);
}

body.workfloweditor-embedded .workfloweditor-library__body {
  max-height: none;
}

body.workfloweditor-embedded .workfloweditor-inspector__scroll {
  max-height: none;
}

/* ── Shell Grid (Library / Canvas / Inspector) ──────── */
.workfloweditor-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 300px;
  gap: 10px;
  min-height: 520px;
  flex: 1 1 auto;
  min-height: 0;
}

.workfloweditor-timeline {
  flex: 0 0 auto;
}

.workfloweditor-library,
.workfloweditor-inspector,
.workfloweditor-timeline,
.workfloweditor-canvas,
.workfloweditor-preview,
.workfloweditor-runtime {
  backdrop-filter: none;
}

/* ── Shared dark panel surface ──────────────────────── */
.workfloweditor-library,
.workfloweditor-inspector,
.workfloweditor-timeline {
  background: var(--wfe-surface);
  border: 1px solid var(--wfe-border);
  border-radius: var(--wfe-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 14px;
  color: var(--wfe-ink);
}

/* ── Node Library ───────────────────────────────────── */
.workfloweditor-library {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workfloweditor-library .panel__header {
  align-items: stretch;
  gap: 8px;
}

.workfloweditor-library .panel__header h2 {
  color: var(--wfe-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workfloweditor-library__header {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.workfloweditor-library__header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workfloweditor-library__search {
  width: 100%;
  background: var(--wfe-input-bg);
  border: 1px solid var(--wfe-input-border);
  color: var(--wfe-ink);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  transition: border-color var(--wfe-transition), box-shadow var(--wfe-transition);
}

.workfloweditor-library__search::placeholder {
  color: var(--wfe-muted);
}

.workfloweditor-library__search:focus {
  border-color: var(--wfe-accent);
  box-shadow: 0 0 0 3px var(--wfe-input-focus);
  outline: none;
}

.workfloweditor-library__header-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.workfloweditor-library__header-actions #nodeSearch {
  flex: 1 1 auto;
  min-width: 0;
}

.workfloweditor-center {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  align-self: stretch;
}

.workfloweditor-library__body {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  max-height: clamp(260px, calc(100vh - 380px), 800px);
}

.workfloweditor-library__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.workfloweditor-library__scroll::-webkit-scrollbar { width: 4px; }
.workfloweditor-library__scroll::-webkit-scrollbar-track { background: transparent; }
.workfloweditor-library__scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 4px; }

.workfloweditor-library__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
  flex: 0 0 auto;
  min-height: 0;
}

.workfloweditor-library__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workfloweditor-library__group-header {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wfe-accent);
  padding: 6px 2px 2px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
  margin-bottom: 2px;
}

.workfloweditor-library__group-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── A–Z jump index ─────────────────────────────────── */
.workfloweditor-library__index {
  flex: 0 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 1px;
  padding: 4px 1px;
  border-left: 1px solid var(--wfe-border);
  color: var(--wfe-muted);
  user-select: none;
}

.workfloweditor-library__index-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--wfe-muted);
  font-size: 0.62rem;
  font-weight: 800;
  width: 20px;
  height: 16px;
  line-height: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--wfe-transition);
}

.workfloweditor-library__index-btn:hover {
  background: var(--wfe-accent-glow);
  color: var(--wfe-accent);
}

.workfloweditor-library__index-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

.workfloweditor-library__divider {
  height: 1px;
  background: var(--wfe-border);
  margin: 8px 0;
}

.workfloweditor-library__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.workfloweditor-library__layout .button {
  justify-content: center;
  width: 100%;
}

/* ── Node Library Items ─────────────────────────────── */
.workfloweditor-library__item {
  border: 1px solid var(--wfe-border);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--wfe-surface-raised);
  text-align: left;
  font-size: 0.8rem;
  color: var(--wfe-ink);
  cursor: pointer;
  transition: all var(--wfe-transition);
  border-left: 3px solid var(--wfe-accent);
}

.workfloweditor-library__item:hover {
  background: var(--wfe-surface-hover);
  border-color: var(--wfe-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateX(2px);
}

/* ── Canvas (Grasshopper dark workspace) ────────────── */
.workfloweditor-canvas {
  position: relative;
  border-radius: var(--wfe-radius-lg);
  border: 1px solid var(--wfe-border);
  background: var(--wfe-canvas);
  overflow: hidden;
  min-height: 480px;
  flex: 1 1 auto;
  cursor: default;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
}

.workfloweditor-canvas.workfloweditor-canvas--expanded {
  min-height: 640px;
}

.workfloweditor-canvas__fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  color: var(--wfe-muted);
  background: var(--wfe-surface);
  border: 1px solid var(--wfe-border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  opacity: 0.7;
  transition: opacity var(--wfe-transition);
}

.workfloweditor-canvas__fullscreen:hover {
  opacity: 1;
  background: var(--wfe-surface-raised);
}

/* ── Canvas dot grid (Grasshopper style) ────────────── */
.workfloweditor-canvas__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--wfe-grid-dot) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 1;
}

/* ── Connection wires ───────────────────────────────── */
.workfloweditor-canvas__connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  overflow: visible;
  transform-origin: 0 0;
  z-index: 1;
}

.workfloweditor-connection {
  fill: none;
  stroke: rgba(148, 163, 184, 0.5);
  stroke-width: 2.5;
  opacity: 1;
  pointer-events: stroke;
  transition: stroke var(--wfe-transition);
}

.workfloweditor-connection:hover {
  stroke: var(--wfe-accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 4px var(--wfe-accent-glow));
}

.workfloweditor-canvas__nodes {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  z-index: 2;
}

.workfloweditor-canvas.is-panning {
  cursor: grabbing;
}

/* ── Preview panel ──────────────────────────────────── */
.workfloweditor-preview {
  background: var(--wfe-surface);
  border: 1px solid var(--wfe-border);
  border-radius: var(--wfe-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 14px;
  min-height: 320px;
  color: var(--wfe-ink);
}

.workfloweditor-preview .panel__header h2 {
  color: var(--wfe-ink);
}

.workfloweditor-preview__body {
  position: relative;
  margin-top: 10px;
  border-radius: var(--wfe-radius);
  border: 1px dashed var(--wfe-border-strong);
  background: var(--wfe-surface-raised);
  min-height: 320px;
  overflow: hidden;
}

/* ── Runtime panel ──────────────────────────────────── */
.workfloweditor-runtime {
  background: var(--wfe-surface);
  border: 1px solid var(--wfe-border);
  border-radius: var(--wfe-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 14px;
  min-height: 360px;
  color: var(--wfe-ink);
}

.workfloweditor-runtime .panel__header h2 {
  color: var(--wfe-ink);
}

.workfloweditor-runtime__body {
  position: relative;
  margin-top: 10px;
  border-radius: var(--wfe-radius);
  border: 1px solid var(--wfe-border);
  background: #0a0f1a;
  overflow: hidden;
  min-height: 320px;
}

.workfloweditor-runtime__progress {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 18, 32, 0.65);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.workfloweditor-runtime__progress[hidden] {
  display: none !important;
}

.workfloweditor-runtime__progress-card {
  min-width: 220px;
  max-width: min(420px, 70%);
  padding: 14px 16px;
  border-radius: var(--wfe-radius-lg);
  border: 1px solid var(--wfe-border-strong);
  background: rgba(15, 22, 35, 0.95);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.workfloweditor-runtime__progress-label {
  color: var(--wfe-ink);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.workfloweditor-runtime__progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.workfloweditor-runtime__progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wfe-accent) 0%, #22c55e 100%);
  transition: width 0.24s ease;
}

.workfloweditor-runtime__frame {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: none;
  background: #ffffff;
}

.workfloweditor-preview__frame {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: none;
  background: #ffffff;
  position: relative;
  z-index: 1;
}

/* ── Layout items ───────────────────────────────────── */
.workfloweditor-layout__items,
.workfloweditor-layout__preview {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.workfloweditor-layout__preview {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  pointer-events: none;
}

.workfloweditor-layout__preview--real {
  position: absolute;
  inset: 0;
  border-radius: var(--wfe-radius);
  border: 1px dashed var(--wfe-border-strong);
  background: transparent;
  overflow: hidden;
  pointer-events: auto;
  z-index: 3;
}

.workfloweditor-layout__snapshot {
  position: absolute;
  inset: 0;
  border-radius: var(--wfe-radius);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.workfloweditor-preview__palette {
  position: absolute;
  top: 14px;
  left: 14px;
  width: min(300px, 80%);
  background: var(--wfe-surface-raised);
  border: 1px solid var(--wfe-border-strong);
  border-radius: var(--wfe-radius-lg);
  box-shadow: 0 14px 30px var(--wfe-shadow);
  padding: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--wfe-ink);
}

.workfloweditor-preview__palette-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workfloweditor-preview__palette-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.workfloweditor-preview__inspector {
  position: absolute;
  top: 14px;
  right: 14px;
  width: min(320px, 90%);
  max-height: calc(100% - 28px);
  padding: 12px;
  border-radius: var(--wfe-radius-lg);
  background: rgba(15, 22, 35, 0.96);
  border: 1px solid var(--wfe-border-strong);
  box-shadow: 0 14px 30px var(--wfe-shadow);
  color: var(--wfe-ink);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workfloweditor-preview__inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workfloweditor-preview__inspector-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.workfloweditor-preview__mode {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--wfe-border);
  background: var(--wfe-surface-raised);
}

/* ── Fullscreen ─────────────────────────────────────── */
.has-fullscreen {
  overflow: hidden;
}

.is-fullscreen {
  position: fixed;
  inset: 12px;
  z-index: 400;
  width: auto;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--wfe-surface);
  border: 1px solid var(--wfe-border-strong);
  border-radius: var(--wfe-radius-lg);
}

.is-fullscreen .workfloweditor-preview__body,
.is-fullscreen .workfloweditor-runtime__body {
  flex: 1;
  min-height: 0;
}

.workfloweditor-mode {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--wfe-border);
  background: var(--wfe-surface-raised);
}

/* ── Layout items (visual editor) ───────────────────── */
.workfloweditor-layout-item {
  position: absolute;
  border: 1px solid var(--wfe-border);
  border-radius: var(--wfe-radius-lg);
  background: var(--wfe-surface-raised);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workfloweditor-layout-item.is-selected {
  box-shadow: 0 0 0 2px var(--wfe-accent-glow);
  border-color: var(--wfe-accent);
}

.workfloweditor-real-item {
  position: absolute;
  border-radius: var(--wfe-radius-lg);
  background: var(--wfe-surface-raised);
  border: 1px solid var(--wfe-border);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.workfloweditor-real-item.is-selected {
  box-shadow: 0 0 0 2px var(--wfe-accent-glow);
  border-color: var(--wfe-accent);
}

.workfloweditor-real-item__drag {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--wfe-border);
  background: radial-gradient(circle at 2px 2px, var(--wfe-muted) 1px, transparent 0);
  background-size: 5px 5px;
  cursor: move;
}

.workfloweditor-real-item__resize {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--wfe-accent);
  cursor: nwse-resize;
}

.workfloweditor-real-guide {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--wfe-accent);
  box-shadow: 0 0 0 1px var(--wfe-accent-glow);
  pointer-events: none;
  z-index: 6;
  display: none;
}

.workfloweditor-real-guide--h {
  width: 100%;
  height: 1px;
}

.workfloweditor-real-item--runtime {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
  padding: 0;
}

.workfloweditor-real-runtime {
  pointer-events: none;
}

.workfloweditor-real-item__header {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--wfe-ink);
}

.workfloweditor-real-item__body {
  color: var(--wfe-muted);
  font-size: 0.82rem;
}

.workfloweditor-real-item__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wfe-ink);
}

.workfloweditor-real-item__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--wfe-muted);
}

.workfloweditor-real-item__field input {
  border: 1px solid var(--wfe-input-border);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--wfe-input-bg);
  color: var(--wfe-ink);
}

.workfloweditor-real-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--wfe-muted);
}

.workfloweditor-real-detail__title {
  font-weight: 700;
  color: var(--wfe-ink);
}

.workfloweditor-real-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.workfloweditor-real-detail__row strong {
  color: var(--wfe-ink);
  font-weight: 600;
}

.workfloweditor-layout-item__header {
  padding: 6px 10px;
  background: var(--wfe-surface-hover);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wfe-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  cursor: move;
}

.workfloweditor-layout-item__body {
  padding: 10px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--wfe-ink);
  font-size: 0.85rem;
}

.workfloweditor-layout-item__detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  text-align: left;
  font-size: 0.78rem;
  color: var(--wfe-ink);
}

.workfloweditor-layout-item__detail-title {
  font-weight: 700;
  color: var(--wfe-ink);
}

.workfloweditor-layout-item__detail-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--wfe-muted);
}

.workfloweditor-layout-item__detail-row strong {
  color: var(--wfe-ink);
  font-weight: 600;
}

.workfloweditor-layout-item__button {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--wfe-border);
  background: var(--wfe-surface-raised);
  color: var(--wfe-ink);
  font-weight: 600;
  font-size: 0.82rem;
}

.workfloweditor-layout-item__resize {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--wfe-accent);
  cursor: nwse-resize;
}

.workfloweditor-layout-item--label {
  background: rgba(59, 130, 246, 0.08);
  border-style: dashed;
}

/* ── Inspector ──────────────────────────────────────── */
.workfloweditor-inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workfloweditor-inspector .panel__header h2 {
  color: var(--wfe-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workfloweditor-inspector .panel__header .chip {
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
  border: 1px solid var(--wfe-border);
  font-size: 0.72rem;
}

.workfloweditor-inspector__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--wfe-border);
}

.workfloweditor-inspector__group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.workfloweditor-inspector__group-title {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wfe-accent);
  font-weight: 700;
  cursor: pointer;
}

.workfloweditor-inspector__group-title::-webkit-details-marker {
  display: none;
}

.workfloweditor-inspector__group > summary.workfloweditor-inspector__group-title {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workfloweditor-inspector__group > summary.workfloweditor-inspector__group-title::after {
  content: "▾";
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.6;
  color: var(--wfe-muted);
}

.workfloweditor-inspector__group:not([open]) > summary.workfloweditor-inspector__group-title::after {
  content: "▸";
}

.workfloweditor-inspector__group-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.workfloweditor-inspector__checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 5px 8px;
  margin-top: 4px;
}

/* ── Canvas Nodes (Grasshopper-inspired) ────────────── */
.workfloweditor-node {
  position: absolute;
  width: 200px;
  background: var(--wfe-node-bg);
  border-radius: 10px;
  border: 1px solid var(--wfe-node-border);
  box-shadow: var(--wfe-node-shadow);
  cursor: pointer;
  color: var(--wfe-ink);
  transition: box-shadow var(--wfe-transition), border-color var(--wfe-transition);
}

.workfloweditor-node:hover {
  border-color: var(--wfe-border-strong);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.workfloweditor-node.is-dragging {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  cursor: grabbing;
  z-index: 10;
}

.workfloweditor-node.is-selected {
  outline: 2px solid var(--wfe-accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--wfe-accent-glow), var(--wfe-node-shadow);
}

.workfloweditor-node__header {
  padding: 8px 10px;
  border-bottom: 2px solid;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: grab;
  border-radius: 9px 9px 0 0;
  background: rgba(255, 255, 255, 0.03);
}

.workfloweditor-node__header h3 {
  color: var(--wfe-ink);
  font-size: 0.82rem;
}

.workfloweditor-node__links {
  display: flex;
  gap: 4px;
}

.workfloweditor-node__link {
  border: 1px solid var(--wfe-border);
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--wfe-transition);
}

.workfloweditor-node__action {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--wfe-transition);
}

.workfloweditor-node__action:hover {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.2);
}

.workfloweditor-node__link:hover {
  border-color: rgba(59, 130, 246, 0.5);
  color: var(--wfe-ink);
}

.workfloweditor-node__link.is-active {
  background: var(--wfe-accent-glow);
  border-color: rgba(59, 130, 246, 0.5);
  color: var(--wfe-accent);
  font-weight: 600;
}

.workfloweditor-node__type {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wfe-muted);
}

.workfloweditor-node__body {
  padding: 8px 10px 10px;
}

.workfloweditor-node__ports {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--wfe-muted);
  gap: 6px;
}

.workfloweditor-node__ports-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.workfloweditor-node__port {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--wfe-muted);
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--wfe-transition);
}

.workfloweditor-node__port:hover {
  color: var(--wfe-ink);
}

.workfloweditor-node__port.is-active {
  color: var(--wfe-accent);
  font-weight: 600;
  background: var(--wfe-accent-glow);
  border-radius: 4px;
  padding: 2px 5px;
}

.workfloweditor-node__port.is-connected {
  color: #34d399;
}

.workfloweditor-node__port-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wfe-muted);
  flex-shrink: 0;
}

.workfloweditor-node__port.is-active .workfloweditor-node__port-dot {
  background: var(--wfe-accent);
}

.workfloweditor-node__port.is-connected .workfloweditor-node__port-dot {
  background: #34d399;
}

.workfloweditor-node__port--empty {
  color: rgba(148, 163, 184, 0.4);
}

.workfloweditor-node__hint {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--wfe-muted);
}

/* ── Inspector body/search ──────────────────────────── */
.workfloweditor-inspector__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 0;
}

.workfloweditor-inspector__toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workfloweditor-inspector__search {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--wfe-input-bg);
  border: 1px solid var(--wfe-input-border);
  color: var(--wfe-ink);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.workfloweditor-inspector__search::placeholder {
  color: var(--wfe-muted);
}

.workfloweditor-inspector__search:focus {
  border-color: var(--wfe-accent);
  box-shadow: 0 0 0 3px var(--wfe-input-focus);
  outline: none;
}

.workfloweditor-inspector__content {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
}

.workfloweditor-inspector__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.18) transparent;
  max-height: clamp(260px, calc(100vh - 380px), 800px);
}

.workfloweditor-inspector__scroll::-webkit-scrollbar { width: 4px; }
.workfloweditor-inspector__scroll::-webkit-scrollbar-track { background: transparent; }
.workfloweditor-inspector__scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.18); border-radius: 4px; }

.workfloweditor-inspector__content-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.workfloweditor-inspector__index {
  flex: 0 0 30px;
  width: 30px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  justify-content: flex-start;
}

.workfloweditor-inspector__index-button {
  border: 1px solid var(--wfe-border);
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
  border-radius: 4px;
  padding: 3px 2px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all var(--wfe-transition);
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workfloweditor-inspector__index-button:hover {
  border-color: var(--wfe-accent);
  background: var(--wfe-accent-glow);
  color: var(--wfe-accent);
}

.workfloweditor-inspector__index-button--group {
  font-size: 0.52rem;
  font-weight: 700;
  padding: 2px;
}

.workfloweditor-inspector .is-filtered-out {
  display: none !important;
}

.workfloweditor-inspector__section {
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--wfe-border);
}

.workfloweditor-inspector__section:first-child {
  padding-top: 0;
}

.workfloweditor-inspector__section:last-child {
  border-bottom: none;
}

.workfloweditor-inspector__section h3 {
  margin-bottom: 3px;
  font-size: 0.82rem;
  color: var(--wfe-ink);
}

.workfloweditor-inspector__label {
  display: block;
  font-size: 0.72rem;
  margin-bottom: 2px;
  color: var(--wfe-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.workfloweditor-inspector__list {
  margin: 0;
  padding-left: 16px;
  color: var(--wfe-muted);
  font-size: 0.78rem;
}

.workfloweditor-inspector__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.workfloweditor-inspector__field > span {
  font-size: 0.72rem;
  color: var(--wfe-muted);
}

/* Inspector input/select/textarea dark treatment */
.workfloweditor-inspector__field input,
.workfloweditor-inspector__field select,
.workfloweditor-inspector__field textarea {
  background: var(--wfe-input-bg);
  border: 1px solid var(--wfe-input-border);
  color: var(--wfe-ink);
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 0.78rem;
  font-family: inherit;
  transition: border-color var(--wfe-transition), box-shadow var(--wfe-transition);
}

.workfloweditor-inspector__field input:focus,
.workfloweditor-inspector__field select:focus,
.workfloweditor-inspector__field textarea:focus {
  border-color: var(--wfe-accent);
  box-shadow: 0 0 0 3px var(--wfe-input-focus);
  outline: none;
}

.workfloweditor-inspector__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--wfe-border);
  background: rgba(59, 130, 246, 0.08);
  color: var(--wfe-muted);
  font-size: 0.64rem;
  line-height: 1.25;
}

.workfloweditor-inspector__hint::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--wfe-accent);
  background: var(--wfe-accent-glow);
}

.workfloweditor-inspector__ports {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}

.workfloweditor-inspector__port {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid var(--wfe-border);
  background: var(--wfe-surface-raised);
}

.workfloweditor-inspector__port .workfloweditor-inspector__field {
  margin-bottom: 0;
}

.workfloweditor-inspector__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--wfe-muted);
}

.workfloweditor-inspector__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.workfloweditor-inspector__action-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wfe-ink);
  background: var(--wfe-surface-raised);
  border: 1px solid var(--wfe-border);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all var(--wfe-transition);
}

.workfloweditor-inspector__action-button:hover {
  background: var(--wfe-surface-hover);
  border-color: var(--wfe-border-strong);
}

.workfloweditor-inspector__action-button[data-setting-action-id^="plane_preset_"] {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.08);
}

.workfloweditor-inspector__action-button[data-setting-action-id^="axis_preset_"] {
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.08);
}

.workfloweditor-inspector__action-button[data-setting-action-id^="plane_preset_"] .workfloweditor-inspector__action-icon {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.15);
  color: var(--wfe-accent);
}

.workfloweditor-inspector__action-button[data-setting-action-id^="axis_preset_"] .workfloweditor-inspector__action-icon {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.12);
  color: #34d399;
}

.workfloweditor-inspector__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--wfe-border);
  background: var(--wfe-accent-glow);
  color: var(--wfe-accent);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

/* ── Landmark builder ───────────────────────────────── */
.workfloweditor-landmark-builder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 8px;
  border: 1px dashed var(--wfe-border-strong);
  border-radius: 8px;
  background: var(--wfe-surface-raised);
}

.workfloweditor-landmark-builder__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--wfe-border);
  border-radius: 8px;
  background: var(--wfe-surface);
}

.workfloweditor-landmark-builder__status {
  font-size: 0.7rem;
  color: var(--wfe-muted);
}

.workfloweditor-landmark-builder__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.workfloweditor-landmark-builder__field-label {
  font-size: 0.68rem;
  color: var(--wfe-muted);
  font-weight: 600;
}

.workfloweditor-landmark-builder__remove {
  align-self: flex-start;
}

.workfloweditor-inspector__list--connections {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 3px;
}

.workfloweditor-inspector__connection {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid var(--wfe-border);
  border-radius: 5px;
  background: var(--wfe-surface-raised);
  font-size: 0.72rem;
  color: var(--wfe-ink);
}

/* ── Timeline ───────────────────────────────────────── */
.workfloweditor-timeline {
  margin-top: 6px;
}

.workfloweditor-timeline .panel__header h2 {
  color: var(--wfe-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workfloweditor-timeline .panel__header .chip {
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
  border: 1px solid var(--wfe-border);
  font-size: 0.72rem;
}

.workfloweditor-timeline__body {
  margin-top: 10px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--wfe-muted);
}

.workfloweditor-timeline__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 0.82rem;
  color: var(--wfe-muted);
}

.workfloweditor-timeline__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--wfe-surface-raised);
  border: 1px solid var(--wfe-border);
  font-size: 0.82rem;
  color: var(--wfe-ink);
}

/* ── Access guard ───────────────────────────────────── */
.workfloweditor-guard {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.workfloweditor-guard[hidden] {
  display: none;
}

.workfloweditor-guard__card {
  background: var(--wfe-surface);
  padding: 28px;
  border-radius: var(--wfe-radius-lg);
  border: 1px solid var(--wfe-border-strong);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  max-width: 420px;
  text-align: center;
  color: var(--wfe-ink);
}

.workfloweditor-guard__card h2 {
  color: var(--wfe-ink);
}

.workfloweditor-guard__card p {
  color: var(--wfe-muted);
}

.workfloweditor-guard__card .admin-field {
  color: var(--wfe-muted);
}

.workfloweditor-guard__card .admin-input {
  background: var(--wfe-input-bg);
  border: 1px solid var(--wfe-input-border);
  color: var(--wfe-ink);
  border-radius: 6px;
}

.workfloweditor-guard__card .admin-input:focus {
  border-color: var(--wfe-accent);
  box-shadow: 0 0 0 3px var(--wfe-input-focus);
  outline: none;
}

.workfloweditor-guard__card .button {
  background: var(--wfe-accent);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 600;
}

.workfloweditor-guard__card .button--ghost {
  background: transparent;
  color: var(--wfe-accent);
  border: 1px solid var(--wfe-border);
}

.workfloweditor-guard__card .chip {
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
  border: 1px solid var(--wfe-border);
}

.workfloweditor-guard__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0;
  flex-wrap: wrap;
}

/* ── Panel header overrides for dark theme ──────────── */
.workfloweditor-library .panel__header,
.workfloweditor-inspector .panel__header,
.workfloweditor-timeline .panel__header,
.workfloweditor-preview .panel__header,
.workfloweditor-runtime .panel__header {
  border-color: var(--wfe-border);
}

.workfloweditor-library .panel__header-actions .button,
.workfloweditor-inspector .panel__header-actions .button,
.workfloweditor-timeline .panel__header-actions .button,
.workfloweditor-preview .panel__header-actions .button,
.workfloweditor-runtime .panel__header-actions .button {
  color: var(--wfe-muted);
  background: var(--wfe-surface-raised);
  border: 1px solid var(--wfe-border);
  border-radius: 6px;
  font-size: 0.74rem;
  padding: 4px 8px;
}

.workfloweditor-library .panel__header-actions .button:hover,
.workfloweditor-inspector .panel__header-actions .button:hover,
.workfloweditor-timeline .panel__header-actions .button:hover,
.workfloweditor-preview .panel__header-actions .button:hover,
.workfloweditor-runtime .panel__header-actions .button:hover {
  background: var(--wfe-surface-hover);
  color: var(--wfe-ink);
}

/* Admin hint text inside WFE */
.workfloweditor-page .admin-hint {
  color: var(--wfe-muted);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .workfloweditor-toolbar {
    grid-template-columns: 1fr;
  }

  .workfloweditor-toolbar__group--state {
    justify-content: flex-start;
  }

  .workfloweditor-toolbar__status {
    margin-left: 0;
  }

  .workfloweditor-more__menu {
    left: 0;
    right: auto;
  }

  .workfloweditor-shell {
    grid-template-columns: 1fr;
  }

  .workfloweditor-library,
  .workfloweditor-inspector {
    order: 1;
  }

  .workfloweditor-canvas {
    order: 0;
    min-height: 380px;
  }
}


.servicefab-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.servicefab-chat__toggle {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 14px 26px rgba(16, 24, 40, 0.18);
  cursor: pointer;
  pointer-events: auto;
}

.servicefab-chat__panel {
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 120px));
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 34px rgba(16, 24, 40, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.servicefab-chat.is-open .servicefab-chat__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.servicefab-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.servicefab-chat__title {
  font-weight: 700;
}

.servicefab-chat__close {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.servicefab-chat__modes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.servicefab-chat__mode {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}

.servicefab-chat__mode.is-active {
  border-color: rgba(44, 109, 238, 0.5);
  color: var(--accent-strong);
  background: rgba(44, 109, 238, 0.08);
  font-weight: 600;
}

.servicefab-chat__mode.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.servicefab-chat__status {
  display: flex;
  justify-content: flex-end;
}

.servicefab-chat__hint {
  font-size: 0.75rem;
  color: var(--muted);
}

.servicefab-chat__log {
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.servicefab-chat__empty {
  color: var(--muted);
  font-size: 0.85rem;
}

.servicefab-chat__message {
  display: flex;
}

.servicefab-chat__message--user {
  justify-content: flex-end;
}

.servicefab-chat__bubble {
  max-width: 80%;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.servicefab-chat__message--assistant .servicefab-chat__bubble {
  background: #ffffff;
  border: 1px solid var(--border);
}

.servicefab-chat__form {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
}

.servicefab-chat__input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.85rem;
}

.servicefab-chat__send,
.servicefab-chat__clear {
  padding: 6px 12px;
}

.servicefab-chat__mic {
  padding: 6px 10px;
}

.servicefab-chat__mic.is-recording {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #15803d;
}

.workfloweditor-node__port-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9aa4b2;
  flex-shrink: 0;
}

.workfloweditor-node__port.is-active .workfloweditor-node__port-dot {
  background: var(--accent);
}

.workfloweditor-node__port--empty {
  color: var(--muted);
}

.workfloweditor-node__hint {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}

.workfloweditor-inspector__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.workfloweditor-inspector__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workfloweditor-inspector__search {
  flex: 1 1 auto;
  min-width: 0;
}

.workfloweditor-inspector__content {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}

.workfloweditor-inspector__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
  max-height: clamp(260px, calc(100vh - 420px), 760px);
}

.workfloweditor-inspector__content-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.workfloweditor-inspector__index {
  flex: 0 0 44px;
  width: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
}

.workfloweditor-inspector__index-button {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  border-radius: 10px;
  padding: 6px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.workfloweditor-inspector__index-button:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border) 66%);
  background: color-mix(in srgb, var(--accent-soft) 24%, #ffffff 76%);
  color: var(--accent-strong);
}

.workfloweditor-inspector__index-button--group {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 5px 6px;
}

.workfloweditor-inspector .is-filtered-out {
  display: none !important;
}

.workfloweditor-inspector__section h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.workfloweditor-inspector__label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 6px;
  color: var(--muted);
}

.workfloweditor-inspector__list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.8rem;
}

.workfloweditor-inspector__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.workfloweditor-inspector__field > span {
  font-size: 0.8rem;
  color: var(--muted);
}

.workfloweditor-inspector__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 4px 7px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent-soft) 55%, #ffffff 45%);
  color: var(--ink);
  font-size: 0.73rem;
  line-height: 1.35;
}

.workfloweditor-inspector__hint::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 18%, #ffffff 82%);
}

.workfloweditor-inspector__ports {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.workfloweditor-inspector__port {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.workfloweditor-inspector__port .workfloweditor-inspector__field {
  margin-bottom: 0;
}

.workfloweditor-inspector__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

.workfloweditor-inspector__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workfloweditor-inspector__action-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.workfloweditor-inspector__action-button[data-setting-action-id^="plane_preset_"] {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border) 68%);
  background: color-mix(in srgb, var(--accent-soft) 48%, #ffffff 52%);
}

.workfloweditor-inspector__action-button[data-setting-action-id^="axis_preset_"] {
  border-color: color-mix(in srgb, var(--ok) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--ok) 10%, #ffffff 90%);
}

.workfloweditor-inspector__action-button[data-setting-action-id^="plane_preset_"] .workfloweditor-inspector__action-icon {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border) 66%);
  background: color-mix(in srgb, var(--accent-soft) 68%, #ffffff 32%);
  color: var(--accent-strong);
}

.workfloweditor-inspector__action-button[data-setting-action-id^="axis_preset_"] .workfloweditor-inspector__action-icon {
  border-color: color-mix(in srgb, var(--ok) 36%, var(--border) 64%);
  background: color-mix(in srgb, var(--ok) 18%, #ffffff 82%);
  color: color-mix(in srgb, var(--ok) 76%, var(--ink) 24%);
}

.workfloweditor-inspector__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--accent) 10%, #ffffff 90%);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.workfloweditor-landmark-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
}

.workfloweditor-landmark-builder__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
}

.workfloweditor-landmark-builder__status {
  font-size: 0.74rem;
  color: var(--muted);
}

.workfloweditor-landmark-builder__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workfloweditor-landmark-builder__field-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.workfloweditor-landmark-builder__remove {
  align-self: flex-start;
}

.workfloweditor-inspector__list--connections {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.workfloweditor-inspector__connection {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
  font-size: 0.8rem;
  color: var(--text);
}

.workfloweditor-timeline {
  margin-top: 8px;
}

.workfloweditor-timeline__body {
  margin-top: 12px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--muted);
}

.workfloweditor-timeline__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

.workfloweditor-timeline__row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
}

.workfloweditor-guard {
  position: fixed;
  inset: 0;
  background: rgba(12, 16, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.workfloweditor-guard[hidden] {
  display: none;
}

.workfloweditor-guard__card {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 30px rgba(12, 16, 24, 0.25);
  max-width: 420px;
  text-align: center;
}

.workfloweditor-guard__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 12px 0;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .workfloweditor-toolbar {
    grid-template-columns: 1fr;
  }

  .workfloweditor-toolbar__group--state {
    justify-content: flex-start;
  }

  .workfloweditor-toolbar__status {
    margin-left: 0;
  }

  .workfloweditor-more__menu {
    left: 0;
    right: auto;
  }

  .workfloweditor-shell {
    grid-template-columns: 1fr;
  }

  .workfloweditor-library,
  .workfloweditor-inspector {
    order: 1;
  }

  .workfloweditor-canvas {
    order: 0;
    min-height: 420px;
  }
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.modal.is-open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 15, 0.5);
  backdrop-filter: blur(6px);
}

.modal__card {
  position: relative;
  width: min(720px, 92vw);
  max-height: 90vh;
  background: var(--panel);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 28px 50px rgba(16, 24, 40, 0.32);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.modal__card--instruction-media {
  width: min(1200px, 96vw);
}

.instruction-media-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  overflow: auto;
  padding-right: 0;
}

.instruction-media-modal__asset {
  width: auto;
  height: auto;
  max-width: min(1120px, 92vw);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  box-shadow: 0 18px 28px rgba(16, 24, 40, 0.18);
}

.instruction-media-modal__text {
  width: min(1120px, 92vw);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(243, 246, 251, 0.95);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.modal__header,
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal__header-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal__body {
  overflow-y: auto;
  padding-right: 6px;
}

.modal__status {
  margin-top: 12px;
}

.modal__card--help {
  width: min(1320px, 96vw);
  max-height: 92vh;
}

/* Dark WorkflowEditor help modal */
body.workfloweditor-page .modal__card {
  background: var(--wfe-surface);
  border-color: var(--wfe-border-strong);
  color: var(--wfe-ink);
}

body.workfloweditor-page .modal__card h2 {
  color: var(--wfe-ink);
}

body.workfloweditor-page .modal__card .modal__hint {
  color: var(--wfe-muted);
}

body.workfloweditor-page .modal__card .admin-field {
  color: var(--wfe-muted);
}

body.workfloweditor-page .modal__card .admin-input {
  background: var(--wfe-input-bg);
  border: 1px solid var(--wfe-input-border);
  color: var(--wfe-ink);
}

body.workfloweditor-page .modal__card .admin-input:focus {
  border-color: var(--wfe-accent);
  box-shadow: 0 0 0 3px var(--wfe-input-focus);
  outline: none;
}

body.workfloweditor-page .modal__card .admin-hint {
  color: var(--wfe-muted);
}

body.workfloweditor-page .modal__card .chip {
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
  border: 1px solid var(--wfe-border);
}

body.workfloweditor-page .modal__card .button {
  background: var(--wfe-surface-raised);
  color: var(--wfe-ink);
  border: 1px solid var(--wfe-border);
  border-radius: 6px;
}

body.workfloweditor-page .modal__card .button:hover {
  background: var(--wfe-surface-hover);
}

body.workfloweditor-page .modal__card .button:not(.button--ghost) {
  background: var(--wfe-accent);
  color: #ffffff;
  border: none;
}

body.workfloweditor-page .modal__card .admin-toggle {
  color: var(--wfe-ink);
}

body.workfloweditor-page .modal__backdrop {
  background: rgba(6, 10, 18, 0.7);
}

body.workfloweditor-page .workfloweditor-help {
  color: var(--wfe-ink);
}

body.workfloweditor-page .workfloweditor-help__tabs {
  border-bottom-color: var(--wfe-border);
}

body.workfloweditor-page .workfloweditor-help__content {
  color: var(--wfe-ink);
}

.workfloweditor-help {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.workfloweditor-help__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.workfloweditor-help__tab {
  border: 1px solid var(--wfe-border);
  background: var(--wfe-surface-raised);
  color: var(--wfe-ink);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.workfloweditor-help__tab.is-active {
  background: var(--wfe-accent-glow);
  border-color: var(--wfe-accent);
  color: var(--wfe-accent);
}

.workfloweditor-help__content {
  overflow-y: auto;
  max-height: min(66vh, 780px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.workfloweditor-help__section {
  border: 1px solid var(--wfe-border);
  border-radius: 10px;
  background: var(--wfe-surface-raised);
  color: var(--wfe-ink);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workfloweditor-help__section h3,
.workfloweditor-help__section h4 {
  margin: 0;
}

.workfloweditor-help__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.workfloweditor-help__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workfloweditor-help__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--wfe-border);
  border-radius: 999px;
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
  font-size: 0.74rem;
  padding: 3px 8px;
}

.workfloweditor-help__table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.workfloweditor-help__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 0.8rem;
}

.workfloweditor-help__table th,
.workfloweditor-help__table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 7px 9px;
  vertical-align: top;
}

.workfloweditor-help__table th {
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Dark overrides for help table inside WFE page */
body.workfloweditor-page .workfloweditor-help__table-wrap {
  border-color: var(--wfe-border);
}

body.workfloweditor-page .workfloweditor-help__table th,
body.workfloweditor-page .workfloweditor-help__table td {
  border-bottom-color: var(--wfe-border);
  color: var(--wfe-ink);
}

body.workfloweditor-page .workfloweditor-help__table th {
  background: var(--wfe-surface-raised);
  color: var(--wfe-muted);
}

.modal__card--order-upload {
  width: min(860px, 94vw);
}

.order-upload-dialog__section {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-alt);
  padding: 12px;
  margin-bottom: 12px;
}

.order-upload-dialog__section:last-child {
  margin-bottom: 0;
}

.order-upload-dialog__section-title {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.order-upload-dialog__grid {
  gap: 10px;
}

.modal__card--review {
  width: min(1200px, 96vw);
  height: min(86vh, 900px);
  padding: 16px;
}

.modal__card--review .modal__body {
  overflow: hidden;
  padding-right: 0;
}

.review-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  height: 100%;
}

.review-viewer-dock {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-viewer-dock .review-viewer {
  height: min(520px, 70vh);
}

.review-viewer__viewport {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: radial-gradient(circle at top, rgba(23, 28, 38, 0.85), rgba(12, 14, 18, 0.95));
  overflow: hidden;
  min-height: 360px;
}

.review-viewer__toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 20, 30, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}

.review-viewer__toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.review-viewer__toolbar-group--paint {
  display: none;
}

.review-viewer__toolbar.is-paint .review-viewer__toolbar-group--paint {
  display: inline-flex;
}

.review-viewer__toolbar .button.is-active {
  background: rgba(30, 111, 217, 0.2);
  border-color: rgba(30, 111, 217, 0.5);
  color: #dbe7ff;
}

.review-workflow__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
}

.review-workflow__nodes .button.is-active {
  background: rgba(30, 111, 217, 0.16);
  border-color: rgba(30, 111, 217, 0.45);
}

.review-workflow__panel {
  display: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--bg-alt);
}

.review-workflow__panel.is-active {
  display: block;
}

.review-workflow__hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.review-viewer__paint-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 18, 0.25);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
}

.review-viewer__paint-control input[type="range"] {
  width: 110px;
}

.review-viewer__paint-control input[type="color"] {
  width: 30px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  padding: 0;
}

.review-viewer__paint-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.review-viewer__paint-control input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

.review-viewer__canvas--paint {
  cursor: crosshair;
}

.review-viewer__canvas {
  position: absolute;
  inset: 0;
}

.review-viewer__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.review-viewer__empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 20px;
  pointer-events: none;
}

.review-viewer__region {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

.review-viewer__region--draft {
  border-style: dashed;
}

.review-viewer__badge {
  position: absolute;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: #ffffff;
  background: rgba(12, 16, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.review-viewer__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.review-viewer__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.review-viewer__label textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 0.95rem;
  resize: vertical;
}

.review-viewer__actions {
  display: flex;
  justify-content: flex-start;
}

.review-viewer__actions--paint {
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.review-viewer__list {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: var(--bg-alt);
  overflow-y: auto;
}

.review-viewer__item {
  display: grid;
  gap: 6px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}

.review-viewer__item:last-child {
  border-bottom: none;
}

.review-viewer__item-title {
  font-weight: 600;
}

.review-viewer__item-meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.review-viewer__empty {
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .review-viewer {
    grid-template-columns: 1fr;
  }

  .review-viewer__sidebar {
    height: auto;
  }
}

.modal__hint {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
}

.chip--success {
  background: rgba(27, 143, 90, 0.15);
  color: var(--ok);
}

.chip--warn {
  background: rgba(217, 155, 0, 0.18);
  color: var(--warn);
}

.chip--error {
  background: rgba(194, 59, 59, 0.2);
  color: var(--alert);
}

.panel__header h2 {
  font-size: 1.3rem;
}

.panel__hint {
  color: var(--muted);
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.form-grid label.order-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
}

.form-grid label.order-checkbox input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
}

.form-grid input,
.form-grid textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: var(--bg-alt);
  color: var(--ink);
}

.form-grid select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: var(--bg-alt);
  color: var(--ink);
}

.form-grid textarea {
  resize: vertical;
  min-height: 80px;
  font-family: "IBM Plex Mono", "Consolas", monospace;
  color: var(--code);
}

.order-upload-progress {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  padding: 10px 12px;
}

.order-upload-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.order-upload-progress__label,
.order-upload-progress__percent {
  font-size: 0.88rem;
  color: var(--muted);
}

.order-upload-progress__percent {
  font-weight: 600;
  color: var(--ink);
}

.order-upload-progress__track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}

.order-upload-progress__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.22s ease;
}

.span-2 {
  grid-column: span 2;
}

.field-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
}

.field-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.field-chip input {
  display: none;
}

.field-chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.field-editor {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.auth-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.auth-card input { display: none; }

.auth-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-card__title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
}

.auth-card__desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
}

.auth-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.04);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.order-debug {
  margin-top: 20px;
}

.debug-console {
  background: #10100f;
  color: #f1e8d7;
  border-radius: 12px;
  padding: 16px;
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.4;
  border: 1px solid rgba(0, 0, 0, 0.2);
  white-space: pre-wrap;
}

.panel__actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.is-hidden {
  display: none !important;
}

.scansolution-panel {
  border-style: dashed;
}

.scansolution-upload {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.scan-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-alt);
}

/* Login page: guided sign-in card with tabs. */
.login-panel {
  max-width: 560px;
  margin: 0 auto;
}

.login-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  margin-bottom: 14px;
}

.login-tab {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.login-tab.is-active {
  background: #ffffff;
  border-color: var(--border);
  color: var(--ink);
}

.login-method[hidden] {
  display: none !important;
}

.login-method__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.login-method__title {
  font-weight: 800;
  color: var(--ink);
}

.login-help {
  max-width: 560px;
  margin: 0 auto;
}

.scan-slot__header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}

.scan-slot__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.intake-upload-progress {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.intake-upload-progress.is-active {
  opacity: 1;
}

.intake-upload-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--upload-progress, 0%);
  background: var(--accent);
  transition: width 0.2s ease;
}

.intake-upload-progress.is-indeterminate .intake-upload-progress__bar {
  width: 38%;
  animation: intake-upload-progress-indeterminate 1.1s ease-in-out infinite;
}

.intake-upload-progress__percent {
  align-self: flex-end;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1;
}

@keyframes intake-upload-progress-indeterminate {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(350%);
  }
}

.scan-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #9aa4b2;
}

.scan-swatch--scan1 {
  background: #2b8c8a;
}

.scan-swatch--scan2 {
  background: #e3a054;
}

.scan-swatch--scan3 {
  background: #5f89d4;
}

.scan-slot--scan1 {
  border-color: rgba(43, 140, 138, 0.55);
}

.scan-slot--scan2 {
  border-color: rgba(227, 160, 84, 0.55);
}

.scan-slot--scan3 {
  border-color: rgba(95, 137, 212, 0.55);
}

.scansolution-stage {
  margin-top: 14px;
}

.scansolution-level {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.scansolution-level label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.order-history {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #ffffff;
}

.history-row {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  padding: 10px 12px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  cursor: pointer;
}

.history-row.is-hidden {
  display: none;
}

.history-row:last-child {
  border-bottom: none;
}

.history-row--header {
  background: var(--bg-alt);
  border-color: var(--accent);
  font-weight: 700;
  cursor: default;
}

.history-row--selected {
  background: var(--accent-soft);
}

.workfloweditor-layout__preview.is-interactive {
  pointer-events: auto;
}
.history-row--approved {
  background: rgba(27, 143, 90, 0.08);
  border-left: 4px solid var(--ok);
}

.history-row--reviewed {
  background: rgba(30, 111, 217, 0.12);
  border-left: 4px solid var(--accent);
.workfloweditor-layout-item__input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.85rem;
  background: #ffffff;
}
.workfloweditor-layout-item__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(44, 109, 238, 0.12);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 600;
}
}

.history-row--pending {
  background: rgba(217, 155, 0, 0.12);
  border-left: 4px solid var(--warn);
}

.history-row--rejected {
  background: rgba(194, 59, 59, 0.12);
  border-left: 4px solid var(--alert);
}

.history-row--detail {
  cursor: default;
  background: #f8fafc;
}

.history-row--detail.is-hidden {
  display: none;
}

.history-row--group {
  background: var(--bg-alt);
  font-weight: 600;
  cursor: pointer;
}

.history-row--group:hover {
  background: #eef2f7;
}

.history-group__toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--muted);
  font-weight: 700;
  margin-right: 8px;
  cursor: pointer;
}

.history-group__label {
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.history-group__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.history-cell--full {
  grid-column: 1 / -1;
}

.history-cell {
  color: var(--ink);
  word-break: break-word;
}

.history-detail {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.history-detail__body {
  background: var(--bg-alt);
  border-radius: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  font-size: 0.8rem;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
}

.registration-detail {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.registration-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 6px;
}

.registration-detail__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.registration-detail__label {
  color: var(--muted);
  font-weight: 600;
}

.registration-detail__value {
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}

.registration-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.manager-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.manager-detail__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manager-detail__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manager-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}

.manager-list__item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
}

.manager-list__item--actions {
  align-items: center;
}

.manager-list__empty {
  color: var(--muted);
  font-size: 0.8rem;
  padding: 6px 8px;
}

.button--compact {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 8px;
}

.button--danger {
  border-color: rgba(194, 59, 59, 0.4);
  color: var(--alert);
  background: rgba(194, 59, 59, 0.08);
}

.button--danger:hover {
  box-shadow: 0 10px 16px rgba(194, 59, 59, 0.18);
}

.history-decision {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-decision--modal {
  margin-top: 12px;
}

.history-decision__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.history-decision__target {
  font-weight: 600;
  color: var(--muted);
  margin-right: auto;
}

.history-decision__notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.history-decision__notes textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: #ffffff;
  font-family: "IBM Plex Mono", "Consolas", monospace;
  color: var(--code);
  resize: vertical;
}

.viewer {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.workflow-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 14, 10, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50;
}

.workflow-active .workflow-overlay {
  display: flex;
}

.workflow-overlay__panel {
  width: min(1840px, 98vw);
  height: min(96vh, 1040px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.workflow-overlay__header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #ffffff 0%, #f3f6fb 100%);
  border-radius: 16px 16px 0 0;
}

.workflow-overlay__header-main {
  min-width: 0;
  display: none;
}

.workflow-overlay__header-actions {
  position: relative;
  z-index: 6;
  justify-self: end;
}

.workflow-overlay__header-actions.panel__actions {
  margin-top: 0;
  gap: 6px;
}

.workflow-overlay__header-actions .chip {
  padding: 3px 8px;
  font-size: 0.72rem;
  border-radius: 999px;
}

.workflow-overlay__header h2 {
  margin-bottom: 6px;
  font-size: 1.1rem;
  line-height: 1.2;
}

.workflow-overlay__header p {
  color: var(--muted);
  font-size: 0.95rem;
}

.workflow-overlay__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 18px 22px 22px;
  min-height: 0;
  position: relative;
}

.workflow-overlay.is-sidebar-collapsed .workflow-overlay__body {
  grid-template-columns: minmax(0, 1fr);
}

.workflow-overlay.is-sidebar-collapsed .viewer__sidebar {
  display: none;
}

.workflow-overlay .viewer__canvas {
  min-height: 0;
  height: 100%;
}

.workflow-overlay .viewer__sidebar {
  position: absolute;
  top: 22px;
  left: 30px;
  bottom: 22px;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: min(360px, 30vw);
  min-height: 0;
  z-index: 7;
  /* IMPORTANT: avoid a "dead" interaction zone when overlay menus are minimized.
     The sidebar container should not intercept viewport input in its empty space. */
  pointer-events: none;
}

/* Uploads must remain reachable across workflow steps.
   It stays in normal sidebar flow when expanded; when hidden it is toggled from the header. */
.workflow-overlay .viewer__sidebar .overlay-menu--uploads {
  width: 100%;
  flex: 0 0 auto;
  align-self: stretch;
  margin-top: auto;
}

/* When hidden, do not show the old fixed arrow handle (Uploads is reopened via the header toggle). */
.workflow-overlay .viewer__sidebar .overlay-menu--uploads.is-collapsed {
  display: none;
}

.workflow-overlay .viewer__sidebar > * {
  pointer-events: auto;
}

.viewer__item--root {
  padding-bottom: 10px;
}

/* ScanSolution object list: root items must stack children underneath.
   `.viewer__item--compact` is row-based globally, so override it for roots. */
.viewer__item--root.viewer__item--compact {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.viewer__item--root .viewer__object-row--root {
  width: 100%;
}

.viewer__item--root .viewer__object-children {
  width: 100%;
  padding-left: 34px;
}

.viewer__object-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(31, 41, 55, 0.12);
  background: rgba(255, 255, 255, 0.92);
}

.viewer__object-row--root {
  cursor: pointer;
}

.viewer__object-caret {
  border: 1px solid rgba(31, 41, 55, 0.14);
  background: rgba(243, 246, 251, 0.9);
  color: var(--muted);
  border-radius: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.viewer__object-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex: 0 0 auto;
}

.viewer__object-icon svg {
  width: 18px;
  height: 18px;
}

.viewer__object-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.viewer__object-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer__object-meta {
  display: flex;
  gap: 10px;
}

.viewer__object-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.viewer__object-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}

.viewer__object-toolbar-btn {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--accent-strong);
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.viewer__object-toolbar-btn svg {
  width: 18px;
  height: 18px;
}

.viewer__object-toolbar-btn.is-on {
  border-color: rgba(79, 124, 255, 0.45);
  background: rgba(79, 124, 255, 0.12);
}

.viewer__object-toolbar-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.viewer__object-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--muted);
}

.viewer__status-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}

.viewer__status-icon svg {
  width: 18px;
  height: 18px;
}

.viewer__status-icon.is-on {
  opacity: 0.95;
  color: var(--ink);
}

.viewer__object-children {
  display: none;
  padding: 6px 0 0 0;
}

.viewer__item--root.is-expanded .viewer__object-children {
  display: block;
}

.viewer__object-tree {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px 10px;
}

.viewer__object-row--child,
.viewer__object-row--artifact {
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(31, 41, 55, 0.08);
  background: rgba(243, 246, 251, 0.72);
  cursor: pointer;
}

.viewer__object-row--artifact {
  cursor: default;
  opacity: 0.9;
}

.viewer__object-indent {
  width: 20px;
  height: 1px;
  flex: 0 0 auto;
}

.viewer__object-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid rgba(31, 41, 55, 0.16);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 8px;
  border-radius: 999px;
}

.viewer__item--active .viewer__object-row--root {
  border-color: rgba(79, 124, 255, 0.45);
  box-shadow: 0 10px 18px rgba(79, 124, 255, 0.12);
}

.viewer__history-item--active {
  border-color: rgba(79, 124, 255, 0.45) !important;
  background: rgba(79, 124, 255, 0.12) !important;
}

.viewer__item-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(31, 41, 55, 0.12);
}

.viewer__history-item {
  border: 1px solid rgba(31, 41, 55, 0.14);
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}

.viewer__history-item.is-latest {
  color: var(--ink);
  border-color: rgba(31, 41, 55, 0.22);
}

.viewer__history-item--active,
.viewer__item--active .viewer__history-item.is-latest {
  border-color: rgba(79, 124, 255, 0.55);
  background: rgba(79, 124, 255, 0.12);
  color: var(--ink);
}

.viewer__item-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px;
  margin-top: 8px;
}

.viewer__artifact-pill {
  border: 1px dashed rgba(31, 41, 55, 0.22);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  color: var(--muted);
  background: rgba(243, 246, 251, 0.8);
  white-space: nowrap;
}

.workflow-overlay .viewer__sidebar > .workflow-step {
  width: 100%;
}

.workflow-stepper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.workflow-stepper--header {
  justify-self: center;
  width: min(760px, 76vw);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.workflow-instructions {
  position: absolute;
  left: auto;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  width: fit-content;
  max-width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--ink);
  box-shadow: none;
  z-index: 12;
  user-select: none;
  -webkit-user-select: none;
}

/* Footer instruction overlay order: keep text beside the media with the media on the far right. */
.workflow-instructions__text {
  order: 1;
}

.workflow-instruction-image,
.workflow-instruction-video {
  order: 2;
}

/* When footer media is present, we still keep a compact max width (each card sizes itself). */
.workflow-instructions.workflow-instructions--media-overlay {
  width: fit-content;
  max-width: calc(100vw - 32px);
  align-items: flex-end;
}

.workflow-instructions__title {
  display: none;
}

.workflow-instruction-image,
.workflow-instruction-video {
  width: clamp(72px, 12vw, 132px);
  max-height: 88px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  box-shadow: 0 8px 16px var(--shadow);
}

/* Footer instruction media: larger preview, contain-fit (no zoom/crop), text sits underneath. */
.workflow-instructions--media-overlay .workflow-instruction-image,
.workflow-instructions--media-overlay .workflow-instruction-video {
  width: clamp(220px, 24vw, 340px);
  max-height: 160px;
  padding: 8px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(243, 246, 251, 0.95);
  border: 1px solid var(--border);
  box-shadow: 0 10px 18px var(--shadow);
  cursor: zoom-in;
}

.workflow-instruction-image[hidden],
.workflow-instruction-video[hidden] {
  display: none;
}

/* Menu/sidebar instruction media: compact framed asset inside the tool panel. */
.overlay-menu__instruction-media {
  display: none;
  margin: 0 0 10px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(243, 246, 251, 0.86);
}

.overlay-menu__instruction-media-asset {
  width: 100%;
  max-height: 160px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(31, 41, 55, 0.14);
  box-shadow: 0 10px 18px var(--shadow);
}

.workflow-instructions__text {
  display: inline-block;
  width: fit-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(243, 246, 251, 0.95);
  border: 1px solid var(--border);
  box-shadow: 0 10px 18px var(--shadow);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  color: var(--muted);
}

.workflow-stepper__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%;
}

.workflow-stepper__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.step-tab {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  padding: 4px 6px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.step-tab.is-active {
  background: var(--accent);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 18px rgba(16, 33, 50, 0.12);
}

.workflow-stepper__row .button {
  padding: 4px 8px;
  font-size: 0.7rem;
  border-radius: 8px;
}

.workflow-step {
  display: none;
}

.workflow-step.is-active {
  display: block;
}

.gh-runtime-step .overlay-menu__body {
  gap: 10px;
}

.info-runtime-menu .overlay-menu__body {
  gap: 10px;
}

.info-runtime-image {
  width: 100%;
  max-height: min(34vh, 240px);
}

.modal__card--info {
  width: min(980px, 95vw);
  max-height: 92vh;
}

.workflow-info-modal__title {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.workflow-info-modal__body {
  display: grid;
  gap: 14px;
  overflow-y: auto;
}

.workflow-info-modal__media {
  width: 100%;
  max-height: min(56vh, 520px);
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.workflow-info-modal__text {
  margin: 0;
  color: var(--ink);
  white-space: pre-wrap;
  line-height: 1.45;
}

.workflow-step-next {
  margin-left: auto;
}

.gh-runtime-form {
  display: grid;
  gap: 8px;
  max-height: min(36vh, 280px);
  overflow-y: auto;
  padding-right: 4px;
}

.gh-runtime-field {
  display: grid;
  gap: 5px;
}

.gh-runtime-field__label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}

.gh-mesh-select {
  --gh-mesh-color: transparent;
  border-left: 3px solid transparent;
  padding-left: 8px;
}

.gh-mesh-select-wrap {
  display: block;
}

.gh-mesh-select.gh-mesh-select--colored {
  border-left-color: var(--gh-mesh-color);
}

.gh-runtime-auto {
  font-size: 0.82rem;
}

.gh-runtime-auto input {
  margin-right: 6px;
}

.gh-runtime-progress {
  display: grid;
  gap: 6px;
}

.gh-runtime-progress[hidden] {
  display: none !important;
}

.gh-runtime-progress__label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}

.gh-runtime-progress__track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.12);
  overflow: hidden;
}

.gh-runtime-progress__bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f7cff, #6fb3ff);
  transition: width 160ms ease;
}

.gh-runtime-checkbox {
  width: 18px;
  height: 18px;
}

.workflow-overlay .viewer__list {
  max-height: none;
  flex: 1;
}

.overlay-menu {
  background: #fffdf8;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 18px var(--shadow);
  z-index: 9;
  width: 100%;
}

.overlay-menu--viewport {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-color: rgba(180, 186, 196, 0.7);
}

/* The generic overlay-menu sets width: 100%. For viewport overlays like the Hand Pose Mass Sheet
   we need a narrower fixed clamp, so force it here with higher specificity. */
.overlay-menu.hand-pose-sheet-overlay {
  width: clamp(320px, 26vw, 420px) !important;
}

.overlay-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f3f6fb 100%);
  border-bottom: 1px solid var(--border);
}

.overlay-menu__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.overlay-menu__dock {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--accent-strong);
  border-radius: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.overlay-menu__dock svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.overlay-menu__dock:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(16, 14, 10, 0.18);
}

.overlay-menu__toggle {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.overlay-menu.is-collapsed .overlay-menu__body {
  display: none;
}

.overlay-menu.is-collapsed {
  width: auto;
  min-width: 44px;
  max-width: min(260px, 40vw);
  border-radius: 999px;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  align-self: flex-start;
}

.overlay-menu.is-collapsed .overlay-menu__header {
  justify-content: flex-start;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.overlay-menu.is-collapsed .overlay-menu__header h3 {
  display: none;
}

.overlay-menu.is-collapsed .overlay-menu__header-actions > :not([data-overlay-toggle]) {
  display: none;
}

.overlay-menu__toggle.is-arrow-only {
  width: auto;
  min-width: 30px;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.overlay-menu.is-docked {
  width: 44px;
}

.overlay-menu.is-docked .overlay-menu__body {
  display: none;
}

.overlay-menu.is-docked .overlay-menu__header {
  justify-content: center;
  padding: 10px;
}

.overlay-menu.is-docked .overlay-menu__header h3 {
  display: none;
}

.overlay-menu.is-docked .overlay-menu__header-actions > :not(.overlay-menu__dock) {
  display: none;
}

.overlay-menu.is-docked .overlay-menu__dock svg {
  transform: rotate(180deg);
}

.overlay-menu[data-dock-side="right"] .overlay-menu__dock svg {
  transform: rotate(180deg);
}

.overlay-menu[data-dock-side="right"].is-docked .overlay-menu__dock svg {
  transform: rotate(0deg);
}

.overlay-menu__header h3 {
  font-size: 1rem;
}

.overlay-menu__title--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.overlay-menu__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.overlay-menu__title-icon svg {
  width: 22px;
  height: 22px;
}

.overlay-menu__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 40vh;
  overflow-y: auto;
  min-height: 0;
}

/* Workflow overlay sidebar: when there is enough vertical space, let open menus
   expand to fill the sidebar height (especially useful when other menus are minimized).
   Keep the generic 40vh clamp for other contexts to avoid huge panels on small screens. */
@media (min-height: 780px) {
  .workflow-overlay .viewer__sidebar > .workflow-step.is-active {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .workflow-overlay .viewer__sidebar .overlay-menu:not(.overlay-menu--uploads) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .workflow-overlay .viewer__sidebar .overlay-menu--uploads {
    flex: 0 0 auto;
    min-height: 0;
  }

  .workflow-overlay .viewer__sidebar .overlay-menu.is-collapsed,
  .workflow-overlay .viewer__sidebar .overlay-menu.is-docked {
    flex: 0 0 auto;
  }

  .workflow-overlay .viewer__sidebar .overlay-menu:not(.overlay-menu--uploads) .overlay-menu__body {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Uploads stays compact even on tall viewports to avoid covering the active step panel. */
  .workflow-overlay .viewer__sidebar .overlay-menu--uploads .overlay-menu__body {
    max-height: 40vh;
    flex: 0 0 auto;
  }

  .workflow-overlay .viewer__sidebar .overlay-menu:not(.overlay-menu--uploads) .viewer__list {
    max-height: none;
  }

  .workflow-overlay .viewer__sidebar .overlay-menu--uploads .viewer__list {
    max-height: min(40vh, 420px);
  }
}

.overlay-menu__row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.overlay-menu__row--center {
  justify-content: center;
}

.overlay-menu__row--split {
  justify-content: space-between;
}

.overlay-menu__details {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.overlay-menu__details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-strong);
  list-style: none;
}

.overlay-menu__details > summary::-webkit-details-marker {
  display: none;
}

.overlay-menu__details > summary::after {
  content: "▾";
  margin-left: 8px;
  font-size: 0.9em;
  opacity: 0.8;
}

.overlay-menu__details[open] > summary::after {
  content: "▴";
}

.overlay-menu__details > :not(summary) {
  margin-top: 10px;
}

.workflow-step[data-workflow-step-panel="landmark"] .landmark-list {
  max-height: min(240px, 28vh);
  overflow: auto;
}

.trimline-finish-row {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.button.is-accent {
  background: #2f9e5b;
  border-color: #2f9e5b;
  color: #ffffff;
  box-shadow: 0 12px 20px rgba(21, 90, 57, 0.18);
}

.button.is-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 24px rgba(21, 90, 57, 0.22);
}

.overlay-menu__label {
  font-size: 0.85rem;
  color: var(--muted);
}

.active-scan {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 0.95rem;
}

.active-scan__swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--active-scan-color, var(--border));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.active-scan__label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay-menu__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overlay-menu__collapsible {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overlay-menu__collapsible[hidden] {
  display: none;
}

.overlay-menu__value {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: -4px;
}

.viewer-tools {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: auto;
  display: flex;
  gap: 8px;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.viewer-tools.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.viewer-tools--right {
  top: calc(50% - 40px);
  right: 16px;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
  z-index: 260;
  gap: 12px;
}

.viewer-tools--left {
  top: 50%;
  left: 16px;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
  z-index: 6;
  gap: 12px;
}

.viewer-tools__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 18px var(--shadow);
}

.viewer-tools__group--secondary {
  position: relative;
  pointer-events: auto;
  z-index: 261;
}

.viewer-tools__group--secondary .icon-button {
  pointer-events: auto;
  touch-action: manipulation;
}

.viewport-settings-menu {
  position: absolute;
  left: 16px;
  top: 55%;
  bottom: auto;
  transform: translateY(-50%);
  width: min(280px, 82vw);
  display: none;
  z-index: 320;
}

.analysis-overlay {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: min(320px, 88vw);
  display: none;
  z-index: 320;
}

.analysis-slice-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100% - 420px));
  max-height: calc(100% - 24px);
  display: none;
  z-index: 6;
}

.workflow-overlay.is-sidebar-collapsed .analysis-slice-overlay {
  width: min(980px, calc(100% - 24px));
}

.analysis-slice-overlay.is-visible {
  display: flex;
}

.analysis-slice-overlay .overlay-menu__body {
  max-height: min(70vh, 680px);
  overflow: auto;
}

.analysis-slice {
  overflow: auto;
  max-height: min(70vh, 680px);
  cursor: grab;
}

.analysis-slice img {
  display: block;
}

.viewport-toolbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 18px var(--shadow);
  z-index: 7;
  max-width: calc(100% - 24px);
  flex-wrap: wrap;
  justify-content: center;
}

.viewport-toolbar__section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewport-toolbar__section--sliders {
  gap: 12px;
}

.viewport-toolbar__section--history {
  gap: 6px;
}

.viewport-toolbar__divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

.viewport-toolbar__slider {
  display: flex;
  align-items: center;
  gap: 6px;
}

.viewport-toolbar__slider svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.viewport-toolbar__slider input[type="range"] {
  width: 90px;
}

.viewport-toolbar__value {
  min-width: 24px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--muted);
}

.viewport-toolbar__slider[data-tooltip] {
  position: relative;
}

.viewport-toolbar__slider[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(19, 24, 36, 0.92);
  color: #f7f8ff;
  font-size: 0.68rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.viewport-toolbar__slider[data-tooltip]:hover::after {
  opacity: 1;
}

.viewport-toolbar__collapse svg {
  transition: transform 0.2s ease;
}

.viewport-toolbar.is-collapsed .viewport-toolbar__section--modes,
.viewport-toolbar.is-collapsed .viewport-toolbar__section--sliders {
  display: none;
}

.viewport-toolbar.is-collapsed .viewport-toolbar__divider--sculpt,
.viewport-toolbar.is-collapsed .viewport-toolbar__divider--sliders {
  display: none;
}

.viewport-toolbar.is-collapsed .viewport-toolbar__collapse svg {
  transform: rotate(180deg);
}

.viewport-toolbar .icon-button[data-tooltip] {
  position: relative;
}

.viewport-toolbar .icon-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(19, 24, 36, 0.92);
  color: #f7f8ff;
  font-size: 0.68rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.viewport-toolbar .icon-button[data-tooltip]:hover::after {
  opacity: 1;
}

@media (max-width: 1100px) {
  .viewport-toolbar {
    gap: 8px 10px;
    padding: 8px;
  }

  .viewport-toolbar__divider {
    display: none;
  }

  .viewport-toolbar__slider input[type="range"] {
    width: 70px;
  }
}

@media (max-width: 760px) {
  .viewport-toolbar {
    left: 12px;
    right: 12px;
    transform: none;
  }
}

.sculpt-overlay {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: min(260px, 82vw);
  z-index: 7;
}

.sculpt-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.sculpt-mode-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.analysis-overlay.is-visible {
  display: flex;
}

.analysis-metrics {
  display: grid;
  gap: 8px;
  font-size: 0.85rem;
}

.analysis-metric {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.analysis-metric--bad {
  background: rgba(194, 59, 59, 0.15);
  border-color: rgba(194, 59, 59, 0.3);
}

.analysis-metric__label {
  color: var(--muted);
}

.analysis-metric__value {
  font-weight: 600;
  color: var(--ink);
}

.viewport-settings-menu.is-visible {
  display: flex;
}

.viewport-settings-menu .overlay-menu__body {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}

.overlay-menu__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.overlay-menu__tab {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.overlay-menu__tab.is-active {
  color: var(--accent-strong);
  border-color: rgba(44, 109, 238, 0.5);
  background: rgba(44, 109, 238, 0.12);
}

.overlay-menu__panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.overlay-menu__panel.is-active {
  display: flex;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.icon-button--label {
  width: auto;
  min-width: 84px;
  height: 34px;
  padding: 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(16, 14, 10, 0.18);
  border-color: var(--accent);
}

.icon-button--active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.icon-button:disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.transform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.transform-grid--modes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transform-btn {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--accent-strong);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.transform-btn.is-active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.transform-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(16, 33, 50, 0.12);
}

.crop-rect {
  position: absolute;
  border: 1px dashed var(--accent);
  background: rgba(30, 111, 217, 0.12);
  border-radius: 8px;
  display: none;
  pointer-events: none;
}

.lasso-overlay {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 4;
  width: 100%;
  height: 100%;
}

.lasso-overlay.is-visible {
  display: block;
}

.lasso-path {
  fill: rgba(255, 193, 107, 0.25);
  stroke: rgba(255, 138, 91, 1);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.overlay-menu__points {
  border: 1px solid var(--border);
  background: #ffffff;
  border-radius: 10px;
  padding: 8px;
  max-height: 160px;
  overflow-y: auto;
  font-family: "IBM Plex Mono", "Consolas", monospace;
  font-size: 0.82rem;
  color: var(--code);
}

.overlay-menu__body label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--muted);
}

.overlay-menu__body select,
.overlay-menu__body input {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: var(--bg-alt);
  color: var(--ink);
}

.overlay-menu__hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.overlay-menu .viewer__list {
  max-height: 200px;
}

/* Ensure the workflow overlay sidebar isn't limited by the generic upload list cap. */
.workflow-overlay .viewer__sidebar .overlay-menu .viewer__list {
  max-height: none;
}

.viewer__canvas {
  min-height: 360px;
  background: #f3f2ee;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.multi-viewport {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  padding: 12px;
  background: rgba(243, 242, 238, 0.96);
  z-index: 4;
}

.multi-viewport.is-visible {
  display: grid;
}

.multi-viewport.is-maximized {
  grid-template-columns: 1fr;
}

.multi-viewport__empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
}

.multi-viewport__cell {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(16, 14, 10, 0.12);
}

.multi-viewport__cell.is-hidden {
  display: none;
}

.multi-viewport__cell.is-maximized {
  grid-column: 1 / -1;
}

.multi-viewport__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.multi-viewport__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.multi-viewport__status {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  background: #ffffff;
}

.multi-viewport__status.is-loading {
  color: #b06b00;
  border-color: rgba(176, 107, 0, 0.4);
  background: rgba(255, 236, 200, 0.7);
}

.multi-viewport__status.is-ready {
  color: #20724b;
  border-color: rgba(32, 114, 75, 0.4);
  background: rgba(214, 244, 226, 0.7);
}

.multi-viewport__status.is-error {
  color: #b6422f;
  border-color: rgba(182, 66, 47, 0.4);
  background: rgba(255, 220, 215, 0.7);
}

.multi-viewport__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-viewport__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  background: #ffffff;
}

.multi-viewport__toggle {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.multi-viewport__count.is-empty {
  opacity: 0.6;
}

.multi-viewport__canvas {
  position: relative;
  min-height: 180px;
}

.viewer-toast {
  position: fixed;
  left: 18px;
  right: auto;
  bottom: 18px;
  max-width: min(320px, 80vw);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(23, 25, 26, 0.9);
  color: #f7f2ea;
  font-size: 0.88rem;
  box-shadow: 0 12px 24px rgba(16, 14, 10, 0.3);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

.viewport-active-scan {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 248, 238, 0.92);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  box-shadow: 0 8px 16px var(--shadow);
  z-index: 6;
}

.viewport-active-scan__swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.viewport-active-scan__label {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landmark-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: 0.72rem;
  color: var(--ink);
}

.landmark-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landmark-row.is-selected {
  background: color-mix(in srgb, var(--accent-soft) 18%, transparent 82%);
  border-radius: 8px;
  padding: 4px 6px;
}

.landmark-row--pending {
  color: var(--muted);
}

.landmark-row__label {
  font-weight: 600;
  color: var(--muted);
}

.landmark-row__state {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-soft) 50%, #ffffff 50%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border) 74%);
  border-radius: 999px;
  padding: 1px 6px;
}

.landmark-row__input {
  flex: 1;
  min-width: 120px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 0.72rem;
  background: #ffffff;
}

.viewport-status {
  position: absolute;
  top: 52px;
  right: 16px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 248, 238, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  box-shadow: 0 8px 16px var(--shadow);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 6;
  max-width: min(360px, 42vw);
  text-align: right;
}

.viewport-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.viewport-status.is-ok {
  color: var(--accent-strong);
}

.viewer-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Review toast (bottom-left, non-intrusive) ────────────────────── */
.review-toast {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 12000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(380px, 85vw);
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1c2127 0%, #252a30 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8e2d8;
  font-size: 0.84rem;
  line-height: 1.45;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateX(-24px) translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.review-toast.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: auto;
}

.review-toast.is-dismissing {
  opacity: 0;
  transform: translateX(-24px) translateY(12px);
  pointer-events: none;
}

.review-toast__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(80, 200, 120, 0.15);
  color: #50c878;
  font-size: 1.05rem;
}

.review-toast__body {
  flex: 1;
  min-width: 0;
}

.review-toast__title {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: #f0ece4;
  margin: 0 0 3px;
}

.review-toast__text {
  font-size: 0.76rem;
  color: #9e9a92;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-toast__action {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #50c878;
  margin-top: 6px;
}

.review-toast__close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #9e9a92;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
  margin-top: -2px;
}

.review-toast__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #e8e2d8;
}

.review-toast__progress {
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 1px;
  background: rgba(80, 200, 120, 0.3);
  overflow: hidden;
}

.review-toast__progress-bar {
  height: 100%;
  background: #50c878;
  border-radius: 1px;
  width: 100%;
  transform-origin: left;
  animation: reviewToastProgress 8s linear forwards;
}

@keyframes reviewToastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Upload progress toast ─────────────────────────────── */
.upload-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 13000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(400px, calc(100vw - 48px));
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1c2127 0%, #252a30 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8e2d8;
  font-size: 0.84rem;
  line-height: 1.45;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateX(24px) translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.upload-toast.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: auto;
}

.upload-toast.is-dismissing {
  opacity: 0;
  transform: translateX(24px) translateY(12px);
  pointer-events: none;
}

.upload-toast__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(80, 150, 255, 0.15);
  color: #6ba3ff;
  font-size: 1rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.upload-toast.is-success .upload-toast__icon {
  background: rgba(80, 200, 120, 0.15);
  color: #50c878;
}

.upload-toast.is-error .upload-toast__icon {
  background: rgba(255, 91, 87, 0.15);
  color: #ff5b57;
}

.upload-toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upload-toast__title {
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: #f0ece4;
  margin: 0;
}

.upload-toast__text {
  font-size: 0.76rem;
  color: #9e9a92;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-toast__progress {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 4px;
}

.upload-toast__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6ba3ff, #50a0ff);
  border-radius: 2px;
  transition: width 0.35s ease;
}

.upload-toast.is-success .upload-toast__progress-bar {
  background: linear-gradient(90deg, #50c878, #40b868);
}

.upload-toast.is-error .upload-toast__progress-bar {
  background: linear-gradient(90deg, #ff5b57, #e04440);
}

.upload-toast__close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #9e9a92;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
  margin-top: -2px;
}

.upload-toast__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #e8e2d8;
}

/* ── Inline review paint toolbar ─────────────────────── */
.inline-review-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  flex-wrap: wrap;
}

.inline-review-toolbar__group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.inline-review-toolbar__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.inline-review-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.inline-review-toolbar__btn:hover {
  background: var(--panel);
  border-color: var(--accent);
}

.inline-review-toolbar__btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.inline-review-toolbar__color {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: var(--bg-alt);
}

.inline-review-toolbar__range {
  width: 80px;
  accent-color: var(--accent);
}

.inline-review-toolbar__separator {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}

/* ── Inline measurement overlay ──────────────────────── */
.inline-review-measure-label {
  position: absolute;
  z-index: 5;
  background: rgba(28, 33, 39, 0.88);
  color: #f0ece4;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}

.inline-review-measure-label.is-total {
  background: rgba(14, 161, 99, 0.92);
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 8px;
}

.inline-review-toolbar__btn--sub {
  font-size: 0.72rem;
  padding: 0 6px;
  min-width: 24px;
  height: 24px;
}

.inline-review-toolbar__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.workflow-page:not(.workflow-active) .viewer__canvas {
  min-height: 70vh;
}

.workflow-page.workflow-mode .panel:not(.panel--viewer) {
  display: none;
}

.workflow-page.workflow-mode .viewer {
  grid-template-columns: 1fr;
}

.workflow-page.workflow-mode .viewer__sidebar {
  display: none;
}

.workflow-layout-runtime {
  position: relative;
  min-height: 320px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--bg-alt);
  overflow: hidden;
}

.workflow-layout-runtime.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.viewer__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.viewer__toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.viewer__toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.viewer__toolbar input,
.viewer__toolbar select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: var(--bg-alt);
  color: var(--ink);
}

.viewer__list {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fffdf8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  min-height: 0;
}

.upload-input {
  display: none;
}

.viewer__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #ffffff;
}

.viewer__item--compact {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-left: 4px solid var(--upload-color, var(--border));
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.viewer__item--child {
  margin-left: 18px;
  background: #f9fbff;
  border-style: dashed;
}

.viewer__item--child .viewer__item-meta {
  font-size: 0.72rem;
}

.viewer__item--compact:hover {
  box-shadow: 0 8px 16px rgba(16, 14, 10, 0.12);
  transform: translateY(-1px);
}

.viewer__item--active {
  background: var(--upload-color-soft, #fff7ef);
  border-color: var(--upload-color, var(--border));
  box-shadow: 0 10px 18px rgba(16, 14, 10, 0.18);
}

.viewer__item--hidden {
  opacity: 0.55;
}

.viewer__item--reference {
  border-color: var(--accent);
  box-shadow: 0 10px 18px rgba(16, 14, 10, 0.2);
}

.viewer__item--compact strong {
  font-size: 0.9rem;
  display: block;
}

.viewer__item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.viewer__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.viewer__item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.upload-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--upload-color, var(--border));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.viewer__item-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viewer__item-toggle,
.viewer__item-reference,
.viewer__item-send,
.viewer__item-remove {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff7ef;
  color: #8a3b32;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.viewer__item-toggle svg {
  width: 14px;
  height: 14px;
}

.viewer__item-toggle.is-on,
.viewer__item-reference.is-on,
.viewer__item-send.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: #f0fbfb;
}

.viewer__item-toggle:hover,
.viewer__item-reference:hover,
.viewer__item-send:hover,
.viewer__item-remove:hover {
  transform: translateY(-1px);
  border-color: #c56c5e;
  box-shadow: 0 6px 12px rgba(16, 14, 10, 0.15);
}

.viewer__item-toggle:active,
.viewer__item-reference:active,
.viewer__item-send:active,
.viewer__item-remove:active {
  transform: translateY(0);
}

#alignStatus,
#alignAxisStatus,
#prepStatus {
  display: none;
}

.viewer__item strong {
  font-size: 0.95rem;
}

.viewer__item .button {
  align-self: flex-start;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.product-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 18px var(--shadow);
}

.product-card__media {
  width: 100%;
  height: 140px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: var(--bg-alt);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  padding: 10px;
}

.product-card__media.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.product-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-card__meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.product-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

.button {
  border: none;
  background: var(--accent);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16, 33, 50, 0.12);
}

.button--active {
  background: var(--accent-strong);
  box-shadow: 0 10px 18px rgba(16, 33, 50, 0.16);
}

.button--ghost {
  background: transparent;
  color: var(--accent-strong);
  border: 1px solid var(--border);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}

.chip--muted {
  color: var(--muted);
}

.list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list__item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list__meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.log {
  margin-top: 12px;
  background: #1c1b18;
  color: #f7f1e5;
  border-radius: 12px;
  padding: 12px;
  font-family: "IBM Plex Mono", "Consolas", monospace;
  font-size: 0.85rem;
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: span 1;
  }

  .viewer {
    grid-template-columns: 1fr;
  }

  .hero__row,
  .panel__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .intake-hero-media {
    width: 100%;
  }
}

.history-modal__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

.history-modal__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.history-detail-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-detail-card__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.history-detail-card__value {
  font-size: 0.9rem;
  color: var(--ink);
  word-break: break-word;
}

.history-detail-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-detail-files__item {
  padding: 6px 8px;
  border-radius: 8px;
  background: #f6efe2;
  font-size: 0.85rem;
  color: var(--ink);
}

.history-detail-files__item--row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.viewer-debug {
  position: absolute;
  right: 16px;
  top: 16px;
  min-width: 220px;
  max-width: min(420px, 80vw);
  background: rgba(10, 11, 12, 0.88);
  color: #f4efe6;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: "IBM Plex Mono", "Consolas", monospace;
  font-size: 0.75rem;
  line-height: 1.35;
  box-shadow: 0 12px 24px rgba(10, 10, 10, 0.25);
  z-index: 6;
  display: none;
}

.viewer-debug.is-visible {
  display: block;
}

.viewer-debug__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.78rem;
}

.viewer-debug__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viewer-debug__button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #f4efe6;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  cursor: pointer;
}

.viewer-debug__body {
  margin: 0;
  white-space: pre-wrap;
}

.viewer__canvas canvas,
.multi-viewport__canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.workflow-auto-run-overlay {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: min(360px, 90vw);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(10, 11, 12, 0.7);
  color: rgba(244, 239, 230, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.22);
  z-index: 50;
  pointer-events: none;
}

.workflow-auto-run-overlay[hidden] {
  display: none;
}

.workflow-auto-run-overlay__label {
  font-size: 0.85rem;
  line-height: 1.2;
  margin-bottom: 8px;
}

.workflow-auto-run-overlay__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.workflow-auto-run-overlay__bar {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: rgba(244, 239, 230, 0.75);
  transform: translateX(-120%);
  animation: workflow-auto-run-progress 1.05s ease-in-out infinite;
}

@keyframes workflow-auto-run-progress {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(220%);
  }
}

/* =====================================================================
   ServiceFab Enterprise Shell 2.0 – Visual Redesign
   Purpose: Professional enterprise-grade header, navigation, typography,
            and data presentation for all customer-facing pages.
   Author: Yves Metz
   Changelog:
   - 2026-03-04: Initial creation – unified dark header, tab-style
                  navigation, refined Orders data table, improved spacing,
                  typography, and status-chip treatment.
   ===================================================================== */

/* --- Extended Design Tokens ----------------------------------------- */
:root {
  --sf-header-bg: #0f172a;
  --sf-header-surface: rgba(255, 255, 255, 0.06);
  --sf-header-ink: rgba(255, 255, 255, 0.92);
  --sf-header-muted: rgba(255, 255, 255, 0.52);
  --sf-header-divider: rgba(255, 255, 255, 0.08);
  --sf-radius-xs: 4px;
  --sf-radius-sm: 6px;
  --sf-table-header: #f8fafc;
  --sf-table-stripe: #fafbfd;
  --sf-table-hover: #f1f5f9;
  --sf-table-border: #e2e8f0;
  --sf-transition: 0.18s ease;
}

/* --- Typography upgrade --------------------------------------------- */
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Unified Shell Header ------------------------------------------- */
.sf-header {
  gap: 0;
  background: var(--sf-header-bg);
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Full-bleed on customer-facing pages */
body.index-page .sf-header,
body.orders-page .sf-header {
  margin: -16px -16px 0;
  width: calc(100% + 32px);
}

.sf-header__top {
  padding: 12px 28px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.sf-header__title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.sf-header__logo {
  height: 26px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Search input – dark-mode treatment */
.sf-header__search {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: var(--sf-radius-sm);
  transition: background var(--sf-transition), border-color var(--sf-transition);
}

.sf-header__search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.sf-header__search:focus {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.24);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 111, 217, 0.25);
}

/* Chips in dark header */
.sf-header__right .chip {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Buttons in dark header */
.sf-header__right .button {
  font-size: 0.82rem;
}

.sf-header__right .button--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.sf-header__right .button--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

.sf-header__right .button:not(.button--ghost) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.sf-header__right .button:not(.button--ghost):hover {
  background: rgba(255, 255, 255, 0.16);
  transform: none;
  box-shadow: none;
}

/* --- Navigation Bar ------------------------------------------------- */
.sf-nav {
  padding: 0 28px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-top: 1px solid var(--sf-header-divider);
  box-shadow: none;
  gap: 0;
}

.sf-nav__link {
  padding: 11px 18px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--sf-header-muted);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  transition: color var(--sf-transition), border-color var(--sf-transition),
    background var(--sf-transition);
}

.sf-nav__link:hover {
  color: var(--sf-header-ink);
  background: var(--sf-header-surface);
}

.sf-nav__link.is-active {
  color: #ffffff;
  border-bottom-color: var(--accent);
  background: transparent;
}

/* --- Orders Panel – Clean Surface ----------------------------------- */
body.orders-page .panel {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.orders-page .panel__header {
  padding: 20px 0 14px;
}

body.orders-page .panel__header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --- Orders Toolbar ------------------------------------------------- */
body.orders-page .panel__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.orders-page .order-history-filter {
  border: 1px solid var(--sf-table-border);
  border-radius: var(--sf-radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  background: #ffffff;
  transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
  min-width: 260px;
}

body.orders-page .order-history-filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* --- Orders Table – Enterprise Data Grid ---------------------------- */
body.orders-page .orders-inbox {
  border: 1px solid var(--sf-table-border);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.03);
}

body.orders-page .orders-table th,
body.orders-page .orders-table td {
  padding: 13px 20px;
  font-size: 0.88rem;
  border-bottom: 1px solid #f0f2f5;
}

body.orders-page .orders-table thead th {
  background: var(--sf-table-header);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--sf-table-border);
  padding: 11px 20px;
}

body.orders-page .orders-table tbody tr {
  transition: background var(--sf-transition);
}

body.orders-page .orders-table tbody tr:nth-child(even of :not(.orders-inline-detail-row)) {
  background: var(--sf-table-stripe);
}

body.orders-page .orders-table tr:hover {
  background: var(--sf-table-hover);
}

body.orders-page .orders-table tbody tr:last-child td {
  border-bottom: none;
}

/* Selected row accent */
body.orders-page .orders-table tr.row-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* --- Status Chips – Refined ----------------------------------------- */
body.orders-page .chip {
  font-size: 0.7rem;
  padding: 3px 10px;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--sf-radius-sm);
}

body.orders-page .chip--success {
  background: rgba(27, 143, 90, 0.1);
  color: #15803d;
}

body.orders-page .chip--warn {
  background: rgba(217, 155, 0, 0.1);
  color: #b45309;
}

body.orders-page .chip--error {
  background: rgba(194, 59, 59, 0.1);
  color: #b91c1c;
}

/* --- Inline Detail – Clean Expansion -------------------------------- */
body.orders-page .orders-inline-detail {
  margin: 0;
  border-radius: 0;
  border: none;
  border-left: 3px solid var(--accent);
  background: var(--sf-table-stripe);
}

body.orders-page .orders-inline-detail-row:hover {
  background: transparent;
}

/* --- Review Viewer Modal – Polished --------------------------------- */
body.orders-page .modal__card--review {
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

/* --- Responsive polish ---------------------------------------------- */
@media (max-width: 900px) {
  .sf-header__top {
    padding: 10px 16px;
  }

  .sf-nav {
    padding: 0 16px;
    overflow-x: auto;
  }

  body.orders-page .orders-table th,
  body.orders-page .orders-table td {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  body.orders-page .panel__header h2 {
    font-size: 1.2rem;
  }

  body.orders-page .order-history-filter {
    min-width: 180px;
  }
}

@media (max-width: 600px) {
  body.orders-page .panel__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  body.orders-page .order-history-filter {
    width: 100%;
    min-width: auto;
  }
}

/* =====================================================================
   Enterprise Shell 2.0 – Login / Registration Pages
   Purpose: Dark full-viewport centered card login experience matching
            the enterprise header aesthetic.
   Author: Yves Metz
   Changelog:
   - 2026-03-04: Initial creation – dark gradient background, centered
                  card, polished inputs, tab switcher, brand block.
   ===================================================================== */

/* --- Login page full-viewport dark background ----------------------- */
body.login-page {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Login shell – vertical stack centered -------------------------- */
.login-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 440px;
  padding: 40px 20px;
  min-height: auto;
}

/* --- Brand block ---------------------------------------------------- */
.login-brand {
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}

.login-brand__logo {
  height: 48px;
  width: auto;
  margin-bottom: 12px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.login-brand__name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 4px;
}

.login-brand__tagline {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
}

/* --- Login card ----------------------------------------------------- */
.login-card {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.login-card[hidden] {
  display: none !important;
}

.login-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 0;
}

.login-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.login-card__body {
  padding: 20px 28px 24px;
}

.login-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.login-card__actions .button {
  flex: 1;
}

.login-card__footer {
  display: flex;
  justify-content: center;
  padding: 14px 28px;
  border-top: 1px solid #f0f2f5;
  background: #fafbfc;
}

.login-card__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--sf-transition);
}

.login-card__link:hover {
  color: var(--ink);
}

/* --- Login form fields ---------------------------------------------- */
.login-field {
  margin-bottom: 16px;
}

.login-field__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.login-field__input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 0.92rem;
  border: 1px solid #dce1e8;
  border-radius: var(--sf-radius-sm);
  background: #ffffff;
  color: var(--ink);
  transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
  box-sizing: border-box;
}

.login-field__input::placeholder {
  color: #a0aec0;
}

.login-field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-field__hint {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
/* --- Registration form: row layout for paired inputs ---------------- */
.login-field--row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.login-field__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.login-field__col--narrow {
  flex: 0 0 110px;
  max-width: 110px;
}

/* Section label (e.g. "Address (optional)") */
.login-field__section-label {
  margin: 18px 0 6px;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Optional badge inline with field label */
.login-field__optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.78em;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Login tabs (override for dark-bg context) ---------------------- */
body.login-page .login-tabs {
  background: #f5f7fa;
  border-color: #e8ecf1;
}

body.login-page .login-tab {
  font-size: 0.82rem;
  padding: 9px 10px;
}

body.login-page .login-tab.is-active {
  background: #ffffff;
  border-color: #dce1e8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* --- Login method panels -------------------------------------------- */
body.login-page .login-method__header {
  margin-bottom: 14px;
}

body.login-page .login-method__title {
  font-size: 0.88rem;
}

/* --- Help text below card ------------------------------------------- */
.login-help-text {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  max-width: 380px;
  line-height: 1.5;
}

/* --- Login responsive ----------------------------------------------- */
@media (max-width: 500px) {
  .login-shell {
    padding: 24px 16px;
  }

  .login-card__header {
    padding: 16px 20px 0;
  }

  .login-card__body {
    padding: 16px 20px 20px;
  }

  .login-brand__name {
    font-size: 1.3rem;
  }
}

/* =====================================================================
   Enterprise Shell 2.0 – User Menu Dropdown
   Purpose: Person icon trigger with dropdown for user profile,
            contact details, and sign-out action.
   Author: Yves Metz
   Changelog:
   - 2026-03-04: Initial creation – icon trigger, card dropdown,
                  identity block, contact details, sign-out.
   ===================================================================== */

/* --- User menu container -------------------------------------------- */
.sf-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* --- Trigger button (person icon) ----------------------------------- */
.sf-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background var(--sf-transition), border-color var(--sf-transition);
  padding: 0;
}

.sf-user-menu__trigger:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.sf-user-menu__trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.sf-user-menu__trigger svg {
  display: block;
}

/* --- Dropdown card -------------------------------------------------- */
.sf-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  min-width: 260px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: sf-dropdown-enter 0.15s ease;
}

.sf-user-menu__dropdown[hidden] {
  display: none !important;
}

@keyframes sf-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Content -------------------------------------------------------- */
.sf-user-menu__content {
  padding: 0;
}

/* --- Identity block (avatar + name + role) -------------------------- */
.sf-user-menu__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f2f5;
}

.sf-user-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.sf-user-menu__info {
  min-width: 0;
}

.sf-user-menu__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-user-menu__role {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: capitalize;
  margin-top: 2px;
}

/* --- Detail rows (email, customer, phone) --------------------------- */
.sf-user-menu__details {
  padding: 12px 20px;
  border-bottom: 1px solid #f0f2f5;
}

.sf-user-menu__detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
}

.sf-user-menu__detail-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sf-user-menu__detail-value {
  font-size: 0.82rem;
  color: var(--ink);
  text-align: right;
  word-break: break-all;
}

/* --- Action buttons (sign out) -------------------------------------- */
.sf-user-menu__actions {
  padding: 10px 20px 14px;
}

.sf-user-menu__action {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid #dce1e8;
  border-radius: var(--sf-radius-sm);
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--sf-transition), border-color var(--sf-transition);
}

.sf-user-menu__action:hover {
  background: #f5f7fa;
  border-color: var(--accent);
  color: var(--accent);
}

/* =====================================================================
   Transfer page – WeTransfer-style large file upload
   purpose: Dark gradient BG, centered card, drag-drop zone, progress bar.
   Added: 2026-03-05
   ===================================================================== */

/* --- Full-viewport dark background (same family as login) ----------- */
body.transfer-page {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Transfer shell – vertical stack centered ----------------------- */
.transfer-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 520px;
  padding: 40px 20px;
  min-height: auto;
}

/* --- Brand block ---------------------------------------------------- */
.transfer-brand {
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}

.transfer-brand__logo {
  height: 48px;
  width: auto;
  margin-bottom: 12px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.transfer-brand__name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 4px;
}

.transfer-brand__tagline {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
}

/* --- Transfer card -------------------------------------------------- */
.transfer-card {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  padding: 32px 28px;
}

.transfer-card__header {
  text-align: center;
  margin-bottom: 24px;
}

.transfer-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.transfer-card__subtitle {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.transfer-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
}

/* --- Drop zone ------------------------------------------------------ */
.transfer-dropzone {
  border: 2px dashed #d0d7e2;
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.transfer-dropzone:hover,
.transfer-dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.transfer-dropzone--drag {
  border-color: var(--accent);
  background: var(--accent-soft);
  border-style: solid;
}

.transfer-dropzone--has-file {
  border-color: var(--ok);
  background: #f0faf5;
}

.transfer-dropzone__icon {
  color: var(--muted);
  margin-bottom: 12px;
}

.transfer-dropzone--drag .transfer-dropzone__icon,
.transfer-dropzone:hover .transfer-dropzone__icon {
  color: var(--accent);
}

.transfer-dropzone__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.transfer-dropzone__hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}

.transfer-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* --- Selected file info --------------------------------------------- */
.transfer-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.transfer-file--uploading {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.transfer-file__icon {
  flex-shrink: 0;
  color: var(--accent);
}

.transfer-file__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transfer-file__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-file__size {
  font-size: 0.78rem;
  color: var(--muted);
}

.transfer-file__remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.transfer-file__remove:hover {
  background: #fde8e8;
  color: var(--alert);
}

/* --- Progress bar --------------------------------------------------- */
.transfer-progress {
  margin-bottom: 20px;
}

.transfer-progress__bar {
  height: 8px;
  background: #e8ecf1;
  border-radius: 4px;
  overflow: hidden;
}

.transfer-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #3b82f6 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.transfer-progress__text {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
}

/* --- Done state ----------------------------------------------------- */
.transfer-done__icon {
  color: var(--ok);
  margin-bottom: 8px;
}

.transfer-receipt {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 16px;
}

.transfer-receipt__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.85rem;
}

.transfer-receipt__row + .transfer-receipt__row {
  border-top: 1px solid var(--border);
}

.transfer-receipt__label {
  color: var(--muted);
  font-weight: 600;
}

.transfer-receipt__value {
  color: var(--ink);
  font-weight: 500;
}

/* --- Error state ---------------------------------------------------- */
.transfer-error__icon {
  color: var(--alert);
  margin-bottom: 8px;
}

/* --- Transfer button styling ---------------------------------------- */
.transfer-btn {
  min-width: 180px;
  padding: 12px 24px;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.transfer-btn__arrow {
  transition: transform 0.2s;
}

.transfer-btn:hover .transfer-btn__arrow {
  transform: translateX(3px);
}

/* --- Info banner (shown after auto-redirect) ------------------------ */
.transfer-info-banner {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  backdrop-filter: blur(6px);
}

/* --- Footer --------------------------------------------------------- */
.transfer-footer {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}

/* --- Mesh-reduce badge for order history table ---------------------- */
.order-badge--meshreduce {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 4px;
}

/* ==========================================================================
   Touch / iPad compatibility  (added 2026-04-19)
   Applies to pointer:coarse devices (iPad, Android tablets, touch laptops).
   Desktop mouse users are unaffected.
   ========================================================================== */

/* --- 1. Minimum 44 × 44 px touch targets for all interactive elements --- */
@media (pointer: coarse) {

  /* Primary action buttons */
  button,
  .btn,
  .button,
  [role="button"],
  .wf-step-btn,
  .workflow-stepper__tab,
  .viewer__toolbar button,
  .viewerToolbar button,
  .pickBtn,
  .alignPickBtn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Compact icon buttons in the viewport toolbar — keep square */
  .viewer__tools button,
  .viewer__tools-left button,
  .viewer__tools-right button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Workflow sidebar step tabs — roomier for finger taps */
  .workflow-stepper__tab {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.85rem;
  }

  /* Alignment panel inputs — easier to interact */
  input[type="range"] {
    height: 32px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  /* Select dropdowns */
  select {
    min-height: 40px;
    padding: 6px 10px;
  }

  /* Status bar — slightly taller for legibility */
  .viewer__status,
  #viewportStatus {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 0.82rem;
  }

  /* Stepper Back/Next row buttons — readable on all touch devices (not just < 900px) */
  .workflow-stepper__row .button {
    font-size: 0.78rem;
    padding: 6px 14px;
  }

  /* Allow stepper tabs to scroll horizontally on touch.
     The parent had overflow:hidden which prevented the tabs' inner scroll container
     from working on iOS/iPadOS. */
  .workflow-stepper--header {
    overflow-x: auto;
    overflow-y: hidden;
    /* Smooth momentum scrolling in Safari */
    -webkit-overflow-scrolling: touch;
  }

  .workflow-stepper__tabs {
    /* Shrinks to available space so scroll container actually works */
    flex: 1;
    min-width: 0;
    /* Left-align tabs so the first (active) step is visible without scrolling */
    justify-content: flex-start;
  }
}

/* --- 2. Viewport "pick mode active" visual indicator for touch ----------- */
/*
   When a pick mode is active the JS adds .touch-pick-active to the canvas.
   We draw a subtle pulsing border so the operator knows touch input is live.
*/
@keyframes sfTouchPickPulse {
  0%   { box-shadow: 0 0 0 0 rgba(94, 157, 230, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(94, 157, 230, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 157, 230, 0); }
}

canvas.touch-pick-active {
  outline: 2px solid #5e9de6;
  outline-offset: -2px;
  animation: sfTouchPickPulse 1.6s ease-in-out infinite;
}

/* --- 3. Improved workflow step node panel on tablet viewports ------------ */
@media (max-width: 900px) and (pointer: coarse) {

  /* Sidebar panels — more breathing room for touch */
  .workflow-overlay .viewer__sidebar {
    width: 320px;
    max-width: 90vw;
  }

  /* Node panel body — more vertical space between controls */
  .node-panel__body,
  .wf-step-panel {
    gap: 14px;
    padding: 14px 12px;
  }

  /* Section headings in panels */
  .node-panel__section-title,
  .wf-step-section-title {
    font-size: 0.78rem;
    margin-top: 10px;
  }

  /* Workflow prev/next navigation buttons */
  #workflowPrev,
  #workflowNext {
    min-height: 48px;
    font-size: 0.9rem;
    padding: 10px 20px;
  }

  /* Header actions bar — allow wrap so it doesn't crush the stepper on portrait */
  .workflow-overlay__header-actions.panel__actions {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 190px;
  }

  /* Hide the tiny status chip ("Idle") in the header on narrow touch —
     it saves ~50 px and the viewport status overlay shows the same info. */
  .workflow-overlay__header-actions .chip {
    display: none;
  }
}

/* --- 4. Upload / order action buttons on touch screens ------------------ */
@media (pointer: coarse) {

  /* Order Upload / Transfer upload CTA button */
  .transfer-cta,
  #orderUploadSelected,
  #orderUploadAll {
    min-height: 52px;
    font-size: 1rem;
    padding: 12px 24px;
  }

  /* Toast dismiss button */
  .upload-toast__close,
  .reviewToast__close {
    min-width: 44px;
    min-height: 44px;
}

/* =====================================================================
   Legal Footer (§5 TMG / DSGVO) — shown on login, register, and other
   unauthenticated pages. Links open the legal pages on ot-3d.de.
   Author: Yves Metz
   Changelog:
   - 2026-03-07: Initial creation.
- 2026-03-07: Fixed .app-legal-footer  removed position:fixed, now flows as block within .login-shell.
   ===================================================================== */

.app-legal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  pointer-events: none;
  width: 100%;
}

.app-legal-footer a {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  font-family: inherit;
  font-size: inherit;
  pointer-events: auto;
  transition: color 0.2s;
}

.app-legal-footer a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

.app-legal-footer__sep {
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
}

/* ── Analytics Dashboard (admin) ─────────────────────────────────────────
   Pure-CSS bar chart + stat cards for the self-hosted analytics tab.
   No external chart libraries required.
──────────────────────────────────────────────────────────────────────── */

/* Totals row */
.sf-analytics-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.sf-analytics-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 14px 20px;
  min-width: 160px;
  flex: 1;
}

.sf-analytics-stat__value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent, #00c8a0);
  line-height: 1.1;
}

.sf-analytics-stat__label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Chart wrapper */
.sf-analytics-chart-wrap {
  width: 100%;
  overflow-x: auto;
  min-height: 160px;
  margin-bottom: 8px;
}

/* Legend */
.sf-analytics-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.5);
}

.sf-analytics-legend__item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

.sf-analytics-legend__item--views::before    { background: var(--accent, #00c8a0); }
.sf-analytics-legend__item--visitors::before { background: rgba(0,200,160,0.38); }

/* Bar chart container */
.sf-analytics-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding-bottom: 20px;  /* room for labels */
  position: relative;
}

/* Individual bar column */
.sf-analytics-bar {
  flex: 1;
  min-width: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 0;
  cursor: default;
}

.sf-analytics-bar__col {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 1px;
}

.sf-analytics-bar__fill {
  flex: 1;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
  min-height: 1px;
}

.sf-analytics-bar__fill--views    { background: var(--accent, #00c8a0); }
.sf-analytics-bar__fill--visitors { background: rgba(0,200,160,0.38); }

.sf-analytics-bar:hover .sf-analytics-bar__fill--views    { background: #00e0b2; }
.sf-analytics-bar:hover .sf-analytics-bar__fill--visitors { background: rgba(0,224,178,0.45); }

/* Date label below each bar */
.sf-analytics-bar__label {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

/* Page/referrer tables: inline background bar behind cell text */
.sf-analytics-page-cell {
  position: relative;
  overflow: hidden;
}

.sf-analytics-bar-inline {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,200,160,0.12);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

.sf-analytics-page-cell span,
.sf-analytics-page-cell > *:not(.sf-analytics-bar-inline) {
  position: relative;
  z-index: 1;
}