/* Manrope — the typeface the design is drawn in. Served from our own origin:
   the CSP allows no third-party font or stylesheet host, and a self-hosted
   copy costs one request per subset instead of a round trip to Google.
   Manrope is a variable font, so one file per subset covers 400–800 —
   font-weight below is a range, not a single value. SIL Open Font License. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-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;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-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;
}

:root {
  --bg: #eef3fb;
  --surface: #ffffff;
  --surface-2: #f6f9fe;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e3e9f4;
  --line-strong: #c5d2e8;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #e8efff;
  --on-accent: #ffffff;
  /* Text and border for informational blocks drawn on --accent-soft
     (.status, .guide-note, .dict-modal-notice). Both sides of the pair must
     be themed, otherwise dark blue ink lands on a dark blue panel. */
  --note-ink: #1e3a8a;
  --note-line: #cfdefd;
  /* Ink for the "active account" badge, also drawn on --accent-soft. */
  --ok-ink: #16403c;
  --blue: #2563eb;
  --blue-soft: #e8efff;
  --amber: #b7791f;
  --amber-soft: #fff7df;
  --red: #b42318;
  --red-soft: #fff1f0;
  /* --ok-ink is ink for a badge drawn on --accent-soft; this pair is a
     standalone green, the counterpart of --red/--red-soft. */
  --ok: #1f7a4d;
  --ok-soft: #e6f6ed;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  /* Header reads as a header: same card language as the panels, but tinted. */
  --surface-header: linear-gradient(180deg, #f1f6ff 0%, #ffffff 64%);
  --shadow: 0 10px 30px rgba(30, 64, 175, 0.07);
  --shadow-lg: 0 18px 44px rgba(30, 64, 175, 0.11);
  /* The sidebar is a flat panel in the app's own surface (design 2a), so its
     tokens simply alias the page tokens and follow the theme for free. */
  --sidebar-bg: var(--surface);
  --sidebar-ink: var(--ink);
  --sidebar-muted: var(--muted);
  --sidebar-hover: var(--surface-2);
  --sidebar-line: var(--line);
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #131c2e;
  --surface-2: #1a2438;
  --ink: #e8eefb;
  --muted: #93a4bf;
  --line: #2a3750;
  --line-strong: #43536f;
  --accent: #60a5fa;
  --accent-dark: #3b82f6;
  --accent-soft: #17284a;
  --note-ink: #cddffb;
  --note-line: #2f4676;
  --ok-ink: #86e5c8;
  --on-accent: #06122b;
  --blue: #7aa7ff;
  --blue-soft: #152a4d;
  --amber: #f0b84f;
  --amber-soft: #3b2d12;
  --red: #ff8a80;
  --red-soft: #3f1d1b;
  --ok: #5fc98e;
  --ok-soft: #12301f;
  --surface-header: linear-gradient(180deg, #1b2740 0%, #131c2e 64%);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.46);
  --sidebar-bg: var(--surface);
  --sidebar-ink: var(--ink);
  --sidebar-muted: var(--muted);
  --sidebar-hover: var(--surface-2);
  --sidebar-line: var(--line);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fbfdff 0, var(--bg) 420px);
  font-family: Manrope, Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  /* Without this the whole app inherits `normal` — about 1.2 for Inter — and
     every block of text sits tighter than the design it is drawn from. */
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
}

/* Fields sit inside their <label>, so `font: inherit` would pull in the label's
   bold weight. Labels stay bold; the values the user types do not. */
input,
select,
textarea {
  font-weight: 400;
}

button,
a,
input,
select {
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  outline-offset: 2px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  color: #111827;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: 0;
}

h2 {
  color: #111827;
  font-size: 16px;
  letter-spacing: 0;
}

.app {
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}

:root.sidebar-collapsed .app,
.app.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

.sidebar {
  display: flex;
  position: sticky;
  top: 0;
  flex-direction: column;
  gap: 18px;
  height: 100vh;
  padding: 18px;
  color: var(--sidebar-ink);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  transition: padding 180ms ease;
}

/* A quiet grabber strip inside the sidebar edge instead of a protruding button.
   The button box stays wide enough to click comfortably; the visible strip is
   drawn by ::before. The chevron is hidden visually but kept for the a11y name. */
.sidebar-toggle {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: grid;
  width: 14px;
  height: 64px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: none;
  font-size: 0;
  cursor: pointer;
}

.sidebar-toggle::before {
  content: "";
  width: 4px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background-color 140ms ease, height 140ms ease;
}

.sidebar-toggle:hover::before {
  height: 58px;
  background: var(--muted);
}

.sidebar-toggle:focus-visible {
  outline: none;
}

.sidebar-toggle:focus-visible::before {
  height: 58px;
  background: var(--accent);
}

.brand {
  display: flex;
  position: relative;
  align-items: center;
  gap: 11px;
  min-height: 0;
  text-align: left;
}

.brand-main {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--accent-soft);
  font-weight: 800;
}

.brand-mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.sidebar .brand-mark {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  filter: none;
}

.sidebar .brand-mark img {
  width: 28px;
  height: 28px;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 3px;
  color: var(--sidebar-muted);
  font-size: 13px;
}

.sidebar .brand strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* A bordered box beside the flat brand row read as a stray control. It is a
   plain glyph until pointed at, and then it looks like every other button. */
.brand .theme-toggle {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  border-color: transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
}

.brand .theme-toggle:hover,
.brand .theme-toggle:focus-visible {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface-2);
}

.side-nav {
  display: grid;
  position: relative;
  gap: 6px;
}

/* Sliding highlight. Pages are separate documents, so it starts at the link the
   user came from and animates to the current one on load. */
.side-nav-indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  opacity: 0;
  pointer-events: none;
}

.side-nav-indicator.is-ready {
  opacity: 1;
}

.side-nav-indicator.is-animated {
  transition: transform 340ms cubic-bezier(0.34, 1.06, 0.54, 1), height 340ms cubic-bezier(0.34, 1.06, 0.54, 1);
}

@media (prefers-reduced-motion: reduce) {
  .side-nav-indicator.is-animated {
    transition: none;
  }
}

.side-nav a {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  color: var(--sidebar-muted);
  text-decoration: none;
}

/* Expanded, the design marks items with a small dot; the icons only come
   back in the collapsed rail, where they are the whole label. */
.nav-icon {
  display: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  place-items: center;
}

.side-nav a::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.side-nav a.active::before {
  background: var(--accent);
}

.sidebar-collapsed .side-nav a::before {
  display: none;
}

.sidebar-collapsed .nav-icon {
  display: inline-grid;
}

.nav-text,
.button-text,
.brand strong,
.brand span {
  transition: opacity 120ms ease;
}

.side-nav a:hover {
  color: var(--ink);
  background: var(--sidebar-hover);
}

.side-nav a.active {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface-2);
  font-weight: 700;
}

/* The static highlight above is the no-JS fallback; once the sliding indicator
   is in place it paints the highlight instead. */
.side-nav.has-indicator a.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.sidebar-collapsed .sidebar {
  gap: 14px;
  padding: 14px;
}

.sidebar-collapsed .brand {
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-collapsed .brand-main {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.sidebar-collapsed .brand-main > div:not(.brand-mark) {
  display: none;
}

.sidebar-collapsed .sidebar .brand-mark {
  width: 40px;
  height: 40px;
  filter: none;
}

.sidebar-collapsed .sidebar .brand-mark img {
  width: 30px;
  height: 30px;
}

.sidebar-collapsed .brand strong,
.sidebar-collapsed .brand span,
.sidebar-collapsed .sidebar-archive,
.sidebar-collapsed .account-summary,
.sidebar-collapsed .current-user,
.sidebar-collapsed .account-time-left,
.sidebar-collapsed .nav-text,
.sidebar-collapsed .button-text {
  display: none;
}

.sidebar-collapsed .brand .theme-toggle {
  position: static;
  display: grid;
  margin: 0 auto;
}

.sidebar-collapsed .sidebar-footer {
  grid-template-columns: 1fr;
}

.sidebar-collapsed .side-nav a {
  justify-content: center;
  padding: 10px;
}

.sidebar-collapsed .sidebar-footer {
  justify-items: center;
}

.product-tools input,
label input,
label select,
label textarea,
.dict-card input,
.dict-card select,
.account-actions input {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--ink);
  background: var(--surface);
}

label textarea {
  min-height: 78px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

input:hover,
select:hover {
  border-color: var(--line-strong);
}

input:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

.sidebar .product-tools input {
  border-color: var(--line);
  border-radius: var(--radius-pill);
  padding-left: 14px;
  color: var(--ink);
  background: var(--surface);
}

.sidebar .product-tools input::placeholder {
  color: var(--muted);
}

.product-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.product {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  cursor: pointer;
}

.product:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.product.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.product span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

.product strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 1.35;
}

.workspace,
.admin-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background: var(--surface-header);
  box-shadow: var(--shadow);
}

