/** * Theming. * * The tool runs in an iframe; FreeConvaStudioFrame.tsx mirrors the site's * next-themes choice onto this document's . Dark is the base * because that is the app's native look and what it falls back to when opened * standalone; light is a token override on top. * * Only chrome is themed. Everything that is *document content* — the scrim and * vignette gradients, the colour swatches, the title presets, the crop overlay, * the transparency checkerboard behind the artwork — stays fixed, because a * cover has to look the same whichever theme you happened to design it in. */ :root { --bg: #14161a; --bg-2: #1a1d23; --bg-3: #21252c; --panel: #1c2027; --line: #2c313a; --line-2: #383f4a; --text: #e6e9ef; --text-dim: #98a0ae; --text-faint: #6b7482; --accent: #5b8cff; --accent-2: #7aa2ff; --good: #35c48a; --warn: #f0b429; --bad: #f26a6a; /* Surfaces and washes that used to be hardcoded through the sheet. */ --hover: #29303a; /* raised control, hovered */ --hover-line: #47505e; --raised: #262c36; /* toasts and other floating surfaces */ --well: #0f1115; /* inset list background */ --track: #2b3550; /* progress track */ --scroll: #333a45; --scroll-hover: #414a57; --good-line: #2c5c47; --bad-line: #5c3030; --danger-line: #4a2c2c; --danger-bg: #3a2222; --accent-wash: #1b2331; /* drop-target highlight */ --alpha-badge: #3a2f16; --checker-a: #191c21; /* the stage surround behind the pages */ --checker-b: #15181c; --on-accent: #fff; --rail: 74px; --inspector: 300px; --title: 48px; --status: 30px; --ruler: 22px; /* keep in step with SIZE in js/guides.js */ } :root[data-theme="light"] { --bg: #eef0f4; --bg-2: #f7f8fa; --bg-3: #e7eaf0; --panel: #fff; --line: #dde1e9; --line-2: #c3cad6; --text: #171a1f; --text-dim: #59616f; --text-faint: #838c9a; /* Darkened so it still passes contrast on a white panel; the dark theme's #5b8cff would be too pale for text and 1px rules here. */ --accent: #3568d8; --accent-2: #2a55b4; --good: #128257; --warn: #9a6800; --bad: #c33a3a; --hover: #dde2ea; --hover-line: #aab3c2; --raised: #fff; --well: #f2f4f7; --track: #ccd5e6; --scroll: #c3cad6; --scroll-hover: #a9b2c0; --good-line: #9fd5bd; --bad-line: #e8b4b4; --danger-line: #e8b4b4; --danger-bg: #fbecec; --accent-wash: #e4ecfb; --alpha-badge: #fbeed0; --checker-a: #e4e7ec; --checker-b: #dadee5; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; } kbd { background: var(--bg-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font-size: 11px; font-family: inherit; } /* ------------------------------- titlebar ------------------------------- */ /* Was Electron window chrome: a drag region, the app's own brand block and a 90px inset for the traffic lights. On the web the host page supplies the header, so this is just the tab strip and the actions. */ .titlebar { height: var(--title); display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); position: relative; } .tabs { display: flex; gap: 2px; } .tab { background: none; border: 0; color: var(--text-dim); padding: 6px 14px; border-radius: 7px; font: inherit; font-weight: 550; cursor: pointer; } .tab:hover { color: var(--text); background: var(--bg-3); } .tab.active { color: var(--text); background: var(--bg-3); } .titlebar-actions { margin-left: auto; display: flex; gap: 8px; } /* -------------------------------- buttons ------------------------------- */ .btn { background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); padding: 7px 13px; border-radius: 7px; font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--hover); border-color: var(--hover-line); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn.ghost { background: transparent; } .btn.ghost:hover { background: var(--bg-3); } .btn.danger { color: var(--bad); border-color: var(--danger-line); } .btn.danger:hover { background: var(--danger-bg); } .btn.tiny { padding: 5px 9px; font-size: 12px; } .btn.full { width: 100%; margin-top: 8px; } .btn.big { padding: 11px; font-size: 14px; margin-top: 16px; } .btn:disabled { opacity: .35; cursor: not-allowed; } .btn.icon { padding: 6px 9px; display: flex; align-items: center; } .btn.icon svg { width: 15px; height: 15px; fill: currentColor; display: block; } .mini { background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim); width: 22px; height: 20px; border-radius: 5px; cursor: pointer; font: inherit; line-height: 1; } .mini.wide { width: auto; padding: 0 8px; } .mini:hover { color: var(--text); border-color: var(--line-2); } .mini.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } /* --------------------------------- views -------------------------------- */ .view { display: none; height: calc(100% - var(--title)); } .view.active { display: flex; } /* ------------------------------- tool rail ------------------------------ */ .toolrail { width: var(--rail); flex: 0 0 var(--rail); background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; overflow-y: auto; } .tool { width: 62px; padding: 8px 2px 6px; background: none; border: 0; border-radius: 8px; color: var(--text-faint); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; font-size: 10px; font-weight: 550; } .tool svg { width: 20px; height: 20px; fill: currentColor; } .tool:hover { color: var(--text); background: var(--bg-3); } .tool.active { color: var(--on-accent); background: var(--accent); } .rail-sep { height: 1px; width: 40px; background: var(--line-2); margin: 8px 0; } /* --------------------------------- stage -------------------------------- */ .stage-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; } .stage-toolbar { height: 38px; flex: 0 0 38px; background: var(--bg-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 12px; overflow-x: auto; } .stage-toolbar:empty { display: none; } .stage-toolbar .grp { display: flex; align-items: center; gap: 6px; } .stage-toolbar .divider { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; } .stage-toolbar label { color: var(--text-dim); font-size: 12px; } /* --------------------------- rulers and guides -------------------------- */ /* The rulers are pinned siblings of the scrolling stage rather than children of it, so they never scroll away. guides.js repaints them from the live page rect, which is what keeps them aligned through scroll and zoom. */ .stage-area { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--ruler) 1fr; grid-template-rows: var(--ruler) 1fr; } .stage-area.no-rulers { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; } .stage-area.no-rulers .ruler, .stage-area.no-rulers .ruler-corner { display: none; } .ruler-corner { grid-area: 1 / 1; background: var(--bg-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ruler { display: block; } .ruler-h { grid-area: 1 / 2; border-bottom: 1px solid var(--line); cursor: ns-resize; } .ruler-v { grid-area: 2 / 1; border-right: 1px solid var(--line); cursor: ew-resize; } /* Cursor stays put for the whole drag, even once the pointer leaves the ruler. */ body.guide-dragging-x, body.guide-dragging-x * { cursor: ew-resize !important; } body.guide-dragging-y, body.guide-dragging-y * { cursor: ns-resize !important; } .guide-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; } .guide { position: absolute; } .guide.x { top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--accent); } .guide.y { left: 0; right: 0; height: 1px; margin-top: -0.5px; background: var(--accent); } /* Guides on the preview pages are for reading; only the active page's are grabbable, and they get a band around the hairline so they can be hit. */ .guide.live { pointer-events: auto; } .guide.x.live { cursor: ew-resize; } .guide.y.live { cursor: ns-resize; } .guide.live::before { content: ''; position: absolute; } .guide.x.live::before { top: 0; bottom: 0; left: -7px; right: -7px; } .guide.y.live::before { left: 0; right: 0; top: -7px; bottom: -7px; } .guide.live:hover { box-shadow: 0 0 0 1px var(--accent); } .stage { grid-area: 2 / 2; position: relative; overflow: auto; background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 50% / 22px 22px; display: flex; align-items: flex-start; justify-content: center; padding: 28px; } /* The host is only a parking spot for the canvas before a document exists. */ .canvas-host { display: none; } /* The transparency checkerboard is deliberately NOT themed — the same fixed grey in light and dark, as Photoshop and Figma both do. Transparent areas then look identical whichever theme you are working in, and the checker can never be mistaken for white or black artwork. It sits behind the canvas as a CSS background, so it cannot reach an export either way. */ .canvas-container { background: repeating-conic-gradient(#3a3f46 0% 25%, #2e3238 0% 50%) 50% / 16px 16px; } /* ------------------------------ page stack ------------------------------ */ .page-stack { display: none; flex-direction: column; align-items: center; gap: 26px; margin: auto 0; } .page-stack.ready { display: flex; } .page-slot { display: flex; flex-direction: column; align-items: stretch; } .page-bar { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 11px; color: var(--text-faint); padding: 0 2px 4px; } .page-slot.active .page-bar .pg-num { color: var(--accent); font-weight: 650; } .page-bar .pg-dims { color: var(--line-2); font-variant-numeric: tabular-nums; } .page-bar .pg-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; } .page-slot:hover .page-bar .pg-actions { opacity: 1; } .page-bar .pg-actions button { background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim); border-radius: 4px; width: 20px; height: 18px; font-size: 9px; line-height: 1; cursor: pointer; padding: 0; } .page-bar .pg-actions button:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); } .page-bar .pg-actions button:disabled { opacity: .3; cursor: not-allowed; } .page-bar .pg-actions button[data-act="del"]:hover:not(:disabled) { color: var(--bad); border-color: var(--danger-line); } .page-body { position: relative; box-shadow: 0 8px 40px rgba(0,0,0,.55); outline: 1px solid rgba(255,255,255,.06); outline-offset: 0; } .page-slot.active .page-body { outline: 2px solid var(--accent); } .page-preview { display: block; width: 100%; height: 100%; object-fit: fill; cursor: pointer; background: repeating-conic-gradient(#3a3f46 0% 25%, #2e3238 0% 50%) 50% / 16px 16px; } .page-slot:not(.active) .page-body:hover { outline: 2px solid var(--line-2); } .add-page { background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--text-dim); border-radius: 9px; padding: 11px 26px; font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .add-page:hover { border-color: var(--accent); color: var(--text); background: var(--bg-3); } .add-page b { font-size: 16px; line-height: 1; font-weight: 400; } .empty-state { text-align: center; color: var(--text-faint); pointer-events: none; position: absolute; } .empty-state.hidden { display: none; } .empty-state svg.big { width: 64px; height: 64px; fill: var(--line-2); } .empty-state h2 { margin: 14px 0 4px; font-size: 17px; color: var(--text-dim); font-weight: 600; } .empty-state p { margin: 0; font-size: 12.5px; } .empty-actions { margin-top: 18px; display: flex; gap: 8px; justify-content: center; pointer-events: auto; } .stage.dragover { outline: 2px dashed var(--accent); outline-offset: -12px; } .statusbar { height: var(--status); flex: 0 0 var(--status); background: var(--bg-2); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 11.5px; color: var(--text-dim); } .statusbar .sep { width: 1px; height: 14px; background: var(--line-2); } .statusbar .spacer { flex: 1; } .zoom-controls { display: flex; align-items: center; gap: 5px; } #zoom-label { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; } /* ------------------------------- inspector ------------------------------ */ .inspector { width: var(--inspector); flex: 0 0 var(--inspector); background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 4px 14px 20px; display: flex; flex-direction: column; } .inspector h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px; color: var(--text-faint); margin: 18px 0 9px; font-weight: 650; display: flex; align-items: center; gap: 6px; } .inspector h3 .opt { text-transform: none; letter-spacing: 0; color: var(--line-2); font-weight: 500; } .panel.hidden, .hidden { display: none !important; } .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .row > label { flex: 0 0 62px; color: var(--text-dim); font-size: 12px; } .row.two > label { flex: 0 0 20px; } .row.two.wide > label { flex: 0 0 44px; white-space: nowrap; } .row.two > input { flex: 1; min-width: 0; } .row.inline { flex-wrap: wrap; gap: 14px; } .row.inline label { flex: none; display: flex; align-items: center; gap: 6px; cursor: pointer; } .row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); } .row output { flex: 0 0 34px; text-align: right; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .row select, .row input[type=text], .row input[type=number] { flex: 1; min-width: 0; background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 12px; } .row input[type=color] { flex: 0 0 44px; height: 26px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: none; cursor: pointer; } .row input[type=checkbox] { accent-color: var(--accent); } .seg { display: flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; } .seg button { background: var(--bg-3); border: 0; color: var(--text-dim); padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px; border-right: 1px solid var(--line-2); } .seg button:last-child { border-right: 0; } .seg button.on { background: var(--accent); color: var(--on-accent); } .btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } .btn-grid .full { grid-column: 1 / -1; margin-top: 0; } .hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; margin: 6px 0 10px; } .hint.warn { color: var(--warn); } .hint b { color: var(--text-dim); } .empty-note { font-size: 11.5px; color: var(--text-faint); background: var(--bg-3); border: 1px dashed var(--line-2); border-radius: 7px; padding: 10px; text-align: center; } .swatches { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px 70px; } .swatches i { width: 17px; height: 17px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255,255,255,.16); } .swatches i:hover { transform: scale(1.15); } /* ------------------------------ style grid ------------------------------ */ /* Icon-only shape picker: the label lives on `title`, so a name as long as "Six-point star" costs no room and the whole catalogue stays in view. */ .shape-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 10px; } .shape-btn { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: 7px; color: var(--text-dim); cursor: pointer; padding: 0; transition: color .12s, border-color .12s, background .12s; } .shape-btn svg { width: 20px; height: 20px; fill: currentColor; display: block; } .shape-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--hover); } .shape-btn:active { transform: translateY(1px); } .style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .style-chip { height: 46px; border-radius: 7px; border: 1px solid var(--line-2); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--well); position: relative; padding: 0 4px; } .style-chip:hover { border-color: var(--accent); } .style-chip.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .style-chip span { font-size: 15px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; line-height: 1; } .style-chip em { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 8.5px; font-style: normal; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; } /* -------------------------------- layers -------------------------------- */ .layers { margin-top: auto; padding-top: 14px; } .layers h3 .count { margin-left: auto; background: var(--bg-3); border-radius: 10px; padding: 1px 7px; color: var(--text-dim); letter-spacing: 0; } .layers ul { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; } .layers li { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-dim); } .layers li:hover { background: var(--bg-3); } .layers li.on { background: var(--bg-3); color: var(--text); } .layers li .thumb { width: 26px; height: 26px; border-radius: 4px; background: var(--bg); flex: none; border: 1px solid var(--line); object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 13px; } .layers li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layers li .eye { opacity: .5; font-size: 12px; } .layers li .eye:hover { opacity: 1; } /* ------------------------------- progress ------------------------------- */ /* The label sits below the track rather than inside it. Centred over a 22px bar it could only ever hold something as short as "Working…"; these now carry real status — "Downloading the background remover — 6.0 MB of 12.9 MB" — which has to be able to wrap. */ .progress { margin-top: 10px; } .progress .track { background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; height: 10px; } .progress .bar { height: 100%; width: 0; background: var(--accent); transition: width .15s; } .progress .bar.indeterminate { width: 40%; animation: slide 1.1s ease-in-out infinite; } @keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } .progress span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--text-dim); overflow-wrap: anywhere; } /* ------------------------------- converter ------------------------------ */ .convert-wrap { display: flex; width: 100%; } .convert-left { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 18px; gap: 12px; } .convert-right { width: 340px; flex: 0 0 340px; background: var(--panel); border-left: 1px solid var(--line); padding: 4px 16px 24px; overflow-y: auto; } .dropzone { border: 2px dashed var(--line-2); border-radius: 12px; padding: 26px; text-align: center; color: var(--text-faint); background: var(--bg-2); } .dropzone.dragover { border-color: var(--accent); background: var(--accent-wash); color: var(--text-dim); } .dropzone svg { width: 34px; height: 34px; fill: var(--line-2); } .dropzone p { margin: 6px 0; font-size: 13px; } .dropzone p.sub { font-size: 11px; color: var(--text-faint); margin: 2px; } .dropzone b { color: var(--text-dim); } .filelist-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-dim); } .filelist { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; } .filelist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; } .filelist li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filelist li .meta { color: var(--text-faint); font-size: 11px; white-space: nowrap; } .filelist li .st { width: 15px; text-align: center; } .filelist li .st.ok { color: var(--good); } .filelist li .st.err { color: var(--bad); } .filelist li .st.run { color: var(--warn); } .filelist li .rm { color: var(--text-faint); cursor: pointer; padding: 0 3px; } .filelist li .rm:hover { color: var(--bad); } .filelist li .alpha { font-size: 9.5px; background: var(--alpha-badge); color: var(--warn); padding: 1px 5px; border-radius: 4px; white-space: nowrap; } .preset-note { font-size: 11.5px; color: var(--text-faint); background: var(--bg-3); border-left: 2px solid var(--accent); padding: 8px 10px; border-radius: 0 6px 6px 0; margin-bottom: 10px; line-height: 1.5; } .outdir { font-size: 11px; color: var(--text-faint); background: var(--bg-3); padding: 6px 8px; border-radius: 6px; word-break: break-all; margin-bottom: 4px; } .conv-summary { margin-top: 12px; font-size: 12px; background: var(--bg-3); border-radius: 8px; padding: 11px; line-height: 1.7; border: 1px solid var(--line); } .conv-summary b { color: var(--text); } .conv-summary .lnk { color: var(--accent); cursor: pointer; text-decoration: underline; } /* -------------------------------- toasts -------------------------------- */ /* Bottom-right and capped in JS: notifications must never sit over the canvas. */ .toast-host { position: fixed; bottom: 42px; right: 316px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 200; pointer-events: none; } .toast { background: var(--raised); border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 15px; font-size: 12.5px; box-shadow: 0 8px 28px rgba(0,0,0,.5); animation: pop .18s ease-out; max-width: 460px; } .toast.good { border-color: var(--good-line); } .toast.bad { border-color: var(--bad-line); } /* Sticky, for work that now runs on this machine rather than over IPC. The spinner animates `transform`, so the compositor keeps it turning even while a multi-second WASM encode has the main thread fully blocked. */ .toast.busy { border-color: var(--accent); min-width: 220px; } .toast.busy::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: spin .7s linear infinite; } /* Determinate track, shown only when the fraction is genuinely known. */ .toast.busy .busy-bar { display: block; height: 3px; margin-top: 9px; background: var(--track); border-radius: 2px; overflow: hidden; } .toast.busy .busy-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .18s ease-out; } @keyframes pop { from { opacity: 0; transform: translateY(8px); } } @keyframes spin { to { transform: rotate(360deg); } } /* --------------------------- small-screen notice ------------------------- */ /* iOS Safari caps canvas area hard and drops backgrounded canvases, so a print-resolution cover fails there in ways that read as bugs. */ .small-screen-note { position: fixed; inset: auto 12px 12px; z-index: 400; background: var(--panel); border: 1px solid var(--warn); border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.5; box-shadow: 0 16px 40px rgba(0,0,0,.55); } .small-screen-note button { display: block; margin-top: 10px; } /* -------------------------------- modal --------------------------------- */ .modal-host { position: fixed; inset: 0; background: rgba(8,10,13,.72); z-index: 300; display: flex; align-items: center; justify-content: center; } .modal { background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 22px; width: 440px; max-width: 90vw; box-shadow: 0 24px 70px rgba(0,0,0,.6); } .modal h2 { margin: 0 0 4px; font-size: 16px; } .modal p.sub { margin: 0 0 16px; font-size: 12px; color: var(--text-dim); } .modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .modal .est { font-size: 12px; color: var(--text-dim); background: var(--bg-3); border-radius: 7px; padding: 9px 11px; margin-top: 12px; } /* --------------------------- scrollbars --------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }