/* ══════════ Design Tokens ══════════ */ :root { /* Neutrals */ --color-black: #000000; --color-white: #FFFFFF; --color-grey-95: #F9F9F9; --color-grey-90: #E6E6E6; --color-grey-80: #CCCCCC; --color-grey-70: #B3B3B3; --color-grey-60: #999999; --color-grey-50: #808080; --color-grey-40: #5D5D5D; --color-grey-35: #555555; --color-grey-30: #4D4D4D; --color-grey-25: #444444; --color-grey-20: #383838; --color-grey-18: #333333; --color-grey-17: #2E2E2E; --color-grey-16: #2A2A2A; --color-grey-15: #242424; --color-grey-12: #222222; --color-grey-10: #1A1A1A; --color-grey-07: #111111; --color-grey-93: #EEEEEE; --color-grey-87: #DDDDDD; --color-grey-73: #BBBBBB; --color-grey-67: #AAAAAA; --color-grey-53: #888888; --color-grey-47: #777777; --color-shadow-dark: #0A0D12; /* Accent (lime-yellow) */ --color-accent-lime: #DAFB09; --color-accent-lime-hover: #E0FC31; --color-accent-lime-active: #C3E203; --color-accent-olive: #7E9202; --color-accent-olive-light: #A1BA03; --color-accent-olive-hover: #8FA30A; --color-accent-olive-hover-end: #B2CB14; /* Special */ --color-olive-dark: #282E00; --color-olive-badge: #353D00; --color-olive-cta: #546200; --color-olive-border: #7D8B25; --color-purple-grey: #332B46; /* Reference mention chips — Advanced wizard. A solid pill, per the frames (1446:8724 and 1446:8767, whose #00435E / #003E57 are one colour to the eye); the blue has no named style in the file, so it lives here as a raw hex. Shared by the References grid, the asset picker and the Scenario editor's highlight overlay so a chip looks the same wherever it appears — the dimmer Gray/300 label of a placeholder or a painted mention is set where it's used. */ --ref-chip-bg: #00435E; --ref-chip-fg: var(--color-grey-95); /* Status */ --color-error: #F04438; --color-valid: #26b050; --color-warning: #E8A317; /* Bootstrap legacy */ --color-link-blue: #006bb7; --color-btn-blue: #1b6ec2; --color-btn-blue-border: #1861ac; --color-focus-blue: #258cfb; /* RGB triplets for rgba() */ --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; --color-accent-active-rgb: 195, 226, 3; --color-accent-hover-rgb: 224, 252, 49; --color-shadow-warm-rgb: 15, 18, 10; --color-shadow-cool-rgb: 10, 13, 18; --color-grey-10-rgb: 26, 26, 26; /* One-off primitives */ --color-off-white: #FEFFFA; /* ── Semantic Tokens ── */ /* Backgrounds */ --bg-page: var(--color-grey-10); --bg-panel: var(--color-grey-15); --bg-elevated: var(--color-grey-20); --bg-deep: var(--color-grey-18); --bg-overlay: var(--color-grey-16); --bg-menu: var(--color-black); /* Text */ --text-primary: var(--color-grey-95); --text-secondary: var(--color-grey-70); --text-muted: var(--color-grey-50); --text-subtle: var(--color-grey-40); --text-light: var(--color-grey-80); --text-faint: var(--color-grey-60); --text-on-accent: var(--color-grey-10); --text-bright: var(--color-grey-90); /* Accent */ --accent: var(--color-accent-lime); --accent-hover: var(--color-accent-lime-hover); --accent-active: var(--color-accent-lime-active); --accent-dark: var(--color-accent-olive); /* Borders */ --border-default: var(--color-grey-20); --border-subtle: var(--color-grey-30); --border-hover: var(--color-grey-40); --border-strong: var(--color-grey-50); --border-active: var(--color-accent-lime-hover); --border-accent: var(--color-accent-olive); /* Status */ --status-error: var(--color-error); --status-valid: var(--color-valid); --status-warning: var(--color-warning); /* Shadows */ --shadow-sm: 0px 1px 2px 0px rgba(var(--color-shadow-cool-rgb), 0.05); --shadow-md: 0px 20px 24px -4px rgba(var(--color-shadow-warm-rgb), 0.5), 0px 8px 8px -4px rgba(var(--color-shadow-cool-rgb), 0.03); --shadow-lg: 0px 24px 48px -12px var(--color-shadow-dark); --shadow-soft: 0 0 20px rgba(var(--color-black-rgb), 0.03); /* Gradients */ --gradient-selection: linear-gradient(180deg, var(--color-olive-dark) 0%, var(--color-olive-dark) 15%, var(--bg-panel) 50%); --gradient-create-btn: linear-gradient(45deg, var(--accent-dark), var(--color-accent-olive-light)); --gradient-create-btn-hover: linear-gradient(45deg, var(--color-accent-olive-hover), var(--color-accent-olive-hover-end)); /* Misc */ --link-hover: #9AB503; --notification-dot: var(--color-error); } /* ══════════ Global Styles ══════════ */ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ══════════ Tooltip overrides (Figma "Tooltip") ══════════ MudBlazor's defaults (.mud-tooltip + .mud-tooltip-default) sit at 4×8 padding, 500-weight 12px text and gray-darker bg. Figma calls for solid black with white Inter Semibold 12/18, 12×8 padding, 8px radius and a layered drop shadow. !important is needed to win against MudBlazor's own selectors without chasing escalating specificity. */ .mud-tooltip { padding: 8px 12px !important; border-radius: 8px !important; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-weight: 600 !important; font-size: 12px !important; line-height: 18px !important; box-shadow: 0px 4px 3px rgba(10, 13, 18, 0.5), 0px 12px 8px rgba(10, 13, 18, 0.3) !important; /* Tooltip popover is purely informational -- making it transparent to pointer events stops the "cursor flicker" that happens when the popover overlaps its trigger: mouse-leave on the trigger fires as the popover covers it, the tooltip closes, the cursor is back on the trigger, the tooltip reopens, etc. */ pointer-events: none !important; } .mud-tooltip.mud-tooltip-default { color: #FFFFFF !important; background-color: #000000 !important; } /* The arrow ::after is a CSS triangle whose color matches the bubble's bg -- MudBlazor sets it per-variant, so the override must explicitly point at black. */ .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after { border-color: #000000 transparent transparent transparent !important; } /* ══════════ Snackbar / Toast overrides (Figma node 451:6716) ══════════ */ /* Pill-shaped toasts: a 24px Feather icon (downloaded from the design), the message, and a 16px close X. MudBlazor renders its own Material icons inside .mud-snackbar-icon and .mud-snackbar-close-button; we hide those and paint the design icons instead — the severity icon via background-image (its design color baked in) and the close X via a CSS mask tinted to the message text color. */ /* Shared pill shell — geometry + typography. Per-severity bg/text/icon set below. */ .mud-snackbar { min-width: unset !important; width: fit-content !important; max-width: min(92vw, 560px) !important; border-radius: 100px !important; padding: 6px 12px 6px 8px !important; margin-top: 12px !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; letter-spacing: 0 !important; align-items: center !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; } /* Severity icon — bare 24px glyph, no chip. Hide Mud's Material icon; the design SVG is set as the background-image per severity below. */ .mud-snackbar .mud-snackbar-icon { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; margin-right: 8px !important; margin-inline-end: 8px !important; margin-inline-start: 0 !important; border: none !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 24px 24px !important; opacity: 1 !important; } .mud-snackbar .mud-snackbar-icon .mud-icon-root { display: none !important; } /* Message text */ .mud-snackbar .mud-snackbar-content-message { padding: 0 !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Action wrapper holding the close X — sits 6px after the message per design. */ .mud-snackbar .mud-snackbar-content-action { display: flex !important; align-items: center !important; margin: 0 !important; margin-left: 6px !important; margin-inline-start: 6px !important; margin-inline-end: 0 !important; padding: 0 !important; } /* Close X — 16px. Hide Mud's Material close icon; paint the design x as a mask tinted to the toast's text color (currentColor). */ .mud-snackbar .mud-snackbar-close-button { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; padding: 0 !important; margin: 0 !important; margin-inline-start: 0 !important; border-radius: 0 !important; color: inherit !important; opacity: 0.9 !important; transition: opacity 0.15s !important; } .mud-snackbar .mud-snackbar-close-button:hover { opacity: 1 !important; background-color: transparent !important; } .mud-snackbar .mud-snackbar-close-button .mud-icon-root { display: none !important; } .mud-snackbar .mud-snackbar-close-button::before { content: "" !important; display: block !important; width: 16px !important; height: 16px !important; background-color: currentColor !important; -webkit-mask: url('media/Icons/toast-x.svg') center / 16px 16px no-repeat !important; mask: url('media/Icons/toast-x.svg') center / 16px 16px no-repeat !important; } /* ─────── INFO — node 451:6955 ─────── */ .mud-snackbar.mud-alert-filled-info { background-color: rgba(23, 90, 153, 0.8) !important; color: #CAE5FE !important; border: none !important; } .mud-snackbar.mud-alert-filled-info .mud-snackbar-icon { background-image: url('media/Icons/toast-info.svg') !important; } .mud-snackbar.mud-alert-filled-info .mud-snackbar-content-message { color: #CAE5FE !important; } /* ─────── SUCCESS — node 451:7001 ─────── */ .mud-snackbar.mud-alert-filled-success { background-color: #2A830D !important; color: #D7FECA !important; border: none !important; } .mud-snackbar.mud-alert-filled-success .mud-snackbar-icon { background-image: url('media/Icons/toast-check-circle.svg') !important; } .mud-snackbar.mud-alert-filled-success .mud-snackbar-content-message { color: #D7FECA !important; } /* ─────── WARNING — node 451:7009 ─────── */ .mud-snackbar.mud-alert-filled-warning { background-color: rgba(122, 66, 14, 0.8) !important; color: #FEE3CA !important; border: none !important; } .mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon { background-image: url('media/Icons/toast-alert-triangle.svg') !important; } .mud-snackbar.mud-alert-filled-warning .mud-snackbar-content-message { color: #FEE3CA !important; } /* ─────── ERROR — node 451:6993 ─────── */ .mud-snackbar.mud-alert-filled-error { background-color: rgba(145, 32, 24, 0.8) !important; color: #FECDCA !important; border: none !important; } .mud-snackbar.mud-alert-filled-error .mud-snackbar-icon { background-image: url('media/Icons/toast-alert-circle.svg') !important; } .mud-snackbar.mud-alert-filled-error .mud-snackbar-content-message { color: #FECDCA !important; } /* ─────── NORMAL — fallback when no severity is passed: neutral dark pill, info icon. ─────── */ .mud-snackbar.mud-alert-filled-normal { background-color: rgba(38, 38, 38, 0.92) !important; color: #E5E5E5 !important; border: none !important; } .mud-snackbar.mud-alert-filled-normal .mud-snackbar-icon { background-image: url('media/Icons/toast-info.svg') !important; } .mud-snackbar.mud-alert-filled-normal .mud-snackbar-content-message { color: #E5E5E5 !important; } /* Full-viewport background image behind every page. cover sizes the image to fill the viewport (with crop); center centers it; fixed pins it to the viewport so any internal scrolling (chat messages, etc.) doesn't drag the image. Lives on body so every page picks it up; the sidebar's solid bg + page panels sit on top wherever they don't leave a gap. */ body { background-image: url('media/Icons/bg.jpg'); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; /* viewport-fit=cover (App.razor) lets the page under a phone's notch when it is held sideways; the sides keep clear of it as they did before. Zero everywhere else. */ padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } a, .btn-link { color: var(--color-link-blue); } .btn-primary { color: var(--color-white); background-color: var(--color-btn-blue); border-color: var(--color-btn-blue-border); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--color-white), 0 0 0 0.25rem var(--color-focus-blue); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--status-valid); } .invalid { outline: 1px solid var(--status-error); } .validation-message { color: var(--status-error); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: var(--color-white); } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } .drawer-flex { height: 100%; overflow-x: hidden !important; padding: 20px 0 20px 20px; /* Clear MudDrawer's default opaque background so the page bg shows through to the sidebar rail (the .sb element handles its own frosted-glass styling). */ background: transparent !important; } /* ═══ Mobile sidebar ═══ */ @media (max-width: 768px) { /* Hide drawer entirely on mobile */ .mud-drawer { display: none !important; } /* Show as fixed overlay when toggled open */ .mud-drawer.mobile-open { display: flex !important; position: fixed !important; z-index: 1300 !important; top: 0 !important; left: 0 !important; height: 100dvh !important; width: 260px !important; } /* Main content fills full width */ .mud-main-content { margin-left: 0 !important; padding-left: 0 !important; } } /* ========== Drag and Drop Styles ========== */ /* Folder drop zone in sidebar - highlight when dragging over */ .folder-drop-target { transition: background-color 0.2s ease, outline 0.2s ease; border-radius: 4px; } .folder-drop-target.mud-drop-zone-drag-block { background-color: rgba(var(--color-accent-hover-rgb), 0.15); outline: 2px dashed var(--accent-hover); outline-offset: -2px; } /* Creative panel while being dragged */ .creative-drag-item.mud-drop-item-dragging { opacity: 0.5; } /* Drop zone when dragging over it */ .mud-drop-zone.mud-dropzone-drag-block { background-color: rgba(var(--color-accent-hover-rgb), 0.05); border-radius: 8px; } /* Cursor style for draggable items */ .creative-drag-item { cursor: grab; } .creative-drag-item:active { cursor: grabbing; } /* ========== Popup Dialog Styles ========== */ /* Darker, more opaque dialog backdrop than MudBlazor's default (~0.46). Override the palette variable used by the scrim so its `background-color: var(--mud-palette-overlay-dark)` resolves to 85% opaque. Applies to every MudDialog because the overlay is shared. */ .mud-overlay.mud-overlay-dialog { --mud-palette-overlay-dark: rgba(33, 33, 33, 0.85); --mud-palette-overlay-light: rgba(255, 255, 255, 0.85); } .popup-dialog .mud-dialog-content { padding: 0 !important; overflow: visible !important; } .popup-dialog { background: var(--bg-page) !important; border: 1px solid var(--border-default); border-radius: 8px !important; box-shadow: var(--shadow-lg) !important; overflow: visible; } .popup-container { display: flex; flex-direction: column; gap: 24px; padding: 32px; align-items: center; } .popup-header { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .popup-title-row { display: flex; align-items: center; gap: 8px; } .popup-title { font-size: 24px; font-weight: 600; line-height: 32px; color: var(--text-primary); } .popup-subtitle { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-muted); margin-top: 8px; } .popup-close { background: var(--bg-elevated); border-radius: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .popup-close:hover { background: var(--color-grey-25); } /* Language / option grid */ .popup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; } .popup-option { background: var(--bg-panel); border-radius: 8px; height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; cursor: pointer; position: relative; font-size: 14px; color: var(--text-primary); border: 1px solid transparent; } .popup-option:hover { border-color: var(--color-grey-35); } .popup-option.selected { border: 1px solid var(--border-active); box-shadow: var(--shadow-md); } .popup-check { position: absolute; top: -4px; right: -6px; width: 16px; height: 16px; background: var(--accent-hover); border-radius: 100px; display: flex; align-items: center; justify-content: center; } .popup-check svg { width: 10px; height: 10px; } /* Resize dialog cards */ .resize-grid { display: flex; gap: 20px; width: 100%; } .resize-card { flex: 1; background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 16px; cursor: pointer; position: relative; } .resize-card:hover { border-color: var(--color-grey-35); } .resize-card.selected { border-color: var(--border-active); background: var(--gradient-selection); box-shadow: var(--shadow-md); } .resize-icon { display: flex; align-items: center; justify-content: center; } /* One 64px box for every ratio, letterboxed: object-fit keeps each glyph's own aspect (9:16, 16:9, 4:5 are not square) while the cards stay the same height. */ .resize-icon img { width: 64px; height: 64px; object-fit: contain; } .resize-label { text-align: center; } .resize-name { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--text-primary); } .resize-resolution { font-size: 12px; font-weight: 400; line-height: 18px; color: var(--text-muted); } /* Variate info box */ .variate-info { background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: 8px; padding: 20px; width: 100%; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-primary); } .variate-desc { width: 100%; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-primary); } .popup-divider { width: 100%; height: 1px; background: var(--bg-elevated); } .variate-prefs-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; } .variate-prefs-label { width: 180px; flex-shrink: 0; } .variate-prefs-title { font-size: 18px; font-weight: 600; line-height: 28px; color: var(--text-primary); } .variate-prefs-hint { font-size: 12px; font-weight: 400; line-height: 18px; color: var(--text-muted); } .variate-prefs-input { flex: 1; min-width: 0; } .variate-textarea { width: 100%; height: 128px; padding: 10px 14px; background: transparent; border: 1px solid var(--text-muted); border-radius: 8px; color: var(--text-primary); font-size: 16px; font-weight: 400; line-height: 24px; resize: none; box-sizing: border-box; font-family: inherit; } .variate-textarea::placeholder { color: var(--text-muted); } .variate-textarea:focus { outline: none; border-color: var(--accent-dark); } /* Action button row */ .popup-action { display: flex; justify-content: center; } /* ========== Add reference dialog (Advanced wizard, Figma 1446:8820) ========== */ /* 758 less the sheet's 32px padding either side is the 694 the frame gives its rows. */ .ar-container { width: 758px; max-width: 100%; } /* ImagesUploadControl wraps its content in an outlined MudPaper; the dropzone draws its own dashed border, so the wrapper contributes layout only. */ .ar-container .mud-paper { background: transparent; border: none; box-shadow: none; } /* .popup-container centres its children, which leaves ImagesUploadControl's root at shrink-to-fit — and the width:100% on every box between it and the dropzone then resolves against the dropzone's own text width, stripping it to ~350px. Stretching the root, as the sibling rows already are by their own width:100%, restores the chain. */ .ar-container > .iu-stack { align-self: stretch; } .ar-dropzone { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--bg-panel); border: 1px dashed var(--border-strong); border-radius: 8px; cursor: pointer; box-sizing: border-box; } .ar-dropzone-text { font-size: 16px; line-height: 24px; color: var(--text-primary); } .ar-select-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); font-size: 16px; font-weight: 600; line-height: 24px; } .ar-select-btn img { width: 20px; height: 20px; } .ar-preview { position: relative; width: 100%; height: 300px; background: var(--bg-panel); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Its own radius, not the frame's: object-fit:contain letterboxes the image inside the panel, so the frame's rounded corners are nowhere near the picture's. */ .ar-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } .ar-preview-remove { position: absolute; top: 12px; right: 12px; } .ar-preview-remove-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(var(--color-black-rgb), 0.5); cursor: pointer; } .ar-form { display: flex; flex-direction: column; gap: 20px; width: 100%; } .ar-row { display: flex; align-items: flex-start; gap: 20px; width: 100%; } .ar-labels { width: 220px; flex-shrink: 0; padding-top: 8px; } .ar-label { font-size: 18px; font-weight: 600; line-height: 28px; color: var(--text-primary); } .ar-hint { font-size: 12px; font-weight: 400; line-height: 18px; color: var(--text-muted); } .ar-select { flex: 1; min-width: 0; margin: 0; } .ar-error { padding-left: 240px; font-size: 12px; line-height: 18px; color: var(--color-error); } /* ========== Choose from assets dialog (Advanced wizard, Figma 1446:8716) ========== */ .ca-container { width: 760px; max-width: 100%; } .ca-search { position: relative; width: 100%; } /* CustomIcons.Search is a bare 20px svg, so it's positioned here rather than by a wrapper. */ .ca-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; } .ca-search input { width: 100%; padding: 10px 14px 10px 42px; background: transparent; border: none; outline: 1px var(--text-muted) solid; outline-offset: -1px; border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 16px; line-height: 24px; box-sizing: border-box; } .ca-search input::placeholder { color: var(--text-muted); } .ca-search input:focus { outline-color: var(--accent-dark); } .ca-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; /* The library grows without bound, so the grid scrolls rather than the dialog. */ max-height: 46vh; overflow-y: auto; padding: 10px; background: var(--bg-panel); border-radius: 8px; } .ca-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; background: var(--bg-page); border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; transition: border-color 0.15s; } .ca-tile:hover { border-color: var(--border-hover); } .ca-tile.selected { border-color: var(--border-active); box-shadow: var(--shadow-md); } /* Already a reference in this ad — visible for orientation, but not pickable twice. */ .ca-tile.used { opacity: 0.5; cursor: default; } .ca-tile.used:hover { border-color: var(--border-default); } .ca-thumb { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; } .ca-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; } /* Same chip as the References grid and the scenario mentions — it's the same token, so it's the same 24px pill: 2px + 20px line + 2px, which keeps the label ellipsing. */ .ca-name { max-width: 100%; padding: 2px 8px; border-radius: 100px; background: var(--ref-chip-bg); color: var(--ref-chip-fg); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ca-type { font-size: 12px; line-height: 18px; color: var(--text-muted); } .ca-del { position: absolute; top: 6px; right: 6px; z-index: 1; opacity: 0; transition: opacity 0.15s; } .ca-tile:hover .ca-del { opacity: 1; } .ca-del-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(var(--color-black-rgb), 0.5); cursor: pointer; transition: background 0.15s; } .ca-del-btn:hover { background: var(--bg-elevated); } .ca-del-btn svg { width: 14px; height: 14px; } .ca-badge { position: absolute; top: 6px; right: 6px; padding: 1px 8px; border-radius: 100px; background: var(--color-grey-30); color: var(--color-grey-80); font-size: 12px; line-height: 18px; white-space: nowrap; } .ca-empty { width: 100%; padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 14px; line-height: 20px; } /* ========== Voice filters dialog (Advanced wizard, Figma 1448:25396) ========== */ .vf-container { width: 600px; max-width: 100%; gap: 20px; } .vf-section { width: 100%; } .vf-section-title { font-size: 18px; font-weight: 600; line-height: 28px; color: var(--text-primary); margin-bottom: 4px; } .vf-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* Per-option match counts, reusing the folder Filters popup's badge — that layout spaces them with a flex gap on the row, but here the count sits inside MudCheckBox's own label. */ .vf-options .filters-count { margin-left: 6px; } .vf-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } /* ========== DropdownMenu (shared popup menu) ========== */ .dd-popover.mud-paper { background: transparent !important; box-shadow: none !important; } .dd-popover .mud-list { padding: 0 !important; } .dd-menu { background: var(--bg-menu); border: 1px solid var(--border-default); border-radius: 8px; padding: 12px; min-width: 180px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 8px; } .dd-item { display: flex; align-items: center; justify-content: space-between; padding: 8px; cursor: pointer; color: var(--text-secondary); font-size: 14px; line-height: 20px; white-space: nowrap; height: 36px; border-radius: 4px; text-decoration: none; } .dd-item:hover { background: var(--bg-panel); } .dd-item.dd-danger { color: var(--status-error); } .dd-icon { width: 24px; height: 24px; } .dd-divider { height: 1px; background: var(--bg-panel); } /* ========== FieldsEditor View Toggle ========== */ .fields-view-toggle.mud-toggle-group { border-color: var(--accent-dark) !important; } .fields-view-toggle .mud-toggle-item { min-width: 140px; } .fields-view-toggle .mud-toggle-item-content { display: flex; align-items: center; gap: 10px; } .fields-view-toggle .mud-toggle-item-delimiter { border-color: var(--accent-dark) !important; } .fields-view-toggle .mud-button-filled-primary { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; } .fields-view-toggle .mud-button-outlined-primary { color: var(--text-secondary) !important; } /* ========== FieldsEditorChips ========== */ .chips-editor { padding: 0 16px; } .chips-category-title { color: var(--text-primary); font-size: 18px; font-weight: 600; line-height: 28px; padding: 10px 0; } .chips-container { display: flex; flex-wrap: wrap; gap: 12px; } .chip-btn { border-radius: 100px; padding: 8px 18px; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; white-space: nowrap; } .chip-btn.has-value { background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); } .chip-btn.has-value:hover { border-color: var(--border-hover); } .chip-btn.empty { background: transparent; border: 1px solid var(--border-default); color: var(--text-muted); } .chip-btn.empty:hover { border-color: var(--border-subtle); color: var(--text-secondary); } .chip-btn.editing { background: var(--bg-elevated); border: 1px solid var(--accent-dark); color: var(--text-primary); } .chips-inline-editor { display: flex; gap: 8px; } .chips-editor-field .mud-input-outlined-border { border-color: var(--border-hover) !important; } .chips-editor-field:focus-within .mud-input-outlined-border { border-color: var(--accent-dark) !important; } /* SearchField's default look (Board / Products / My Flows toolbars, the filters popup) */ .search-field { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 320px; border: 1px solid var(--border-hover); border-radius: 8px; padding: 10px 14px; background: transparent; box-shadow: var(--shadow-sm); } .search-field:focus-within { border-color: var(--accent-dark); } .search-field svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent-olive); } .search-field input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 16px; line-height: 24px; font-family: 'Inter', sans-serif; } .search-field input::placeholder { color: var(--text-muted); } /* The filters popup's search spans the dialog, not a toolbar slot. */ .filters-body .search-field { max-width: none; } .folder-toolbar-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-hover); background: transparent; color: var(--text-light); font-size: 14px; font-weight: 600; line-height: 20px; font-family: 'Inter', sans-serif; cursor: pointer; box-shadow: var(--shadow-sm); } .folder-toolbar-btn:hover { border-color: var(--accent-dark); } .filters-badge { background: var(--accent-dark); color: var(--color-white); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .folder-sort-dropdown { position: relative; display: flex; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border-hover); background: transparent; color: var(--text-light); font-size: 14px; font-weight: 600; line-height: 20px; font-family: 'Inter', sans-serif; cursor: pointer; user-select: none; box-shadow: var(--shadow-sm); } .folder-sort-dropdown:hover { border-color: var(--accent-dark); } .folder-sort-header { display: flex; align-items: center; gap: 8px; width: 100%; } .folder-sort-chevron { transition: transform 0.2s; } .folder-sort-chevron.flipped { transform: rotate(180deg); } .folder-sort-overlay { position: fixed; inset: 0; z-index: 99; } .folder-sort-panel { position: absolute; top: 0; right: 0; z-index: 100; display: flex; flex-direction: column; padding: 12px 16px 16px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-panel); box-shadow: var(--shadow-lg); min-width: 100%; } .folder-sort-options { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; } .folder-sort-menu-item { display: flex; align-items: center; justify-content: space-between; color: var(--text-light); font-weight: 600; cursor: pointer; white-space: nowrap; } .folder-sort-menu-item:hover { color: var(--text-primary); } /* Filters dialog */ .filters-dialog { background: var(--bg-page) !important; border: 1px solid var(--border-default); border-radius: 8px !important; max-width: 600px !important; width: 100%; } .filters-dialog-content { background: var(--bg-page) !important; padding: 32px 32px 0 32px !important; } .filters-dialog-actions { background: var(--bg-page) !important; padding: 0 32px 32px 32px !important; } .filters-header { display: flex; align-items: center; justify-content: space-between; /* Gap between the "Filters" header and the first section (Ad Type), per Figma 15:29562. */ margin-bottom: 20px; } .filters-title { font-size: 24px; font-weight: 600; line-height: 32px; color: var(--text-primary); } .filters-close-btn { background: var(--bg-elevated); border-radius: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .filters-close-btn:hover { background: var(--border-subtle); } .filters-body { display: flex; flex-direction: column; gap: 20px; width: 100%; } .filters-section-title { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--text-primary); } .filters-divider { height: 1px; background: var(--border-default); width: 100%; } .filters-checkbox-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .filters-checkbox-grid { display: flex; flex-wrap: wrap; gap: 20px; } .filters-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-secondary); width: 124px; } .filters-count { color: var(--text-subtle); font-size: 12px; font-weight: 400; } .filters-match-count { color: var(--text-muted); font-size: 13px; font-weight: 400; } .filters-checkbox { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--text-secondary); background: var(--bg-panel); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } .filters-checkbox.checked { background: var(--bg-overlay); border-color: var(--accent-dark); } .filters-product-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); font-size: 14px; cursor: pointer; } .filters-product-chip:hover { border-color: var(--border-hover); } .filters-product-chip.selected { background: var(--bg-panel); border-color: var(--border-hover); color: var(--text-primary); } .filters-product-tag { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-panel); color: var(--text-primary); font-size: 14px; } .filters-buttons { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 30px; } .filters-apply-btn { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--text-on-accent); font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; font-family: 'Inter', sans-serif; } .filters-apply-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .filters-reset-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-hover); background: transparent; color: var(--text-light); font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; font-family: 'Inter', sans-serif; } .filters-reset-btn:hover { background: var(--bg-overlay); border-color: var(--border-strong); } /* ══════════ Mobile: simplify TopBlock — hide icon/title/upgrade, keep brand selector ══════════ */ @media (max-width: 768px) { .topblock-left { display: none !important; } .topblock-upgrade { display: none !important; } .topblock-brand-selector { margin-left: auto; } .sb-collapse-btn { display: none !important; } } /* ══════════ TopBlock brand selector — force 52px height ══════════ */ .topblock-brand-selector .mud-input-control { margin: 0 !important; } .topblock-brand-selector .mud-input.mud-input-outlined { height: 52px !important; overflow: visible !important; } .topblock-brand-selector .mud-input-slot { padding-top: 0 !important; padding-bottom: 0 !important; display: flex; align-items: center; overflow: visible !important; } .topblock-brand-selector .mud-select-input { overflow: visible !important; } /* ══════════ Credits Summary (Billing page) ══════════ */ .csummary { display: flex; align-items: center; gap: 24px; background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: 12px; padding: 20px 24px; flex-wrap: wrap; } .csummary-left { display: flex; flex-direction: column; gap: 4px; min-width: 100px; } .csummary-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .csummary-value { font-size: 32px; font-weight: 700; color: var(--accent); } .csummary-bar-wrap { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; } .csummary-bar-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); } .csummary-bar-track { height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; } .csummary-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s ease; } .csummary-renew { font-size: 13px; color: var(--text-muted); white-space: nowrap; } /* Insufficient credits dialog — override MudBlazor's max-width */ .icd-dialog.mud-dialog { width: 1000px !important; max-width: 95vw !important; } .icd-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden !important; } /* Buy credits dialog — match Figma 720x586 */ .buy-credits-dialog.mud-dialog { width: 720px !important; max-width: 95vw !important; } .buy-credits-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden !important; } /* Manage subscription dialog */ .manage-sub-dialog.mud-dialog { width: 560px !important; max-width: 95vw !important; } .manage-sub-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden !important; } /* Cancel subscription reason dialog */ .cancel-reason-dialog.mud-dialog { width: 560px !important; max-width: 95vw !important; } .cancel-reason-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden !important; } /* Cancel subscription final dialog */ .cancel-final-dialog.mud-dialog { width: 560px !important; max-width: 95vw !important; } .cancel-final-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden !important; } /* ══════════ Mobile shell utilities (MOBILE.md) ══════════ */ /* Monochrome icon: the SVG file is a mask, the color comes from currentColor, so the existing grey/white icon files take any state color without another copy. Usage: */ .m-icon { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .m-icon-20 { width: 20px; height: 20px; } .m-icon-16 { width: 16px; height: 16px; } .m-icon-10 { width: 10px; height: 10px; } /* DropdownMenu on mobile renders its items in a BottomSheet (Figma 32:2193, 97:4244): 24px icon on the left, 16px text, 48px rows, Gray/750 dividers. The item markup is unchanged (text, then icon); row-reverse puts the icon first. */ .dd-sheet { display: flex; flex-direction: column; gap: 8px; } .dd-sheet .dd-item { flex-direction: row-reverse; justify-content: flex-end; gap: 12px; height: 48px; padding: 0; border-radius: 0; color: var(--text-bright); font-size: 16px; line-height: 24px; } .dd-sheet .dd-item:hover { background: none; } .dd-sheet .dd-divider { background: var(--border-default); } /* MudBlazor dialogs on phones: a 12px gutter instead of the desktop widths, which the dialogs set with !important in their own styles (hence the doubled selectors). */ @media (max-width: 768px) { .mud-dialog, .mud-dialog.popup-dialog, .mud-dialog.move-dialog, .mud-dialog.filters-dialog, .mud-dialog.delete-messages-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 12px !important; } .popup-container { padding: 20px; gap: 20px; } .move-dialog-content, .filters-dialog-content { padding: 20px 20px 0 !important; } .filters-dialog-actions { padding: 0 20px 20px !important; } } /* ══════════ Phone document scrolling (MOBILE.md §3.11) ══════════ The mobile shell scrolls the document. The desktop's fixed body image would be repainted on every scrolled frame and would show in the overscroll bounce, so phones get the page color. Same boundary as MobileShell.MaxWidth. */ @media (max-width: 768px) { html { background: var(--bg-page); } body { background-image: none; } } /* ══════════ BottomSheet entry transition (Mobile/BottomSheet.razor.css) ══════════ The sheet is display:none while closed, so its slide-in needs a starting style. Global rather than in the scoped file so the isolation rewriter cannot mangle the at-rule; the selectors outrank the scoped ones (four classes against a class, a class and the scope attribute) so the starting values win for that first frame. */ @starting-style { .bs-root.bs-open .bs-backdrop.bs-backdrop { opacity: 0; } .bs-root.bs-open .bs-sheet.bs-sheet { transform: translateY(100%); } /* A drawer comes in from the left. */ .bs-root.bs-drawer.bs-open > .bs-sheet.bs-sheet { transform: translateX(-100%); } } /* ══════════ Mobile shared pieces (MOBILE.md §3.9) ══════════ Page frame, list, search box, icon tool buttons, buttons, sheet headings and radio rows used by every mobile page and twin. Page-specific rules stay in the page's scoped CSS. */ .m-page { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 20px; } .m-list { display: flex; flex-direction: column; gap: 16px; } .m-loading { display: flex; justify-content: center; padding: 40px; } .m-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0; color: var(--text-muted); font-size: 16px; text-align: center; } /* 28px back tile (Figma "Back": Gray/750, radius 8, 20px arrow). */ .m-back { width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; background: var(--bg-elevated); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; } /* Search box: Gray/500 border, 8px radius, icon + input. */ .m-search { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-sm); color: var(--text-muted); } .m-search-sm { height: 40px; font-size: 14px; } .m-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text-primary); font-family: inherit; font-size: 16px; line-height: 24px; } .m-search input::placeholder { color: var(--text-muted); } .m-clear { padding: 0; border: 0; background: none; color: var(--text-muted); display: flex; cursor: pointer; } /* 36px outlined icon button (search / filter / sort in list toolbars). */ .m-tool { position: relative; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-grey-40); border-radius: 8px; background: none; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; } .m-tool.active { border-color: var(--accent-dark); color: var(--accent-active); } .m-tool-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--text-on-accent); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; } /* Count badge next to a title (Gray/750, 12px). */ .m-count { flex-shrink: 0; height: 20px; padding: 0 4px; border-radius: 4px; background: var(--bg-elevated); color: var(--text-faint); font-size: 12px; font-weight: 500; line-height: 20px; } /* Buttons: 14px semibold, 8px radius; -lg is the 16px full-width CTA. */ .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm); } .m-btn:disabled { cursor: default; } .m-btn-block { width: 100%; } .m-btn-lg { padding: 12px 20px; font-size: 16px; line-height: 24px; } .m-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .m-btn-primary:disabled { background: var(--accent-dark); border-color: var(--color-accent-olive-light); } .m-btn-gray { background: var(--bg-elevated); border-color: var(--color-grey-40); color: var(--text-light); } .m-btn-outline { background: none; border-color: var(--accent-dark); color: var(--accent-active); } .m-btn-outline:disabled { border-color: var(--color-grey-40); color: var(--text-muted); } .m-btn-accent { background: none; border-color: var(--accent-dark); color: var(--accent-active); } /* Sheet headings. */ .m-sheet-title { margin: 16px 0 4px; color: var(--text-primary); font-size: 18px; font-weight: 600; line-height: 28px; } .m-sheet-sub { margin-bottom: 20px; color: var(--text-secondary); font-size: 14px; line-height: 20px; } .m-divider { height: 1px; background: var(--border-default); } /* Labeled fields (setup pages, Explore's publish form): a 14px label over a Gray/600 box around a bare input or textarea. */ .m-field { display: flex; flex-direction: column; gap: 6px; } .m-field-label { color: var(--text-secondary); font-size: 14px; font-weight: 500; line-height: 20px; } .m-input { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border-hover); border-radius: 8px; box-shadow: var(--shadow-sm); color: var(--text-muted); } .m-input:focus-within { border-color: var(--accent-dark); } .m-input input, .m-input textarea { width: 100%; min-width: 0; border: 0; outline: none; background: none; color: var(--text-primary); font-family: inherit; font-size: 14px; line-height: 20px; resize: none; } .m-input input::placeholder, .m-input textarea::placeholder { color: var(--text-muted); } /* Radio rows (sort sheets): 20px circle, lime dot when chosen. justify-content: the row is a