.topbar p {
  margin-top: 7px;
  color: var(--muted);
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.current-user {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
}

.top-actions button,
.auth-form .primary-button,
.plain-button,
.panel-header button,
.account-actions button,
.dict-card button,
.modal-card .panel-header button,
.modal-actions button,
.profile-form-actions button {
  display: inline-grid;
  min-height: 39px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  cursor: pointer;
}

.top-actions button,
.panel-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-icon,
.nav-icon {
  background: currentColor;
  mask: var(--icon) center / 18px 18px no-repeat;
  -webkit-mask: var(--icon) center / 18px 18px no-repeat;
}

.button-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  flex: 0 0 auto;
}

.icon-save {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E");
}

.icon-refresh {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.2 6.5'/%3E%3Cpath d='M3 12A9 9 0 0 1 18.2 5.5'/%3E%3Cpath d='M21 3v6h-6'/%3E%3Cpath d='M3 21v-6h6'/%3E%3C/svg%3E");
}

.icon-print {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E");
}

.icon-book {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h8'/%3E%3C/svg%3E");
}

.icon-logout {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

.icon-plus {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* Which sidebar entries a role sees. The class is applied before the first
   paint by sidebar-state.js (from the remembered role) and corrected by
   role.js once /api/me answers, so the menu is drawn once in its final shape
   instead of showing the client links and then dropping them.

   This is deliberately the only mechanism: a `hidden` attribute in the markup
   would outrank these rules until the script ran, hiding an admin's own active
   item. Default (no class yet, first ever visit) is the client layout.

   !important is deliberate: these have to beat component rules such as
   `.sidebar #profileButton`, which carry an id and would otherwise win. */
[data-admin-nav] {
  display: none !important;
}

.role-admin [data-user-nav] {
  display: none !important;
}

.role-admin .side-nav [data-admin-nav] {
  display: flex !important;
}

.icon-user {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.icon-key {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.85 12.15 19 4'/%3E%3Cpath d='M18 5l2 2'/%3E%3Cpath d='M15 8l2 2'/%3E%3C/svg%3E");
}

.icon-admin {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 8v4'/%3E%3Cpath d='M21 10h-4'/%3E%3C/svg%3E");
}

.icon-download {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}

.icon-trash {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.icon-help {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2-3 4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.top-actions button:hover,
.plain-button:hover,
.panel-header button:hover,
.account-actions button:hover,
.dict-card button:hover,
.modal-card .panel-header button:hover,
.modal-actions button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.primary-button,
.top-actions .primary-button,
.panel-header .primary-button,
.panel-header button[type="submit"],
.modal-actions .primary-button,
.profile-form-actions .primary-button {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.primary-button:hover,
.top-actions .primary-button:hover,
.panel-header .primary-button:hover,
.panel-header button[type="submit"]:hover,
.modal-actions .primary-button:hover,
.profile-form-actions .primary-button:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

.content {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(260px, 340px) minmax(340px, 430px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-height: 0;
}

.panel,
.preview-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

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

.compact-header {
  align-items: center;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.panel-header span {
  color: var(--muted);
  font-size: 13px;
}

.panel-header .button-icon {
  color: inherit;
  font-size: 0;
}

label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 13px;
  font-weight: 680;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Side-by-side labels rarely have captions of the same length, and a caption
   that wraps to a second line would otherwise drop its field below the
   neighbour's. Bottom-aligning the label content keeps the inputs on one line.
   Excludes .check-row, which is a flex row and lays itself out. */
.grid-2 > label:not(.check-row) {
  align-content: end;
}

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

.print-settings-panel {
  align-content: start;
}

.font-size-setting {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--surface-2);
}

.setting-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #344054;
  font-size: 13px;
  font-weight: 680;
}

.setting-title output {
  color: var(--accent);
  font-weight: 760;
}

.setting-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.font-size-setting input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.font-size-setting input[type="range"]:disabled {
  opacity: 0.55;
}

.auto-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  color: #344054;
  font-size: 13px;
  font-weight: 680;
}

.auto-check input {
  width: 17px;
  min-height: 17px;
  accent-color: var(--accent);
}

.compact-status {
  margin: 0;
  padding: 8px 10px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.check-row input {
  width: 17px;
  min-height: 17px;
  accent-color: var(--accent);
}

.preview-panel {
  min-height: 620px;
  padding: 18px;
}

.status {
  margin: 16px 0;
  border: 1px solid var(--note-line);
  border-radius: var(--radius-md);
  padding: 12px;
  color: var(--note-ink);
  background: var(--accent-soft);
}

.warning-status {
  border-color: #ffe2a8;
  color: #744b00;
  background: var(--amber-soft);
}

.error-status {
  border-color: #ffd1cc;
  color: var(--red);
  background: var(--red-soft);
}

.auth-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 24px;
  background: var(--bg);
}

.auth-panel {
  width: min(420px, 100%);
  margin: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(23, 33, 43, 0.12);
}

.auth-brand {
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  text-align: center;
  color: var(--ink);
}

.auth-logo {
  display: grid;
  width: 142px;
  height: 142px;
  place-items: center;
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22));
}

.auth-logo img {
  width: 142px;
  height: 142px;
  object-fit: contain;
}

.auth-brand strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.15;
}

.auth-brand span {
  color: var(--muted);
  font-size: 14px;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.captcha-block,
.captcha-widget {
  min-height: 100px;
}

.auth-form .primary-button {
  justify-content: center;
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

#loginStatus {
  border-color: #ffd1cc;
  color: #8f1d14;
  background: #fff1f0;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.15fr) minmax(360px, 0.85fr);
  gap: 20px;
  align-items: start;
  justify-content: stretch;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.guide-toc {
  position: sticky;
  top: 24px;
  align-content: start;
}

.guide-toc label {
  font-weight: 500;
}

.guide-toc input,
.guide-toc input::placeholder {
  font-weight: 400;
}

.guide-toc nav {
  display: grid;
  gap: 7px;
}

.guide-toc a {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.guide-search-count {
  color: var(--muted);
  font-size: 12px;
}

.guide-content {
  display: grid;
  gap: 16px;
}

.guide-section {
  gap: 16px;
  scroll-margin-top: 24px;
}

.guide-heading {
  display: flex;
  gap: 10px;
  align-items: center;
}

.guide-heading span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 800;
}

.guide-section p,
.guide-list,
.guide-steps {
  color: var(--muted);
  line-height: 1.55;
}

.guide-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

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

.guide-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px;
  background: var(--surface-2);
}

.guide-card strong {
  color: var(--ink);
}

.guide-card p {
  margin: 0;
  font-size: 13px;
}

.guide-steps,
.guide-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
}

.guide-note {
  border: 1px solid var(--note-line);
  border-radius: var(--radius-md);
  padding: 12px;
  color: var(--note-ink);
  background: var(--accent-soft);
  line-height: 1.45;
}

.guide-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.guide-table th,
.guide-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.guide-table th {
  color: var(--ink);
  background: var(--surface-2);
  font-size: 13px;
}

.guide-table td {
  color: var(--muted);
}

.guide-table tr:last-child td {
  border-bottom: 0;
}

.guide-section code {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--ink);
  background: var(--surface-2);
}

/* Administration is one card in the same language as the client card and the
   profile (design 5a): heading, a strip of counters, underline tabs, one pane
   at a time. */
.admin-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-card-head {
  padding: 24px 28px 0;
}

.admin-card-head h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-card-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.admin-card .account-tabs {
  padding-top: 18px;
  padding-left: 28px;
  padding-right: 28px;
}

.admin-card-body {
  padding: 22px 28px;
  min-height: 360px;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

/* The app's field styling hangs off `label input` and a few page-specific
   selectors, so a bare input in a toolbar came out as the browser's own
   control — 27px tall, square, grey. It matches the buttons beside it now. */
.admin-toolbar input[type="search"] {
  flex: 1;
  min-width: 180px;
  min-height: 39px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
}

.admin-toolbar input[type="search"]::placeholder {
  color: var(--muted);
}

.admin-toolbar input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.admin-toolbar input[type="search"]:hover {
  border-color: var(--line-strong);
}

.admin-toolbar input[type="search"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.admin-filter select {
  min-width: 220px;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
}

.admin-filter select:hover {
  border-color: var(--line-strong);
}

.admin-toolbar button {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.admin-toolbar button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.admin-toolbar .primary-button {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.admin-toolbar .primary-button:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

.admin-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-pane-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.admin-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-head-actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.admin-head-actions button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.admin-head-actions .primary-button {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.admin-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.admin-dashboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 16px 28px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dashboard-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dashboard-card strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.dashboard-card span {
  color: var(--muted);
  font-size: 12px;
}

.admin-list-panel,
.admin-audit-panel,
.dict-panel {
  align-content: start;
  min-height: 520px;
}

.admin-audit-panel {
  min-height: 520px;
}

.account-list {
  display: grid;
  align-content: start;
  gap: 0;
}

.audit-list {
  display: grid;
  align-content: start;
  gap: 0;
}

.audit-item {
  display: flex;
  gap: 14px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.contact-list {
  display: grid;
  gap: 10px;
}

.contact-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface);
}

.contact-item.is-handled {
  opacity: 0.62;
}

.contact-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.contact-main strong {
  color: var(--ink);
}

.contact-main span,
.contact-main small {
  color: var(--muted);
  font-size: 13px;
}

.contact-main p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.contact-toggle {
  align-self: start;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--ink);
  background: var(--surface);
  white-space: nowrap;
  cursor: pointer;
}

.contact-toggle:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.contact-actions {
  display: grid;
  gap: 6px;
  align-self: start;
}

.contact-delete {
  min-height: 34px;
  border: 1px solid var(--red-soft);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--red);
  background: var(--red-soft);
  white-space: nowrap;
  cursor: pointer;
}

.contact-delete:hover {
  border-color: var(--red);
}

.admin-audit-panel .audit-item {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 5px;
}

.audit-item-main {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-item-main strong {
  font-size: 13.5px;
  font-weight: 700;
}

.audit-item-main span {
  color: var(--muted);
  font-size: 12.5px;
}

.audit-item time {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}


/* One row per client, as in the design: name and login on the left, then
   state, expiry and contact, with a chevron closing the row. */
.account-card {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 4px;
  background: transparent;
  cursor: pointer;
}

.account-card:hover,
.account-card:focus-visible {
  outline: none;
  background: var(--surface-2);
}

.account-card-main {
  display: grid;
  flex: 1.4;
  gap: 1px;
  min-width: 0;
}

.account-card-main strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card-main span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status {
  flex: none;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  color: var(--ok);
  background: var(--ok-soft);
  font-size: 11.5px;
  font-weight: 700;
}

.account-card.is-blocked .account-status {
  color: var(--amber);
  background: var(--amber-soft);
}

.account-card.is-deleted .account-status {
  color: var(--red);
  background: var(--red-soft);
}

.account-until {
  flex: 0.7;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.account-contact {
  flex: 1;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chevron {
  flex: none;
  color: var(--muted);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.account-actions button:disabled,
.panel-header button:disabled,
.profile-form-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal {
  width: min(760px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius-md);
  padding: 0;
  background: transparent;
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.48);
}

.modal-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

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

.modal-actions-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Account card — three tabs (данные / активность / документы) instead of one
   long scroll. Header, tabs and footer run edge to edge, so the card drops the
   generic .modal-card padding and each region brings its own. */
/* Scoped to the dialog: the admin list uses .account-card too, and a bare
   selector here reset every row in that list to zero padding. */
.modal-card.account-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.account-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px 0;
}

.account-card-title {
  display: grid;
  /* Without flex:1 the title box shrinks to its text and the close button
     sits against the name instead of the corner. */
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.account-card-title strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.account-card-title span {
  color: var(--muted);
  font-size: 13px;
}

.account-card-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.account-card-close:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.account-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 14px 24px 0;
}

.account-tab {
  border: 0;
  padding: 0 2px 12px;
  color: var(--muted);
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.account-tab:hover {
  color: var(--ink);
}

/* An inset shadow rather than a border: it draws over the container's own
   bottom line instead of adding a second one that shifts the label. */
.account-tab.is-active {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.account-card-body {
  padding: 24px;
  /* Keeps the card from resizing as tabs switch, and caps a long document
     list so the footer buttons stay on screen. */
  min-height: 380px;
  max-height: min(56vh, 560px);
  overflow-y: auto;
}

.account-pane {
  display: grid;
  gap: 18px;
  align-content: start;
}

.account-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* These sit outside every existing button selector list, so without a rule of
   their own they render as unstyled browser buttons — white on a dark panel. */
.account-pane-head button,
.account-doc-form button {
  display: inline-grid;
  min-height: 39px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.account-pane-head button:hover,
.account-doc-form button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.account-doc-form .primary-button {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.account-doc-form .primary-button:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

.account-doc-form .primary-button:disabled {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-2);
  cursor: not-allowed;
}

/* Ten metrics in two rows of five. The negative margin pulls each cell onto
   its neighbour's border so the rules read as one grid, not stacked boxes. */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.activity-metric {
  margin: 0 -1px -1px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.activity-metric strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.activity-metric span {
  color: var(--muted);
  font-size: 11.5px;
}

.activity-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.activity-list h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
}

.activity-list-rows {
  display: grid;
  align-content: start;
  max-height: 220px;
  overflow-y: auto;
}

.activity-list-rows p {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  margin: 0;
  font-size: 13px;
}

.activity-list-rows strong {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.activity-list-rows span {
  color: var(--muted);
  white-space: nowrap;
}

/* Empty states are drawn, not written: a dashed box reads as "nothing here
   yet" faster than a sentence in the flow. */
.activity-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: 28px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.account-doc-form {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 14px;
  align-items: end;
}

.account-doc-form .primary-button {
  min-height: 39px;
}

.account-doc-list {
  display: grid;
  gap: 6px;
}

.account-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--surface-2);
}

.account-doc:hover {
  border-color: var(--line-strong);
}

/* The whole tile opens the document for viewing; the buttons on the right do
   the two narrower things (save a copy, delete). */
.account-doc.is-openable {
  cursor: pointer;
}

.account-doc-actions {
  display: flex;
  flex: none;
  gap: 4px;
  align-items: center;
}

.account-doc-download {
  display: grid;
  visibility: hidden;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.account-doc:hover .account-doc-download,
.account-doc-download:focus-visible {
  visibility: visible;
}

.account-doc-download:hover {
  color: var(--ink);
  background: var(--surface);
}

.account-doc-kind {
  flex: none;
  min-width: 62px;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.account-doc-main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

/* The global link colour is the accent blue, which on the dark panel reads as
   a raw hyperlink rather than a file. Documents use the panel's own ink and
   show they are clickable by underlining on hover. */
.account-doc-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-doc-name:hover {
  color: var(--ink);
  text-decoration: underline;
}

.account-doc-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Deleting is rare and irreversible: the control stays out of the way until
   the row is pointed at, and remains reachable from the keyboard. */
.account-doc-delete {
  flex: none;
  visibility: hidden;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.account-doc:hover .account-doc-delete,
.account-doc-delete:focus-visible {
  visibility: visible;
}

.account-doc-delete:hover {
  color: var(--red);
  background: var(--red-soft);
}

.account-doc-download .button-icon,
.account-doc-delete .button-icon {
  width: 15px;
  height: 15px;
  margin-right: 0;
  mask-size: 15px 15px;
  -webkit-mask-size: 15px 15px;
}

/* The beta marker sits beside the wordmark, quiet enough not to compete. */
.landing-beta {
  align-self: center;
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  color: var(--landing-muted-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* Sits between the tab body and the footer so it is visible whichever tab is
   open: it carries save errors and the temporary password from "Сбросить
   пароль", and that button is in the always-present footer. */
.account-card-status {
  margin: 0 24px;
}

.account-card-status[hidden] {
  display: none;
}

.account-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 16px 24px;
}

.account-card-foot-gap {
  flex: 1;
}

.account-card-foot button {
  display: inline-grid;
  min-height: 39px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.account-card-foot button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.account-card-foot .danger-button {
  border-color: transparent;
  color: var(--red);
  background: var(--red-soft);
}

.account-card-foot .danger-button:hover {
  border-color: var(--red);
  background: var(--red-soft);
}

.account-card-foot .danger-button:disabled {
  border-color: transparent;
  color: var(--muted);
  background: var(--surface-2);
  cursor: not-allowed;
}

.account-card-foot .primary-button {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
  padding: 8px 20px;
}

.account-card-foot .primary-button:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

.modal-check {
  align-self: end;
  min-height: 40px;
}

.dict-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.dict-nav {
  gap: 6px;
  padding: 10px;
}

.dict-nav button {
  justify-items: start;
  justify-content: start;
  width: 100%;
  min-height: 42px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  font-weight: 500;
}

.dict-nav button.active {
  border-color: var(--line);
  color: #073f3b;
  background: linear-gradient(90deg, var(--accent-soft), var(--surface));
  font-weight: 500;
}

:root[data-theme="dark"] .dict-nav button.active {
  color: var(--ink);
}

.dict-nav button:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.sidebar .dict-nav {
  display: grid;
  gap: 6px;
  padding: 0;
}

/* Same shape as the main navigation so the two strips read as one control,
   but the marker is green: it says "you are inside a dictionary", not "you
   are on a different page". */
.sidebar .dict-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: start;
  min-height: 39px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  color: var(--sidebar-muted);
  text-align: left;
  background: transparent;
  font-weight: 500;
}

.sidebar .dict-nav button::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.sidebar .dict-nav button.active::before {
  background: var(--ok);
}

.sidebar .dict-nav button:hover {
  color: var(--ink);
  background: var(--sidebar-hover);
}

.sidebar .dict-nav button.active {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface-2);
  font-weight: 700;
}

.sidebar-collapsed .sidebar .dict-nav button::before {
  display: none;
}

.dict-list {
  display: grid;
  /* Pack rows at the top. A grid's default align-content is stretch, so in a
     panel taller than its content the tracks grew to fill it and a short list
     ended up with its rows spread hundreds of pixels apart. This — not the
     row height — was the stretching in the original report. */
  align-content: start;
  gap: 10px;
  margin-top: 16px;
}

.dict-item {
  display: grid;
  align-content: start;
  gap: 5px;
  width: 100%;
  /* 26 padding + two 19px name lines + 5 gap + one 16px detail line. */
  height: 86px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  cursor: pointer;
}

.dict-item:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

/* Every row is the same height whatever it holds: two lines for the name,
   one for the detail. Product names run long and differ only at the end, so
   they get the second line; the full text stays in the title attribute and in
   the editor. Without this a list mixes 68px and 235px rows. */
.dict-item strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
}

.dict-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: 18px;
  color: var(--muted);
  background: var(--surface-2);
}

.dict-modal-notice {
  margin: 0;
  border: 1px solid var(--note-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--note-ink);
  background: var(--accent-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* Support-session banner: deliberately loud, it must not blend into the UI. */
.support-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  color: #7c2d12;
  background: #fed7aa;
  border-bottom: 1px solid #f59e0b;
  font-size: 13px;
  font-weight: 600;
}

.support-banner button {
  padding: 4px 10px;
  font-size: 12px;
}

:root[data-theme="dark"] .support-banner {
  color: #ffedd5;
  background: #7c2d12;
  border-bottom-color: #b45309;
}

/* Profile page — one tabbed card in the design's shape (4a): heading, access
   badge, underline tabs, one pane at a time. */
.profile-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.profile-card-head {
  padding: 24px 28px 0;
}

.profile-card-head h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.profile-card-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

/* Green while the access is fine, red when it is blocked, expired or about
   to expire — the state does the talking, not the reader's arithmetic. */
.access-badge {
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  color: var(--ok);
  background: var(--ok-soft);
  font-size: 11.5px;
  font-weight: 700;
}

.access-badge.is-bad {
  color: var(--red);
  background: var(--red-soft);
}

.profile-card .account-tabs {
  padding-top: 16px;
  padding-left: 28px;
  padding-right: 28px;
}

.tab-count {
  margin-left: 7px;
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
}

.profile-card-body {
  padding: 24px 28px;
  min-height: 400px;
}

.profile-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.profile-block-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
}

.account-pane .profile-block-title:not(:first-child) {
  margin-top: 20px;
}

.profile-side-card {
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: var(--surface-2);
}

.profile-side-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.profile-side-card .profile-side-note {
  margin-top: 8px;
  font-size: 12px;
}

.profile-side-card button {
  display: inline-grid;
  min-height: 39px;
  place-items: center;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.profile-side-card button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.profile-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.profile-wide {
  grid-column: 1 / -1;
}

.profile-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

.profile-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}

.profile-facts dt {
  color: var(--muted);
  font-size: 13px;
}

.profile-facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.profile-form {
  display: grid;
  gap: 12px;
}

.profile-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.request-list {
  display: grid;
  gap: 12px;
}

.request-card {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--surface-2);
}

.request-card.is-invoiced { border-left-color: var(--accent); }
.request-card.is-paid,
.request-card.is-closed { border-left-color: #16a34a; }
.request-card.is-cancelled { border-left-color: var(--muted); }

.request-main {
  display: grid;
  gap: 4px;
}

.request-side {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
}

.request-meta {
  color: var(--muted);
  font-size: 13px;
}

.request-status {
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  color: var(--note-ink);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 700;
}

.request-doc {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: inherit;
  background: var(--surface);
  font-size: 13px;
  text-decoration: none;
}

.request-doc:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.request-doc-kind { font-weight: 700; }
.request-doc-size { color: var(--muted); font-size: 12px; }

.request-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.request-docs .request-doc {
  gap: 6px;
}

.doc-delete {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 6px;
  min-height: 0;
  color: var(--red);
  background: transparent;
  font-size: 15px;
  line-height: 1.2;
}

.plan-options {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.plan-option {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
}

.plan-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.plan-option span {
  display: grid;
}

.plan-option small {
  color: var(--muted);
}

a.current-user {
  color: inherit;
  text-decoration: none;
}

a.current-user:hover {
  text-decoration: underline;
}

.password-rules {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

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

/* Input plus its quick-fill button. */
.dict-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.dict-field-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.dict-field-fill {
  flex: 0 0 auto;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.dict-field-fill:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.dict-modal-fields label:first-child {
  grid-column: 1 / -1;
}

.dict-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--surface);
}

.dict-card:hover {
  border-color: var(--line-strong);
  background: #fcfdff;
}

.product-dict-card {
  grid-template-columns: minmax(220px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(120px, 1fr) minmax(160px, 1fr) auto auto;
}

.dict-card button[data-action="save"] {
  border-color: var(--note-line);
  color: var(--note-ink);
  background: var(--accent-soft);
}

.dict-card button[data-action="delete"],
#deleteAccount,
#deleteDictItem {
  border-color: #ffd1cc;
  color: var(--red);
  background: var(--red-soft);
}

.preview-canvas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  /* "safe" keeps the labels reachable: when a label is wider than the canvas,
     alignment falls back to start instead of clipping the overflow. */
  justify-content: safe center;
  align-items: flex-start;
  margin-top: 10px;
  padding: 18px;
  overflow: auto;
  border: 1px solid #dfe5ee;
  border-radius: var(--radius-md);
  background:
    linear-gradient(45deg, #e9edf2 25%, transparent 25%),
    linear-gradient(-45deg, #e9edf2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9edf2 75%),
    linear-gradient(-45deg, transparent 75%, #e9edf2 75%);
  background-color: #f8fafc;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.label {
  position: relative;
  width: var(--label-width, 100mm);
  height: var(--label-height, 60mm);
  flex: 0 0 auto;
  overflow: hidden;
  color: #000;
  background: #fff;
  border: 1px solid transparent;
  /* The label is printed output, not interface. Its typeface and metrics are
     fixed: Manrope must not reach it, and the base line-height set on body
     must not either — both would change what comes out of the printer. */
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 11pt;
  line-height: normal;
}

.label * {
  position: absolute;
  overflow: hidden;
}

.label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 42mm;
  width: 100%;
  border-top: 1px solid #000;
  z-index: 3;
}

.product-name {
  inset: 0 0 auto 0;
  height: 14mm;
  display: grid;
  place-items: center;
  padding: 0.35mm 3mm 0.45mm;
  border-bottom: 1px solid #000;
  text-align: center;
  font-size: 11pt;
  line-height: 1.08;
}

.sn {
  left: 0;
  top: 14mm;
  width: 50mm;
  height: 10mm;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  font-family: Arial, sans-serif;
  font-size: var(--amto-font-size, 18pt);
  font-weight: 700;
  line-height: 1;
}

.unit-title,
.unit-value {
  left: 50mm;
  width: 20mm;
  height: 5mm;
  display: grid;
  place-items: center;
  border-right: 1px solid #000;
  font-size: 11pt;
}

.unit-title {
  top: 14mm;
  border-bottom: 1px solid #000;
}

.unit-value {
  top: 19mm;
  border-bottom: 1px solid #000;
}

.row {
  left: 0;
  right: 0;
  height: 6mm;
  border-bottom: 1px solid #000;
}

.row span {
  left: 0;
  top: 0;
  bottom: 0;
  width: 30mm;
  display: grid;
  place-items: center;
  border-right: 1px solid #000;
  font-size: 11pt;
}

.row strong {
  left: 30mm;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  padding: 0 1.2mm;
  text-align: center;
  font-size: 11pt;
  line-height: 1.05;
}

.r-series {
  top: 24mm;
  right: 30mm;
}

.r-date {
  top: 30mm;
  right: 30mm;
}

.r-exp {
  top: 36mm;
  right: 30mm;
  border-bottom: 0;
}

.r-series,
.r-date,
.r-exp {
  border-right: 1px solid #000;
}

.r-char {
  top: 42mm;
}

.r-ship {
  top: 48mm;
}

.r-sup {
  top: 54mm;
}

.qr {
  right: 2.2mm;
  top: 14.5mm;
  width: var(--qr-size, 26.6mm);
  height: var(--qr-size, 26.6mm);
  object-fit: contain;
}

:root[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #15212c 0, var(--bg) 440px);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2 {
  color: var(--ink);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .preview-panel,
:root[data-theme="dark"] .auth-panel,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .account-card,
:root[data-theme="dark"] .dict-card,
:root[data-theme="dark"] .dict-item,
:root[data-theme="dark"] .current-user,
:root[data-theme="dark"] .top-actions button:not(.primary-button),
:root[data-theme="dark"] .plain-button,
:root[data-theme="dark"] .panel-header button:not(.primary-button),
:root[data-theme="dark"] .dict-card button,
:root[data-theme="dark"] .modal-actions button:not(.primary-button) {
  color: var(--ink);
  background: var(--surface);
}

:root[data-theme="dark"] .account-card.is-active .account-meta span:first-child {
  border-color: rgba(45, 212, 191, 0.26);
  color: #d8fff8;
  background: rgba(45, 212, 191, 0.16);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
  color-scheme: dark;
}

:root[data-theme="dark"] label {
  color: #c5d1dc;
}

:root[data-theme="dark"] .setting-title {
  color: #c5d1dc;
}

:root[data-theme="dark"] .auto-check {
  color: #c5d1dc;
}

:root[data-theme="dark"] .account-card.is-blocked {
  background: var(--amber-soft);
}

:root[data-theme="dark"] .account-card.is-deleted {
  background: var(--red-soft);
}

:root[data-theme="dark"] .preview-canvas {
  border-color: #314252;
  background:
    linear-gradient(45deg, #1b2935 25%, transparent 25%),
    linear-gradient(-45deg, #1b2935 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1b2935 75%),
    linear-gradient(-45deg, transparent 75%, #1b2935 75%);
  background-color: #14202a;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

:root[data-theme="dark"] #loginStatus {
  border-color: #7f2a24;
  color: #ffd3cf;
  background: #3f1d1b;
}

:root[data-theme="dark"] .status {
  border-color: rgba(45, 212, 191, 0.36);
  color: #d8fff8;
  background: var(--accent-soft);
}

:root[data-theme="dark"] .warning-status {
  border-color: rgba(240, 184, 79, 0.7);
  color: #ffe8b4;
  background: #3b2d12;
}

:root[data-theme="dark"] .error-status {
  border-color: #7f2a24;
  color: #ffd3cf;
  background: #3f1d1b;
}

:root[data-theme="dark"] .guide-note {
  border-color: rgba(45, 212, 191, 0.36);
  color: #d8fff8;
  background: var(--accent-soft);
}

.theme-toggle {
  width: 40px;
  min-width: 40px;
  padding: 8px;
  font-size: 18px;
  line-height: 1;
}

#logoutButton {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
}

#logoutButton:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--surface);
}

.content > .product-panel {
  grid-column: 1;
}

.content > .label-column {
  grid-column: 2;
  display: grid;
  gap: 20px;
  align-content: start;
}

.content > .preview-panel {
  grid-column: 3;
}

.product-panel {
  position: relative;
  align-content: stretch;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: min(620px, calc(100vh - 112px));
  max-height: calc(100vh - 112px);
  overflow: hidden;
}

.product-panel .product-list {
  align-content: start;
  min-height: 0;
  padding: 0 2px 44px 0;
}

.product-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 54px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.86) 72%, var(--surface));
}

:root[data-theme="dark"] .product-panel::after {
  background: linear-gradient(180deg, rgba(22, 34, 45, 0), rgba(22, 34, 45, 0.88) 72%, var(--surface));
}

.sidebar-archive {
  display: grid;
  position: relative;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

/* The sidebar background is a gradient, so the bottom fade cannot be painted as
   a solid colour: it would never match the gradient underneath. Masking the
   scroller fades its content to transparent instead, which works on any
   background. Applied only while there is more content to scroll to. */
.history-list.is-scrollable {
  mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent 100%);
}

.sidebar-section-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.sidebar-section-header h2 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-section-header button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  color: var(--ink);
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.sidebar-section-header button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface-2);
}

.sidebar-section-header button:disabled {
  border-color: var(--line);
  color: var(--muted);
  background: transparent;
  cursor: not-allowed;
}

.sidebar-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.account-summary {
  display: grid;
  grid-column: 1 / -1;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.account-time-left {
  display: flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  color: var(--sidebar-muted);
  font-size: 12px;
}

.sidebar .current-user {
  display: flex;
  min-height: auto;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.sidebar #profileButton,
.sidebar #logoutButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 36px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
}

/* Per the design: the primary of the pair is a filled card, the exit is a
   quiet outline. */
.sidebar #profileButton {
  border: 0;
  color: var(--ink);
  background: var(--surface-2);
  font-weight: 700;
}

.sidebar #logoutButton {
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font-weight: 600;
}

.sidebar #logoutButton:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-soft);
}

.sidebar #profileButton {
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
}

.sidebar #profileButton:hover,
.sidebar #profileButton.is-current {
  color: var(--ink);
  background: var(--line);
}

.preview-canvas.print-frame .label {
  border-color: #111;
}

.sidebar-collapsed .sidebar #profileButton,
.sidebar-collapsed .sidebar #logoutButton {
  width: 44px;
  padding: 8px;
}

.sidebar-collapsed .sidebar #profileButton .button-icon,
.sidebar-collapsed .sidebar #logoutButton .button-icon {
  margin-right: 0;
}

.history-list {
  display: grid;
  gap: 8px;
  max-height: 270px;
  overflow: auto;
}

.history-filters {
  display: grid;
  gap: 8px;
}

.history-filters input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  color: var(--ink);
  background: var(--surface);
}

