: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;
  --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);
  --sidebar-bg: linear-gradient(180deg, #3f83f8 0%, #2563eb 48%, #1e40af 100%);
  --sidebar-ink: #eaf1ff;
  --sidebar-muted: #bcd2f8;
  --sidebar-hover: rgba(255, 255, 255, 0.16);
  --sidebar-line: rgba(255, 255, 255, 0.18);
}

: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;
  --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: linear-gradient(180deg, #1e3a8a 0%, #172554 55%, #0f172a 100%);
  --sidebar-ink: #e3ecff;
  --sidebar-muted: #93b0e0;
  --sidebar-hover: rgba(255, 255, 255, 0.12);
  --sidebar-line: rgba(255, 255, 255, 0.12);
}

* {
  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: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

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: 0;
  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: rgba(255, 255, 255, 0.32);
  transition: background-color 140ms ease, height 140ms ease;
}

.sidebar-toggle:hover::before {
  height: 58px;
  background: rgba(255, 255, 255, 0.6);
}

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

.sidebar-toggle:focus-visible::before {
  height: 58px;
  background: #ffffff;
}

.brand {
  display: grid;
  position: relative;
  justify-items: center;
  justify-content: center;
  align-items: start;
  gap: 12px;
  min-height: 162px;
  text-align: center;
}

.brand-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.09);
  font-weight: 800;
}

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

.sidebar .brand-mark {
  width: 116px;
  height: 116px;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22));
}

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

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

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

.sidebar .brand strong {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.15;
}

.brand .theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.brand .theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
}

.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(--sidebar-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
  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;
}

.nav-icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  min-width: 20px;
  place-items: center;
}

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

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

.side-nav a.active {
  border-color: var(--sidebar-line);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
  font-weight: 600;
}

/* 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: 96px;
  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: 48px;
  height: 48px;
  filter: none;
}

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

.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 .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(--sidebar-line);
  border-radius: var(--radius-pill);
  padding-left: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.sidebar .product-tools input:hover {
  border-color: rgba(255, 255, 255, 0.34);
}

.sidebar .product-tools input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.2);
}

.sidebar .product-tools input::placeholder {
  color: var(--sidebar-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-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;
}

.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);
}

.admin-dashboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.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 {
  min-height: 520px;
}

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

.account-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.audit-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.audit-item {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface);
}

.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 strong,
.audit-item span,
.audit-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-item span,
.audit-item small {
  color: var(--muted);
}

.audit-item small {
  font-size: 12px;
}

.account-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--surface);
  cursor: pointer;
}

.account-card.is-active {
  border-left-color: var(--accent);
}

.account-card.is-blocked {
  border-left-color: var(--amber);
  background: #fffdf7;
}

.account-card.is-deleted {
  border-left-color: var(--red);
  background: #fffafa;
}

.account-card:hover,
.account-card:focus-visible {
  border-color: var(--blue);
  border-left-color: var(--blue);
  outline: none;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.account-card strong,
.account-card span {
  display: block;
}

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

.account-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.account-meta span:first-child {
  width: max-content;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--ok-ink);
  background: var(--accent-soft);
  font-weight: 700;
}

.account-card.is-blocked .account-meta span:first-child {
  color: #744b00;
  background: var(--amber-soft);
}

.account-card.is-deleted .account-meta span:first-child {
  color: var(--red);
  background: var(--red-soft);
}

.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-activity {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

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

.activity-metric,
.activity-list {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--surface-2);
}

.activity-metric strong {
  font-size: 18px;
}

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

.activity-list {
  grid-column: span 2;
  align-content: start;
}

.activity-list h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

.activity-list p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.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;
}

.sidebar .dict-nav button {
  justify-items: start;
  justify-content: start;
  min-height: 39px;
  border-color: transparent;
  color: var(--sidebar-muted);
  text-align: left;
  background: transparent;
  font-weight: 500;
}

.sidebar .dict-nav button:hover,
.sidebar .dict-nav button.active {
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.dict-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.dict-item {
  display: grid;
  gap: 5px;
  width: 100%;
  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);
}

.dict-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.dict-item-products strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.dict-item span {
  overflow-wrap: anywhere;
  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 */
.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;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 11pt;
}

.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: #ffffff;
  font-size: 14px;
}

.sidebar-section-header button {
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  color: var(--sidebar-muted);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.sidebar-section-header button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

.sidebar-footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.account-summary {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
}

.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-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  color: var(--sidebar-muted);
  background: transparent;
}

.sidebar #profileButton,
.sidebar #logoutButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 39px;
  border-radius: var(--radius-sm);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--sidebar-muted);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.sidebar #logoutButton:hover {
  border-color: var(--red);
  color: #ffb4ad;
  background: rgba(255, 255, 255, 0.07);
}

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

.sidebar #profileButton:hover,
.sidebar #profileButton.is-current {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--sidebar-ink);
  background: var(--sidebar-hover);
}

.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 rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

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

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

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

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

.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: 100%;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.history-details {
  display: grid;
  gap: 2px;
  grid-column: 1;
  min-width: 0;
  padding: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.history-actions {
  display: grid;
  grid-column: 2;
  gap: 6px;
  width: 70px;
}

.history-print,
.history-copy {
  width: 100%;
  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: rgba(188, 214, 211, 0.42) rgba(255, 255, 255, 0.07);
  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: rgba(255, 255, 255, 0.07);
}

.sidebar .history-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(188, 214, 211, 0.42);
  background-clip: padding-box;
}

.sidebar .history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(215, 232, 230, 0.64);
  background-clip: padding-box;
}

.sidebar .history-item {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--sidebar-ink);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .history-item:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.11);
}

.sidebar .history-item span {
  color: #bcd6d3;
}

.sidebar .history-details {
  color: #bcd6d3;
}

.sidebar .history-delete {
  border-color: rgba(255, 255, 255, 0.12);
  color: #bcd6d3;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .history-print,
.sidebar .history-copy {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--sidebar-muted);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .history-print:hover,
.sidebar .history-copy:hover,
.sidebar .history-print:focus-visible,
.sidebar .history-copy:focus-visible {
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.11);
}

.sidebar .history-delete:hover,
.sidebar .history-delete:focus-visible {
  border-color: rgba(255, 180, 173, 0.35);
  color: #ffb4ad;
  background: rgba(255, 255, 255, 0.08);
}

@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,
  .activity-grid,
  .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%;
  }

  .admin-dashboard,
  .activity-grid,
  .guide-card-grid {
    grid-template-columns: 1fr;
  }

  .activity-list {
    grid-column: auto;
  }

  .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;
  }
}