/* Inter, self-hosted (landing/static/landing/fonts/, variable weight 400-800, latin subsets from
Google Fonts). base.html used to load it from fonts.googleapis.com. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* PC Desk design tokens, taken from pc-desk/modules/theme/tokens.py and the
component rules in qss.py. Light theme is the default; dark follows the
system setting or [data-theme="dark"]. */
:root {
--font: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
--bg: #faf8f5; --surface: #ffffff; --surface-alt: #f4f1eb; --input-bg: #ffffff;
--border: #dae2e7; --border-strong: #bcc9d2; --grid: #e3e9ed;
--text: #0a1d29; --text-muted: #5b6e7b; --text-faint: #92a0aa; --header-text: #28485d;
--primary: #033d63; --primary-hover: #0a517f; --primary-pressed: #022a46; --primary-text: #033d63;
--primary-soft: #e2ecf3; --primary-soft-border: #b0cbdd; --focus: #119ad4;
--grad: linear-gradient(135deg, #033d63, #0b4c8e); --grad-hover: linear-gradient(135deg, #0a517f, #135eaa);
--on-primary: #faf8f5;
--accent: #e6944c; --accent-soft: rgba(230,148,76,.14);
--success: #2c9664; --success-soft: rgba(44,150,100,.12); --success-text: #1c6e48;
--warning: #e07e29; --warning-soft: rgba(230,148,76,.16); --warning-text: #934d10;
--danger: #dd2c2c; --danger-soft: rgba(221,44,44,.10); --danger-text: #b81e1e;
--sidebar-bg: linear-gradient(180deg, #093553, #011e32); --sidebar-border: #143952;
--sidebar-text: rgba(250,248,245,.72); --sidebar-strong: #faf8f5; --sidebar-caption: #6a93af; --sidebar-hover: rgba(255,255,255,.08);
--badge-bg: #e6944c; --badge-border: #f0b481; --badge-text: #2a1503;
--badge-blue-bg: #5aa9e6; --badge-blue-border: #8ec8f2; --badge-blue-text: #06263f;
--scroll: rgba(3,61,99,.30);
--r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
--fs-caption: 10px; --fs-small: 11px; --fs-label: 12px; --fs-body: 13px; --fs-body-lg: 14px; --fs-title: 15px; --fs-section: 16px; --fs-page: 20px;
--fw-body: 500; --fw-medium: 600; --fw-semibold: 700; --fw-bold: 800;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #11151d; --surface: #181c25; --surface-alt: #212630; --input-bg: #1d222a;
--border: #2a303c; --border-strong: #3b4354; --grid: #262b36;
--text: #e1e6ea; --text-muted: #768093; --text-faint: #5a6272; --header-text: #bdc7d1;
--primary: #44a4e4; --primary-hover: #65b6ec; --primary-pressed: #228cd3; --primary-text: #55ade7;
--primary-soft: #182c39; --primary-soft-border: #274e68; --focus: #30b1e8;
--grad: linear-gradient(135deg, #1d6ea5, #23ace7); --grad-hover: linear-gradient(135deg, #2283c3, #3eb6ea);
--on-primary: #fafafa;
--accent: #e18f47; --accent-soft: rgba(225,143,71,.15);
--success: #3db87e; --success-soft: rgba(61,184,126,.16); --success-text: #69d3a2;
--warning: #e18f47; --warning-soft: rgba(225,143,71,.16); --warning-text: #efa96c;
--danger: #db5757; --danger-soft: rgba(219,87,87,.14); --danger-text: #e87d7d;
--sidebar-bg: linear-gradient(180deg, #0f131a, #090b11); --sidebar-border: #1f242d;
--sidebar-text: #b1bdc9; --sidebar-strong: #fafafa; --sidebar-caption: #636c7e; --sidebar-hover: rgba(255,255,255,.06);
--scroll: rgba(68,164,228,.30);
}
}
:root[data-theme="dark"] {
--bg: #11151d; --surface: #181c25; --surface-alt: #212630; --input-bg: #1d222a;
--border: #2a303c; --border-strong: #3b4354; --grid: #262b36;
--text: #e1e6ea; --text-muted: #768093; --text-faint: #5a6272; --header-text: #bdc7d1;
--primary: #44a4e4; --primary-hover: #65b6ec; --primary-pressed: #228cd3; --primary-text: #55ade7;
--primary-soft: #182c39; --primary-soft-border: #274e68; --focus: #30b1e8;
--grad: linear-gradient(135deg, #1d6ea5, #23ace7); --grad-hover: linear-gradient(135deg, #2283c3, #3eb6ea);
--on-primary: #fafafa;
--accent: #e18f47; --accent-soft: rgba(225,143,71,.15);
--success: #3db87e; --success-soft: rgba(61,184,126,.16); --success-text: #69d3a2;
--warning: #e18f47; --warning-soft: rgba(225,143,71,.16); --warning-text: #efa96c;
--danger: #db5757; --danger-soft: rgba(219,87,87,.14); --danger-text: #e87d7d;
--sidebar-bg: linear-gradient(180deg, #0f131a, #090b11); --sidebar-border: #1f242d;
--sidebar-text: #b1bdc9; --sidebar-strong: #fafafa; --sidebar-caption: #636c7e; --sidebar-hover: rgba(255,255,255,.06);
--scroll: rgba(68,164,228,.30);
}
/* Razorpay's trusted-badge.js (pricing, wallet) injects its own :root { --primary; --on-primary }
as bare HSL numbers, later in , which turned primary button text dark. html:root outranks
a plain :root, so these two tokens stay ours on every page. */
html:root { --primary: #033d63; --on-primary: #faf8f5; }
@media (prefers-color-scheme: dark) {
html:root:not([data-theme="light"]) { --primary: #44a4e4; --on-primary: #fafafa; }
}
html:root[data-theme="dark"] { --primary: #44a4e4; --on-primary: #fafafa; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--primary-text); }
img { display: block; }
/* ── Logo mark ───────────────────────────────────────── */
/* The mark is painted in --grad: croppers/img/icon100.webp carries the light gradient
(135deg, #033d63 -> #0b4c8e) and icon100-dark.webp the dark one (#1d6ea5 -> #23ace7). Both are
the same artwork with only the colour changed - same shape, same size, white sheet and "PC"
untouched - generated from brand/icon100-master.webp by make_logo_variants.py at the repo
root; re-run it if --grad changes. Everywhere the mark sits on a themed surface - public
header and footer (.sc-logo), the editor top bar, the app sidebar - dark theme swaps the file
in. Browsers without `content` on a replaced element just keep the light mark. The ![]()
stays as it is, so the structured-data logo URL is unaffected. */
:root[data-theme="dark"] .sc-logo img,
:root[data-theme="dark"] .ed-top__brand img,
:root[data-theme="dark"] .brand img { content: url("../../../croppers/img/icon100-dark.webp"); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sc-logo img,
:root:not([data-theme="light"]) .ed-top__brand img,
:root:not([data-theme="light"]) .brand img { content: url("../../../croppers/img/icon100-dark.webp"); }
}
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
/* ── Shell ───────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); color: var(--sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
/* No plate behind the mark: croppers/img/icon100.webp is transparent and its own shape reads on
the sidebar. The marketplace logos in .nav__item keep theirs - Amazon's is black and would
disappear into the navy. */
.brand img { width: 34px; height: 34px; border-radius: var(--r-sm); }
.brand__title { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--sidebar-strong); line-height: 1.1; }
.brand__sub { font-size: var(--fs-caption); color: var(--sidebar-caption); margin-top: 2px; }
.nav { flex: 1; overflow-y: auto; }
.nav__divider { height: 1px; background: var(--sidebar-border); margin: 8px 14px; }
.nav__caption { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sidebar-caption); padding: 10px 18px 4px; letter-spacing: .06em; }
.nav__list { padding: 6px 0; display: flex; flex-direction: column; gap: 2px; }
.nav__item { position: relative; height: 36px; margin: 0 10px; padding: 0 10px; border-radius: var(--r-md); display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--sidebar-text); text-decoration: none; }
.nav__item img, .nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }
/* .nav__item sets display: flex, which beats the browser's own rule for [hidden]; the sidebar
hides favourited rows with that attribute, so it has to win here. */
.nav__item[hidden] { display: none; }
.nav__item svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav__item:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); }
.nav__item.active { background: var(--grad); color: var(--sidebar-strong); font-weight: var(--fw-semibold); }
.nav__item .chev { margin-left: auto; opacity: .7; }
/* Collapsible sections (the marketplaces and tools lists, croppers/new_ui/_app_sidebar.html): the caption is a button
with a chevron that points down while open and right while closed; closed, only the active item stays */
.nav__caption--toggle { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--sidebar-caption); text-align: left; padding: 10px 18px 4px 12px; }
.nav__caption--toggle:hover { color: var(--sidebar-strong); }
.nav__caption--toggle .nav__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; flex-shrink: 0; }
.nav__caption--toggle[aria-expanded="false"] .nav__chev { transform: rotate(-90deg); }
.nav__caption-count { margin-left: auto; font-size: 10px; font-weight: var(--fw-semibold); border-radius: 8px; padding: 1px 7px; background: var(--sidebar-hover); color: var(--sidebar-text); display: none; }
.nav__caption--toggle[aria-expanded="false"] .nav__caption-count { display: inline-block; }
/* stars.js wraps each link in a .fav-row, so hide the rows (or bare links) that are not the active one */
.nav__list--collapsible.is-collapsed > .nav__item:not(.active), .nav__list--collapsible.is-collapsed > .fav-row:not(:has(> .active)) { display: none; }
.nav__list--collapsible.is-collapsed:not(:has(.active)) { padding: 0; }
.nav__list--top { padding-top: 10px; }
/* Marketplace hover flyout (seller-app.js builds it from #navFlyouts, moves it to and places it beside the
item). z-index above the FileDrop uploader (100-103) and the topbar menus (40), below modals (1050+) */
.nav-flyout { position: fixed; z-index: 400; min-width: 220px; max-width: 280px; padding: 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px -16px rgba(10,29,41,.4); color: var(--text); }
.nav-flyout[hidden] { display: none; }
.nav-flyout::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; } /* keeps hover alive crossing the gap */
.nav-flyout__title { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: 4px 10px 6px; }
.nav-flyout a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.nav-flyout a:hover { background: var(--surface-alt); color: var(--primary-text); }
.nav-flyout a.is-current { background: var(--primary-soft); color: var(--primary-text); font-weight: var(--fw-semibold); }
.nav-flyout a img, .nav-flyout a svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-flyout a img { border-radius: 5px; background: #fff; padding: 1px; }
.nav-flyout a svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--primary-text); }
@media (hover: none), (max-width: 1080px) { .nav-flyout { display: none !important; } }
/* The PDF Tools menu lives in the top bar; under 1080px that bar hides it (site-chrome.css), so the sidebar
shows one link to the tools index instead */
.nav__item--narrow-only { display: none; }
@media (max-width: 1080px) { .nav__item--narrow-only { display: flex; } }
.nav__sub { margin: 2px 10px 4px 42px; border-left: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: 2px; }
.nav__sub a { min-height: 30px; display: flex; align-items: center; padding: 0 12px; font-size: var(--fs-small); color: var(--sidebar-text); text-decoration: none; border-radius: var(--r-sm); }
.nav__sub a.active { color: var(--sidebar-strong); font-weight: var(--fw-semibold); background: var(--sidebar-hover); }
.nav__sub a:hover { color: var(--sidebar-strong); }
.badge-new { font-size: 9px; font-weight: var(--fw-bold); border-radius: 8px; padding: 1px 6px; margin-left: 6px; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-text); letter-spacing: .03em; }
.badge-new--blue { background: var(--badge-blue-bg); border-color: var(--badge-blue-border); color: var(--badge-blue-text); }
.sidebar__foot { border-top: 1px solid var(--sidebar-border); padding: 12px 14px; }
.credits { background: rgba(255,255,255,.06); border: 1px solid var(--sidebar-border); border-radius: var(--r-md); padding: 10px 12px; }
.credits__label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sidebar-caption); letter-spacing: .06em; }
.credits__value { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--sidebar-strong); margin-top: 2px; }
.credits__bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 8px; overflow: hidden; }
.credits__bar span { display: block; height: 100%; width: 62%; background: var(--accent); border-radius: 3px; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 16px; position: sticky; top: 0; z-index: 5; }
.topbar__title { font-size: var(--fs-section); font-weight: var(--fw-bold); color: var(--text); line-height: 1.15; }
.topbar__sub { font-size: var(--fs-body); color: var(--text-muted); }
.topbar__spacer { flex: 1; }
.icon-btn { width: 32px; height: 32px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;text-decoration: none; }
.icon-btn:hover { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The same button with its name beside the icon, for the one bar item whose destination is not
obvious from a glyph (Support / Support dashboard). It carries its own colour rather than the
muted grey of the icon-only buttons, so it reads as a destination and not as another control;
the glyph strokes with currentColor, so the icon and the label are always the one colour. */
.icon-btn--text { width: auto; gap: 7px; padding: 0 11px; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-semibold); white-space: nowrap; color: var(--primary-text); }
.icon-btn--text:hover { color: var(--primary-text); }
/* Support is the one item in the bar that is not about the page in front of you, so it sits
on its own green chip. After .icon-btn:hover in the file, so the hover state wins. */
/* Dashed outline marks Support apart from the solid-bordered buttons beside it. Dashes read
fainter than a solid line at the same colour, so the border sits at 55% rather than the 32%
the solid version used. */
.icon-btn--support { background: var(--success-soft); border-style: dashed; border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--success-text); }
.icon-btn--support:hover { background: color-mix(in srgb, var(--success) 20%, var(--surface)); border-color: var(--success); color: var(--success-text); }
.topbar__sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-weight: var(--fw-bold); font-size: var(--fs-small); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--primary-soft-border); }
.content { flex: 1; padding: 14px 16px 10px; }
/* min-height, not height: on a narrow screen the links wrap to a second line, and a fixed height cut it off. */
.statusbar { min-height: 26px; background: var(--surface); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; padding: 4px 12px; font-size: var(--fs-small); color: var(--text-faint); }
/* ── Components ──────────────────────────────────────── */
.btn { height: 34px; padding: 0 16px; border-radius: 17px; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); white-space: nowrap; transition: background .12s, border-color .12s, color .12s; text-decoration: none; position: relative; }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { background: var(--surface-alt); border-color: var(--primary); color: var(--primary-text); }
.btn:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 30%, transparent); }
.btn--primary { background: var(--grad); border-color: transparent; color: var(--on-primary); font-weight: var(--fw-semibold); }
.btn--primary:hover { background: var(--grad-hover); color: var(--on-primary); border-color: transparent; }
.btn--primary:active { background: var(--primary-pressed); }
.btn--ghost { background: var(--primary-soft); border-color: transparent; color: var(--primary-text); height: 31px; border-radius: 15px; }
.btn--ghost:hover { background: var(--primary-soft-border); color: var(--primary-text); border-color: transparent; }
.btn--toggle[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
/* The confirming half of a destructive dialog - never a plain action in a toolbar. */
.btn--danger { background: var(--danger); border-color: transparent; color: #fff; font-weight: var(--fw-semibold); }
.btn--danger:hover { background: var(--danger-text); border-color: transparent; color: #fff; }
.btn--sm { height: 25px; border-radius: 12px; padding: 0 11px; font-size: var(--fs-small); }
.btn--md { height: 38px; border-radius: 19px; }
.btn--lg { height: 44px; border-radius: 22px; font-size: var(--fs-body-lg); padding: 0 22px; }
.btn[disabled] { background: var(--surface-alt); color: var(--text-faint); border-color: var(--border); cursor: not-allowed; }
.btn .badge-new { position: absolute; top: -8px; right: -6px; margin: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.section-head { display: flex; align-items: baseline; gap: 6px; margin: 4px 2px 6px; }
.section-head h2 { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text); }
.section-head .count { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--primary-text); }
.section-head .spacer { flex: 1; }
.drop-hint { height: 30px; border: 1px dashed var(--border-strong); border-radius: 15px; padding: 0 12px; display: inline-flex; align-items: center; font-size: var(--fs-label); color: var(--text-faint); }
.table { border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; background: var(--surface); }
.table table { min-width: 520px; }
.table table { width: 100%; border-collapse: collapse; }
.table th { background: var(--surface-alt); color: var(--header-text); font-size: var(--fs-label); font-weight: var(--fw-bold); padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.table th:first-child, .table td:first-child { text-align: left; padding-left: 14px; }
.table td { padding: 0 10px; height: 40px; border-bottom: 1px solid var(--grid); text-align: center; font-size: var(--fs-body); }
.table tr:nth-child(even) td { background: var(--surface-alt); }
.table tbody tr:hover td { background: var(--primary-soft); }
.table tbody tr:last-child td { border-bottom: none; }
.file-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.file-cell svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--danger); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.file-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.pill { display: inline-flex; width: fit-content;align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); padding: 2px 9px; border-radius: 9px; border: 1px solid; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--success-soft); border-color: var(--success); color: var(--success-text); }
.pill--info { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.pill--warn { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); }
.pill--err { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.pill--mute { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-muted); }
.pill--plain::before { display: none; }
.link-btn { background: none; border: none; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--danger); cursor: pointer; padding: 4px 6px; border-radius: var(--r-xs); display: inline-flex; align-items: center; gap: 5px; }
.link-btn:hover { background: var(--primary-soft); }
.link-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Settings panel */
.panel { background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.panel__head h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.panel__close { width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.panel__close:hover { background: var(--primary-soft); color: var(--primary-text); }
.group { padding: 8px 2px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.group:last-child { border-bottom: none; }
.group__caption { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--primary-text); letter-spacing: .06em; margin-bottom: 2px; }
.field-label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-muted); letter-spacing: .04em; }
.check { display: flex !important; align-items: center; gap: 9px; min-height: 26px; cursor: pointer; font-size: var(--fs-body); }
.check input:is([type=checkbox], [type=radio]) { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border-strong); border-radius: 4px; background: var(--input-bg); flex-shrink: 0; display: grid; place-content: center; cursor: pointer; transition: background .12s, border-color .12s; }
.check input[type="radio"] { border-radius: 50%; }
.check input:is([type=checkbox], [type=radio]):checked { background: var(--primary); border-color: var(--primary); }
.check input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-primary); border-top: none; border-right: none; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked { background: var(--input-bg); border: 5px solid var(--primary); }
.check input:is([type=checkbox], [type=radio]):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.check .help { margin-left: auto; color: var(--text-faint); font-size: var(--fs-small); }
.check--row { justify-content: space-between; }
.switch { position: relative; width: 38px; height: 20px; flex-shrink: 0; }
.switch input { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; border-radius: 10px; background: var(--border-strong); cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--success); }
.switch input:checked::after { transform: translateX(18px); }
.input, .select { height: 32px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 10px; font: inherit; font-size: var(--fs-body); background: var(--input-bg); color: var(--text); width: 100%; }
.input:hover, .select:hover { border-color: var(--focus); }
.input:focus, .select:focus { outline: none; border-color: var(--primary); }
.input--num { width: 56px; height: 26px; border-radius: 13px; text-align: center; padding: 0 6px; }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), linear-gradient(var(--primary), var(--primary)); background-repeat: no-repeat; background-size: 10px 10px, 26px 100%; background-position: right 8px center, right 0 center; }
textarea.input { height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.4; }
textarea.input:disabled { background: var(--surface-alt); color: var(--text-faint); }
.inline-field { display: flex; align-items: center; gap: 8px; }
/* Google AdSense units (landing/includes/ad_unit.html). The container reserves the height so
the page does not shift when the ad loads, fills nothing, or is blocked. */
.ad-unit { contain: layout; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 8px 8px; overflow: hidden; }
.ad-unit__label { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--text-faint); margin-bottom: 4px; }
/* "Remove ads with Premium" and the local ad simulation ([adsense] SIMULATE), on every page with ad units */
.ad-unit__remove { display: block; margin-top: 6px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--primary-text); text-decoration: none; text-align: right; }
.ad-unit__remove:hover { text-decoration: underline; }
.ad-unit--sim .ad-unit__sim { display: grid; place-items: center; min-height: 90px; height: 100%; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: repeating-linear-gradient(45deg, var(--surface-alt) 0 10px, var(--surface) 10px 20px); color: var(--text-muted); font-size: var(--fs-label); text-align: center; }
.ad-unit--rect .ad-unit__sim { min-height: 250px; }
.ad-unit--multiplex .ad-unit__sim { min-height: 280px; }
.ad-unit--sim .ad-unit__sim-creative { display: none; }
.ad-unit--sim.is-filled .ad-unit__sim-wait { display: none; }
.ad-unit--sim.is-filled .ad-unit__sim { background: linear-gradient(135deg, #e2ecf3, #f4f1eb); border-style: solid; }
.ad-unit--sim.is-filled .ad-unit__sim-creative { display: grid; gap: 4px; }
.ad-unit--sim.is-filled .ad-unit__sim-creative b { font-size: var(--fs-section); color: var(--text); }
.ad-unit .adsbygoogle { display: block; width: 100%; }
.ad-unit--wide { min-height: 118px; }
.ad-unit--rect { min-height: 278px; }
.ad-unit--multiplex { min-height: 320px; }
@media (max-width: 760px) {
.ad-unit--wide { min-height: 128px; }
.ad-unit--multiplex { min-height: 280px; }
}
/* PDF-tool ad gate (landing/js/new-ui/ad-gate.js): "Watch a short ad to continue" window, and the
local stand-in ad used when rewarded ads are simulated */
.adgate, .adgate-sim { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(8, 20, 33, .55); }
.adgate-sim { z-index: 2010; background: rgba(8, 20, 33, .8); }
.adgate__box, .adgate-sim__box { position: relative; width: min(420px, 100%); padding: 28px 24px 22px; border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.adgate__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.adgate__close:hover { background: var(--surface-alt); color: var(--text); }
.adgate__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.adgate__icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); }
.adgate__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adgate h2 { font-size: 20px; font-weight: var(--fw-bold); }
.adgate__text { margin: 8px auto 0; max-width: 320px; color: var(--text-muted); line-height: 1.5; }
.adgate__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.adgate__actions .btn[disabled] { opacity: .7; cursor: progress; }
.adgate__note { min-height: 1.3em; margin: 12px 0 0; font-size: var(--fs-label); color: var(--text-muted); }
.adgate-sim__tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-text); font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.adgate-sim__ad { margin: 14px 0; padding: 48px 12px; border: 2px dashed var(--border); border-radius: var(--r-md); color: var(--text-muted); font-weight: var(--fw-semibold); }
.adgate-sim__ad small { font-weight: 400; word-break: break-all; }
.adgate-sim__count { margin: 0 0 12px; font-weight: var(--fw-semibold); }
/* ── Dialogs ─────────────────────────────────────────────────────────────────
One frame for every dialog in the new design, the one deskapp.css's
.gate__box--form already used: a header carrying the title and its line of
description, with the close button on its right, a rule under it, the body,
a rule above the footer, then the footer. Each family keeps its own class
names, its own contents and its own scripts; these rules only give them the
same frame. The header and footer bleed back through the card's padding so
both rules run the full width of the card, and the card keeps that padding
for the body, which no family wraps in an element of its own. */
.modal__box, .ed-modal__box, .ls-modal__card, .hw__box, .confirm__box { --dlg-x: 19px; --dlg-y: 17px; padding: var(--dlg-y) var(--dlg-x); }
.modal__head, .ed-modal__head, .ls-modal__head, .hw__head, .confirm__head {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
margin: calc(var(--dlg-y) * -1) calc(var(--dlg-x) * -1) 15px;
padding: 16px 52px 14px var(--dlg-x);
border-bottom: 1px solid var(--border);
}
.modal__head > h2, .ed-modal__head > h2, .ls-modal__head > h2, .hw__head > h2, .confirm__head > h2,
.modal__head > h3, .ed-modal__head > h3 { margin: 0; line-height: 1.25; }
.modal__head > p, .ed-modal__head > p, .ls-modal__head > p, .hw__head > p, .confirm__head > p { margin: 0; }
.modal__foot, .ed-modal__actions, .ls-modal__actions, .confirm__foot {
margin: 15px calc(var(--dlg-x) * -1) calc(var(--dlg-y) * -1);
padding: 13px var(--dlg-x);
border-top: 1px solid var(--border);
background: var(--surface-alt);
}
/* The icon close buttons: #pci-close is two s, so without a stroke they paint nothing. */
.ed-modal__close svg, .hw__close svg, .modal__close svg, .ls-modal__close svg, .confirm__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* .ed-modal__box lays its children out on a grid, so the gap already spaces the
rules away from the body and the extra margin would double it. */
.ed-modal__head { margin-bottom: 0; }
.ed-modal__actions { margin-top: 0; }
/* ── Confirm dialog ──────────────────────────────────────
A native