.history-filters input::placeholder {
  color: var(--muted);
}

.history-filter-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px 13px;
  color: var(--ink);
  text-align: left;
  background: var(--surface-2);
}

.history-open {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  min-width: 0;
  border: 0;
  padding: 4px;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.history-open:focus-visible {
  outline: none;
}

.history-delete {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  line-height: 1;
}

/* An icon rather than a bare ×: the row already has two word buttons, and a
   bin says "destroys the record" where a cross could read as "close". */
.history-delete .button-icon {
  width: 15px;
  height: 15px;
  margin-right: 0;
  mask-size: 15px 15px;
  -webkit-mask-size: 15px 15px;
}

/* Meta lines become chips (2b): date, numbers and count each in their own
   pill on the panel colour. */
.history-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1;
  min-width: 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.history-details > div {
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.history-actions {
  display: flex;
  grid-column: 1;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 28px;
}

/* Push the destructive one to the far edge, per the design. */
.history-actions .history-delete {
  margin-left: auto;
}

.history-print,
.history-copy {
  width: auto;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
}

.history-print:hover,
.history-copy:hover,
.history-print:focus-visible,
.history-copy:focus-visible {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.history-delete:hover,
.history-delete:focus-visible {
  border-color: #ffd1cc;
  color: var(--red);
  background: var(--red-soft);
}

.history-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item span {
  color: var(--muted);
  font-size: 12px;
}

.sidebar .history-list {
  scrollbar-color: var(--line-strong) transparent;
  max-height: none;
  min-height: 0;
  padding-bottom: 34px;
}

.sidebar .history-list::-webkit-scrollbar {
  width: 10px;
}

.sidebar .history-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: transparent;
}

.sidebar .history-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--line-strong);
  background-clip: padding-box;
}

.sidebar .history-list::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: padding-box;
}

/* The sidebar shares the page surface now, so the archive rows use the same
   colours everywhere — no translucent-white special case. */

@media (hover: hover) and (pointer: fine) {
  .history-actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
  }

  .history-item:hover .history-actions,
  .history-item:focus-within .history-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.app-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--muted);
  font-size: 13px;
}

.app-footer a {
  color: var(--muted);
  text-decoration: none;
}

.app-footer a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.app-footer a:last-child {
  justify-self: end;
}

.dict-layout {
  grid-template-columns: minmax(0, 1fr) 460px;
}

.dict-preview-panel {
  position: sticky;
  top: 24px;
  gap: 12px;
  min-width: 0;
}

.dict-hint {
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* The label has a fixed mm width, so as a grid item it would sit at the start
   of the panel instead of filling it. Centre it explicitly. */
.dict-label-preview {
  margin: 0;
  justify-self: center;
}

.dict-label-preview .mock-qr {
  background:
    linear-gradient(90deg, #111 20%, transparent 20% 40%, #111 40% 60%, transparent 60% 80%, #111 80%),
    linear-gradient(#111 20%, transparent 20% 40%, #111 40% 60%, transparent 60% 80%, #111 80%);
  background-size: 8px 8px;
}

.dict-label-preview.highlight-products .product-name,
.dict-label-preview.highlight-products .r-char strong,
.dict-label-preview.highlight-products .mock-qr,
.dict-label-preview.highlight-counterparties .r-ship,
.dict-label-preview.highlight-counterparties .r-sup,
.dict-label-preview.highlight-counterparties .mock-qr,
.dict-label-preview.highlight-units .unit-title,
.dict-label-preview.highlight-units .unit-value,
.dict-label-preview.highlight-units .mock-qr {
  background-color: rgba(45, 212, 191, 0.22);
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.65);
}

.landing-body {
  --landing-bg: #ffffff;
  --landing-fg: #151f2e;
  --landing-muted: #f5f7fa;
  --landing-muted-fg: #5d6c7f;
  --landing-card: #ffffff;
  --landing-card-fg: #151f2e;
  --landing-border: #dfe7ef;
  --landing-primary: #2563eb;
  --landing-primary-strong: #1d4ed8;
  --landing-primary-soft: #e8efff;
  /* Icon shows what a click switches to: moon in light, sun in dark. */
  --landing-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --landing-blue: #2f5f9e;
  --landing-warm: #a84f22;
  --landing-shadow: rgba(26, 39, 57, 0.1);
  --landing-glow-a: rgba(45, 212, 191, 0.32);
  --landing-glow-b: rgba(47, 95, 158, 0.18);
  --landing-glow-c: rgba(244, 177, 131, 0.16);
  min-height: 100vh;
  color: var(--landing-fg);
  background: var(--landing-bg);
}

.landing-body[data-landing-theme="dark"] {
  --landing-bg: #101722;
  --landing-fg: #edf4f7;
  --landing-muted: #172232;
  --landing-muted-fg: #aab7c6;
  --landing-card: #121c29;
  --landing-card-fg: #eef6f8;
  --landing-border: #273548;
  --landing-primary: #60a5fa;
  --landing-primary-strong: #3b82f6;
  --landing-primary-soft: #17284a;
  --landing-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='M4.9 4.9l1.4 1.4'/%3E%3Cpath d='M17.7 17.7l1.4 1.4'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='M4.9 19.1l1.4-1.4'/%3E%3Cpath d='M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --landing-blue: #8bb7ff;
  --landing-warm: #f4b183;
  --landing-shadow: rgba(0, 0, 0, 0.28);
  --landing-glow-a: rgba(45, 212, 191, 0.2);
  --landing-glow-b: rgba(139, 183, 255, 0.16);
  --landing-glow-c: rgba(244, 177, 131, 0.1);
}

.landing-body a {
  color: inherit;
  text-decoration: none;
}

.landing-nav {
  display: grid;
  position: sticky;
  z-index: 40;
  top: 0;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 64px;
  padding: 0 max(20px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid var(--landing-border);
  background: color-mix(in srgb, var(--landing-bg) 88%, transparent);
  box-shadow: 0 12px 30px var(--landing-shadow);
  backdrop-filter: blur(16px);
}

.landing-brand,
.landing-nav-links,
.landing-nav-actions {
  display: flex;
  align-items: center;
}

.landing-brand {
  gap: 10px;
  min-width: 206px;
  font-size: 18px;
  font-weight: 800;
}

.landing-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.landing-nav-links {
  justify-content: center;
  gap: 6px;
}

.landing-nav-links a,
.landing-theme-toggle,
.landing-menu-toggle {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--landing-muted-fg);
  background: transparent;
  font: inherit;
  font-weight: 720;
}

.landing-nav-links a {
  padding: 9px 12px;
}

.landing-nav-links a:hover,
.landing-theme-toggle:hover {
  border-color: var(--landing-border);
  color: var(--landing-primary-strong);
  background: var(--landing-muted);
}

.landing-nav-actions {
  justify-content: flex-end;
  gap: 8px;
}

.landing-nav-minimal {
  grid-template-columns: minmax(0, 1fr) auto;
}

.landing-nav-minimal .landing-brand {
  min-width: 0;
}

/* Doubled class beats .landing-secondary's padding/min-height, which is
   declared later; without it the icon-only button stretches to fit. */
.landing-secondary.landing-theme-toggle {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
}

.landing-theme-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--landing-theme-icon) center / 18px 18px no-repeat;
  -webkit-mask: var(--landing-theme-icon) center / 18px 18px no-repeat;
}

.landing-menu-toggle {
  display: none;
  width: 42px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.landing-menu-toggle span {
  width: 20px;
  height: 2px;
  background: var(--landing-fg);
}

.landing-primary,
.landing-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 11px 18px;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.landing-primary {
  color: #ffffff;
  background: var(--landing-primary-strong);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--landing-primary) 28%, transparent);
}

.landing-primary:hover,
.landing-secondary:hover {
  transform: translateY(-1px);
}

.landing-primary:hover {
  background: var(--landing-primary);
}

.landing-secondary {
  border-color: var(--landing-border);
  color: var(--landing-fg);
  background: color-mix(in srgb, var(--landing-card) 84%, transparent);
}

.landing-secondary:hover {
  background: var(--landing-card);
  box-shadow: 0 12px 24px var(--landing-shadow);
}

.landing-hero {
  display: grid;
  position: relative;
  min-height: calc(100vh - 64px);
  align-items: center;
  padding: 78px max(20px, calc((100% - 1180px) / 2)) 64px;
  background: var(--landing-bg);
  overflow: hidden;
  isolation: isolate;
}

.landing-hero::before,
.landing-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.landing-hero::before {
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--landing-border) 52%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--landing-border) 52%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--landing-bg) 66%, transparent), var(--landing-muted));
  background-position:
    var(--landing-grid-x, 0px) var(--landing-grid-y, 0px),
    var(--landing-grid-x, 0px) var(--landing-grid-y, 0px),
    center;
  background-size: 72px 72px, 72px 72px, auto;
  opacity: 0.72;
}

.landing-hero::after {
  z-index: 1;
  top: 16%;
  right: 8%;
  width: min(620px, 72vw);
  height: 430px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(115deg, var(--landing-glow-a), transparent 42%),
    linear-gradient(245deg, var(--landing-glow-b), transparent 46%),
    linear-gradient(15deg, transparent 18%, var(--landing-glow-c), transparent 64%);
  filter: blur(86px);
  opacity: 0.78;
  transform: translate3d(var(--landing-pointer-x-px, 0px), var(--landing-pointer-y-px, 0px), 0) rotate(34deg);
  animation: landing-shadow-slide 7s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes landing-shadow-slide {
  0% {
    opacity: 0.42;
    transform: translate3d(calc(-150px + var(--landing-pointer-x-px, 0px)), calc(46px + var(--landing-pointer-y-px, 0px)), 0) rotate(28deg) scale(0.94);
  }

  45% {
    opacity: 0.78;
  }

  100% {
    opacity: 0.62;
    transform: translate3d(calc(80px + var(--landing-pointer-x-px, 0px)), calc(-22px + var(--landing-pointer-y-px, 0px)), 0) rotate(38deg) scale(1.06);
  }
}

.landing-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.landing-kicker,
.landing-badge {
  color: var(--landing-primary-strong);
  font-size: 13px;
  font-weight: 840;
  text-transform: uppercase;
}

.landing-kicker {
  margin: 0 0 12px;
}

.landing-hero h1 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--landing-fg);
  font-size: 64px;
  line-height: 1.02;
}

.landing-hero h1 span {
  color: var(--landing-primary-strong);
}

.landing-hero-content > p:not(.landing-kicker) {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--landing-muted-fg);
  font-size: 19px;
  line-height: 1.6;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.landing-hero-cards {
  display: grid;
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 48px auto 0;
}

.landing-card,
.landing-service-card,
.landing-product-figure {
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-md);
  color: var(--landing-card-fg);
  background: color-mix(in srgb, var(--landing-card) 94%, transparent);
  box-shadow: 0 18px 38px var(--landing-shadow);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.landing-card.visible,
.landing-service-card.visible,
.landing-product-figure.visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-card:hover,
.landing-service-card:hover {
  border-color: color-mix(in srgb, var(--landing-primary) 42%, var(--landing-border));
  box-shadow: 0 22px 44px var(--landing-shadow);
}

/* Pricing */
.landing-pricing .landing-section-head {
  margin-inline: auto;
  text-align: center;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 24px;
  /* Pricing must never depend on the scroll-in observer to be visible. */
  opacity: 1;
  transform: none;
}

.pricing-card-featured {
  border-color: color-mix(in srgb, var(--landing-primary) 55%, var(--landing-border));
  box-shadow: 0 26px 52px color-mix(in srgb, var(--landing-primary) 22%, transparent);
}

.pricing-card-head {
  display: grid;
  gap: 6px;
}

.pricing-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pricing-plan h3 {
  margin: 0;
  color: var(--landing-fg);
  font-size: 21px;
}

.pricing-tag {
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  color: #ffffff;
  background: var(--landing-primary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pricing-tag-save {
  color: var(--landing-primary);
  background: color-mix(in srgb, var(--landing-primary) 14%, transparent);
}

.pricing-note {
  margin: 0;
  color: var(--landing-muted-fg);
  font-size: 14px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
}

.pricing-amount {
  color: var(--landing-fg);
  font-size: 40px;
  font-weight: 850;
  letter-spacing: -0.5px;
}

.pricing-unit {
  color: var(--landing-muted-fg);
  font-weight: 700;
}

.pricing-total {
  margin: 0;
  color: var(--landing-muted-fg);
  font-size: 13px;
}

.pricing-features {
  display: grid;
  gap: 11px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.pricing-features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--landing-card-fg);
  font-size: 14px;
  line-height: 1.4;
}

.pricing-check {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--landing-primary);
  font-size: 12px;
  font-weight: 900;
}

.pricing-cta {
  margin-top: auto;
  width: 100%;
}

@media (max-width: 980px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* Photo slider between hero and pricing */
.landing-gallery {
  width: 100%;
  margin: 36px 0;
  padding: 0;
}

.landing-slider {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--landing-muted);
}

/* Darkening overlay so the band reads as one graphic and the controls stay
   legible over any photo. Sits above the images, below the controls. */
.landing-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0.18) 42%, rgba(15, 23, 42, 0.5) 100%);
}

.landing-slider-track {
  display: flex;
  transition: transform 520ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .landing-slider-track {
    transition: none;
  }
}

.landing-slide {
  flex: 0 0 100%;
  margin: 0;
  height: clamp(300px, 46vw, 640px);
  overflow: hidden;
}

/* Image is taller than the slide so it can shift vertically on scroll without
   revealing an edge. The extra height sets the parallax travel (larger = more
   pronounced). --slider-parallax is driven by landing.js. */
.landing-slide img {
  display: block;
  width: 100%;
  height: calc(100% + 260px);
  object-fit: cover;
  transform: translate3d(0, var(--slider-parallax, -130px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .landing-slide img {
    transform: translate3d(0, -130px, 0);
  }
}

.landing-slider-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--landing-fg);
  background: color-mix(in srgb, var(--landing-card) 85%, transparent);
  box-shadow: 0 6px 16px var(--landing-shadow);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.landing-slider-prev {
  left: 14px;
}

.landing-slider-next {
  right: 14px;
}

.landing-slider-nav:hover {
  background: var(--landing-card);
}

.landing-slider-dots {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.landing-slider-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}

.landing-slider-dot.is-active {
  background: #ffffff;
  transform: scale(1.25);
}

/* Contact dialog */
.landing-dialog {
  width: min(520px, calc(100% - 32px));
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-lg);
  padding: 0;
  color: var(--landing-fg);
  background: var(--landing-card);
}

.landing-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.landing-dialog-card {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.landing-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-dialog-head h2 {
  margin: 0;
  color: var(--landing-fg);
  font-size: 20px;
}

.landing-dialog-close {
  border: 0;
  padding: 0 4px;
  color: var(--landing-muted-fg);
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.landing-plan-switch {
  margin: 0;
  padding: 0;
  border: 0;
}

.landing-plan-switch legend {
  padding: 0;
  margin-bottom: 6px;
  color: var(--landing-muted-fg);
  font-size: 13px;
  font-weight: 700;
}

.landing-plan-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.landing-plan-switch label {
  cursor: pointer;
}

.landing-plan-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.landing-plan-switch span {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease;
}

.landing-plan-switch strong {
  color: var(--landing-fg);
  font-size: 14px;
}

.landing-plan-switch small {
  color: var(--landing-muted-fg);
  font-size: 12px;
}

.landing-plan-switch input:checked + span {
  border-color: var(--landing-primary);
  background: color-mix(in srgb, var(--landing-primary) 12%, transparent);
}

.landing-plan-switch input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-primary) 22%, transparent);
}

.landing-dialog-card label {
  display: grid;
  gap: 6px;
  color: var(--landing-muted-fg);
  font-size: 13px;
  font-weight: 700;
}

.landing-dialog-card input:not([type="radio"]):not(.landing-hp),
.landing-dialog-card textarea {
  width: 100%;
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--landing-fg);
  background: var(--landing-bg);
  font: inherit;
  font-weight: 400;
}

.landing-dialog-card input:focus,
.landing-dialog-card textarea:focus {
  outline: none;
  border-color: var(--landing-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-primary) 18%, transparent);
}

.landing-dialog-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.landing-dialog-note {
  margin: 0;
  color: var(--landing-muted-fg);
  font-size: 12px;
}

.landing-dialog-status {
  margin: 0;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

.landing-dialog-status.is-ok {
  color: #12673f;
  background: #e7f7ee;
}

.landing-dialog-status.is-error {
  color: #a4232f;
  background: #fdecec;
}

.landing-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

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

@media (max-width: 520px) {
  .landing-dialog-row {
    grid-template-columns: 1fr;
  }
}

.landing-hero-cards .landing-card {
  min-height: 214px;
  padding: 19px;
}

.landing-card h2,
.landing-card h3,
.landing-service-card h3 {
  margin: 14px 0 0;
  color: var(--landing-fg);
}

.landing-card p,
.landing-service-card p,
.landing-section-head p,
.landing-service-copy > p,
.screenshot-list span,
.landing-faq details p {
  color: var(--landing-muted-fg);
  line-height: 1.55;
}

.hero-card-progress {
  height: 9px;
  margin-top: 22px;
  border-radius: 999px;
  background: var(--landing-muted);
}

.hero-card-progress i {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: var(--landing-primary-strong);
}

.hero-label-preview {
  display: grid;
  position: relative;
  min-height: 166px;
  gap: 8px;
  padding: 16px;
  border: 1px solid #111827;
  border-radius: var(--radius-md);
  color: #101820;
  background: #ffffff;
  overflow: hidden;
}

.hero-label-preview strong {
  max-width: 74%;
  line-height: 1.18;
}

.hero-label-preview i {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 62px;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, #111827 20%, transparent 20% 40%, #111827 40% 60%, transparent 60% 80%, #111827 80%),
    linear-gradient(#111827 20%, transparent 20% 40%, #111827 40% 60%, transparent 60% 80%, #111827 80%);
  background-size: 8px 8px;
}

.landing-hero-metrics {
  display: flex;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 0;
}

.landing-hero-metrics span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--landing-muted-fg);
  background: color-mix(in srgb, var(--landing-card) 82%, transparent);
}

.landing-hero-metrics strong {
  color: var(--landing-primary-strong);
  font-size: 25px;
}

.landing-sponsors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 22px max(20px, calc((100% - 1180px) / 2));
  border-block: 1px solid var(--landing-border);
  background: var(--landing-bg);
}

.landing-sponsors span,
.landing-tags span {
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: var(--landing-muted-fg);
  background: var(--landing-muted);
  font-weight: 760;
}

.landing-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 88px 0;
}

.landing-strip,
.landing-screenshots,
.landing-faq {
  width: 100%;
  max-width: none;
  padding: 88px max(20px, calc((100% - 1180px) / 2));
  background: var(--landing-muted);
}

.landing-section-head {
  display: grid;
  gap: 10px;
  max-width: 780px;
  margin-bottom: 30px;
}

.landing-section-head.centered {
  margin-inline: auto;
  text-align: center;
}

.landing-section h2,
.landing-final-cta h2 {
  color: var(--landing-fg);
  font-size: 40px;
  line-height: 1.12;
}

.landing-stats,
.landing-flow,
.landing-feature-grid,
.screenshot-list {
  display: grid;
  gap: 16px;
}

.landing-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-stats .landing-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  place-items: center;
  padding: 24px;
  text-align: center;
}

.landing-stats strong {
  color: var(--landing-primary-strong);
  font-size: 42px;
}

.landing-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-flow .landing-card,
.landing-feature-grid .landing-card {
  min-height: 226px;
  padding: 22px;
}

.feature-icon,
.service-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--landing-primary-strong);
  background: var(--landing-primary-soft);
  font-weight: 840;
}

.landing-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-feature-grid .landing-card:nth-child(2) .feature-icon {
  color: var(--landing-blue);
  background: color-mix(in srgb, var(--landing-blue) 16%, transparent);
}

.landing-feature-grid .landing-card:nth-child(3) .feature-icon {
  color: var(--landing-warm);
  background: color-mix(in srgb, var(--landing-warm) 16%, transparent);
}

.landing-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.landing-services {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
  gap: 42px;
  align-items: center;
}

.landing-service-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.landing-service-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
}

.landing-product-figure {
  margin: 0;
  padding: 12px;
  overflow: hidden;
}

.landing-product-figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}

.screenshot-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.screenshot-list .landing-card {
  min-height: 184px;
  padding: 18px;
}

.screenshot-list strong {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-md);
  color: #ffffff;
  background: var(--landing-primary-strong);
}

.landing-faq-list {
  display: grid;
  gap: 12px;
  width: min(860px, 100%);
  margin: 0 auto;
}

.landing-faq details {
  padding: 18px 20px;
}

.landing-faq summary {
  cursor: pointer;
  color: var(--landing-fg);
  font-weight: 820;
}

.landing-faq details p {
  margin-top: 12px;
}

.landing-final-cta {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 78px max(20px, calc((100% - 1180px) / 2));
  text-align: center;
  background: var(--landing-bg);
}

.landing-final-cta h2 {
  max-width: 760px;
}

/* Three zones: legal links left, copyright centred, credit right. */
.landing-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 24px max(20px, calc((100% - 1180px) / 2));
  border-top: 1px solid var(--landing-border);
  color: var(--landing-muted-fg);
  background: var(--landing-bg);
}

.landing-footer-powered {
  justify-self: end;
}

@media (max-width: 640px) {
  .landing-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  .landing-footer-powered {
    justify-self: center;
  }
}

.landing-footer a {
  color: var(--landing-primary-strong);
}

@media (max-width: 1100px) {
  .landing-hero-cards,
  .landing-flow,
  .landing-feature-grid,
  .screenshot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-services {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .landing-nav {
    grid-template-columns: auto auto;
    padding-inline: 14px;
  }

  .landing-menu-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .landing-nav-links {
    display: none;
    grid-column: 1 / -1;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
    border-top: 1px solid var(--landing-border);
    padding-top: 10px;
  }

  .landing-nav-links.open {
    display: flex;
  }

  .landing-nav-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .landing-nav-actions .landing-secondary,
  .landing-nav-actions .landing-primary,
  .landing-theme-toggle {
    flex: 1;
  }

  .landing-hero {
    min-height: auto;
    padding-top: 52px;
  }

  .landing-hero::after {
    top: 12%;
    right: -34%;
    width: 520px;
    height: 360px;
    filter: blur(72px);
  }

  .landing-hero h1 {
    font-size: 46px;
  }

  .landing-hero-content > p:not(.landing-kicker) {
    font-size: 17px;
  }

  .landing-stats,
  .landing-hero-cards,
  .landing-flow,
  .landing-feature-grid,
  .screenshot-list {
    grid-template-columns: 1fr;
  }

  .landing-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-primary,
  .landing-secondary {
    width: 100%;
  }

  .landing-section,
  .landing-strip,
  .landing-screenshots,
  .landing-faq {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .landing-section h2,
  .landing-final-cta h2 {
    font-size: 31px;
  }

  .landing-footer {
    flex-direction: column;
  }

  .landing-nav-minimal {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .landing-nav-minimal .landing-nav-actions {
    grid-column: auto;
    justify-content: flex-end;
  }

  .landing-nav-minimal .landing-secondary {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero::after {
    animation: none;
  }
}

@media (max-width: 1050px) {
  .app,
  .content,
  .admin-grid,
  .guide-layout,
  .dict-layout {
    grid-template-columns: 1fr;
  }

  .guide-toc {
    position: static;
  }

  .admin-dashboard,
  .guide-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .product-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: 240px;
  }

  .product-panel {
    min-height: 0;
    max-height: none;
  }

  .dict-card,
  .product-dict-card,
  .audit-item {
    grid-template-columns: 1fr;
  }

  .content > .preview-panel,
  .content > .label-column,
  .content > .product-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .dict-preview-panel {
    position: static;
  }

}

@media (max-width: 720px) {
  .workspace,
  .admin-shell {
    padding: 16px;
  }

  .topbar,
  .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3,
  .history-item {
    grid-template-columns: 1fr;
  }

  .history-actions {
    grid-column: auto;
    width: 100%;
  }

  .guide-card-grid {
    grid-template-columns: 1fr;
  }

  /* Six counters stacked one per row is a very long strip; two keeps them
     scannable without squeezing the numbers. */
  .admin-dashboard,
  .activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-lists,
  .account-doc-form,
  .profile-data-grid,
  .admin-two-columns {
    grid-template-columns: 1fr;
  }

  .admin-card-head,
  .admin-card-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-dashboard {
    margin-left: 16px;
    margin-right: 16px;
  }

  /* Four tabs do not fit at this width. Scrolling the strip keeps them on one
     line, so the underline still reads as a single row of choices. */
  .admin-card .account-tabs,
  .profile-card .account-tabs {
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .admin-card .account-tabs::-webkit-scrollbar,
  .profile-card .account-tabs::-webkit-scrollbar {
    display: none;
  }

  .account-tab {
    white-space: nowrap;
  }

  .profile-card-head,
  .profile-card-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .profile-card .account-tabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  .account-tabs {
    gap: 16px;
  }

  .dict-modal-fields {
    grid-template-columns: 1fr;
  }

  .app-footer {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .app-footer a:last-child {
    justify-self: start;
  }

}

@media print {
  @page {
    size: var(--label-width, 100mm) var(--label-height, 60mm);
    margin: 0;
  }

  html,
  body {
    width: var(--label-width, 100mm);
    min-height: var(--label-height, 60mm);
    margin: 0;
    background: #fff;
  }

  .app,
  .workspace,
  .content,
  .preview-panel,
  .preview-canvas {
    display: block;
    width: var(--label-width, 100mm);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .sidebar,
  .topbar,
  .panel,
  .app-footer,
  .preview-panel > .panel-header,
  .status {
    display: none !important;
  }

  .preview-canvas {
    position: static;
  }

  .label {
    display: block;
    margin: 0;
    border: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .preview-canvas.print-frame .label {
    border: 1px solid #000;
  }

  .label:not(:last-child) {
    break-after: page;
    page-break-after: always;
  }
}

.announcement-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  margin-bottom: 20px;
  padding: 18px;
}

.announcement-panel .panel-actions {
  align-items: center;
}

.announcement-form {
  display: grid;
  gap: 12px;
}

.announcement-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* Admin-authored text: keep the author's line breaks, but never let a long
   unbroken string blow out the dialog. */
.announcement-text {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#announcementDialog .modal-card {
  width: min(520px, 100%);
}

/* The print page is a workbench: it fills the viewport and scrolls inside its
   panels, never as a whole page. The magic offsets this replaces were tied to
   the old header height and broke whenever the header changed.
   Other pages (guide, admin, dictionaries) keep normal page scroll, and below
   the stacking breakpoint this page scrolls normally too. */
@media (min-width: 1051px) {
  .app-fixed {
    height: 100vh;
    overflow: hidden;
  }

  .app-fixed .workspace {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .app-fixed .content {
    align-items: stretch;
    min-height: 0;
  }

  .app-fixed .product-panel {
    min-height: 0;
    max-height: none;
  }

  .app-fixed .content > .label-column {
    min-height: 0;
    overflow-y: auto;
  }

  .app-fixed .preview-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .app-fixed .preview-canvas {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Dictionaries page: the item list scrolls inside its panel, not the page.
     .dict-panel is a .preview-panel, so it already becomes a flex column above. */
  .app-fixed .dict-layout {
    flex: 1 1 auto;
    align-items: stretch;
    min-height: 0;
  }

  .app-fixed .dict-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .app-fixed .dict-preview-panel {
    align-self: start;
    position: static;
  }
}

/* Legal pages, consent and cookie notice */
.legal-body {
  min-height: 100vh;
}

.legal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 0;
}

.legal {
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  padding: 8px 0 64px;
  color: var(--landing-fg);
  line-height: 1.6;
}

.legal h1 {
  margin: 8px 0 4px;
  font-size: 28px;
}

.legal h2 {
  margin: 28px 0 8px;
  font-size: 19px;
}

.legal p,
.legal li {
  color: var(--landing-muted-fg);
}

.legal ul {
  margin: 8px 0;
  padding-left: 20px;
}

.legal a {
  color: var(--landing-primary);
}

.legal-meta {
  font-size: 14px;
}

.legal-draft {
  margin: 0 0 20px;
  border: 1px solid #f0c36d;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: #7a5600;
  background: #fff7e0;
  font-size: 14px;
}

.landing-consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--landing-muted-fg);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.landing-consent input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--landing-primary);
}

.landing-consent a {
  color: var(--landing-primary);
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-self: start;
}

.app-footer-links {
  display: inline-flex;
  gap: 10px;
}

.app-footer-links a,
.landing-footer-links a {
  color: inherit;
}

.landing-footer a {
  text-decoration: none;
  transition: color 140ms ease;
}

.landing-footer a:hover,
.landing-footer a:focus-visible {
  color: var(--landing-primary);
  text-decoration: underline;
}

.cookie-notice {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(720px, calc(100% - 24px));
  border: 1px solid var(--line, #e3e9f4);
  border-radius: 14px;
  padding: 12px 16px;
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.cookie-notice-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.cookie-notice-text a {
  color: #2563eb;
}

.cookie-notice-accept {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 8px 18px;
  color: #ffffff;
  background: #2563eb;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 560px) {
  .cookie-notice {
    flex-direction: column;
    align-items: stretch;
  }
}