/* MELZER X3000 — shared visual foundation. No external fonts or assets. */
:root {
  color-scheme: light;
  --mz-blue: #06417d;
  --mz-blue-hover: #043264;
  --mz-orange: #ec6726;
  --mz-canvas: #f3f6fa;
  --mz-surface: #fff;
  --mz-ink: #172d45;
  --mz-muted: #52677d;
  --mz-line: #d6e0eb;
  --mz-soft: #eaf1f9;
  --mz-success: #167049;
  --mz-error: #b42335;
  --mz-warning: #805510;
  --mz-radius: 12px;
  --mz-shadow: 0 6px 24px rgb(6 41 78 / 5%);
  --mz-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --ink: var(--mz-ink);
  --muted: var(--mz-muted);
  --line: var(--mz-line);
  --canvas: var(--mz-canvas);
  --surface: var(--mz-surface);
  --white: var(--mz-surface);
  --soft: var(--mz-soft);
  --blue: var(--mz-blue);
  --blue-dark: var(--mz-blue-hover);
  --blue-soft: var(--mz-soft);
  --red: var(--mz-error);
  --red-soft: #fff0f2;
  --warning: var(--mz-warning);
  --warning-bg: #fff7e7;
  --error: var(--mz-error);
  --radius: var(--mz-radius);
}
html, body { font-family: var(--mz-font); }
.x3000-ui {
  margin: 0;
  color: var(--mz-ink);
  background: var(--mz-canvas);
  font: 400 16px/1.6 var(--mz-font);
  -webkit-font-smoothing: antialiased;
}
.x3000-shop, .x3000-management, .x3000-register, .x3000-auth {
  --green: var(--mz-blue);
  --green-dark: var(--mz-blue-hover);
}
.x3000-ui *, .x3000-ui *::before, .x3000-ui *::after { box-sizing: border-box; }
.x3000-ui [hidden] { display: none !important; }
.x3000-ui :is(button, input, select, textarea) { font-family: inherit; }
.x3000-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mz-blue);
  outline-offset: 4px;
}
.x3000-ui a { color: var(--mz-blue); text-underline-offset: 3px; }
.x3000-ui :is(h1, h2, h3) { color: var(--mz-ink); text-wrap: balance; overflow-wrap: anywhere; }
.x3000-ui h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.15; font-weight: 700; letter-spacing: -.035em; }
.x3000-ui h2 { font-size: 23px; font-weight: 650; letter-spacing: -.025em; }
.x3000-ui h3 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.x3000-ui .eyebrow { color: var(--mz-blue); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.x3000-ui :is(.muted, .help, .field-help, .privacy-note, .intro-copy, .introduction > p:not(.eyebrow)) { color: var(--mz-muted); }
.x3000-ui :is(.help, .field-help, .privacy-note) { font-size: 13px; line-height: 1.65; }

/* White brand bar, separated from the work area with the original orange. */
.x3000-ui :is(.header, .app-header) {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--mz-surface);
  color: var(--mz-ink);
  border: 0;
  border-bottom: 3px solid var(--mz-orange);
}
.x3000-ui :is(.header-inner, .header:not(:has(.header-inner))) {
  max-width: 1440px;
  min-height: 92px;
  margin-inline: auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}
.x3000-ui .brand {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
  color: var(--mz-blue);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0;
}
.x3000-logo { display: block; width: 246px; height: auto; max-width: 100%; flex-shrink: 0; }
.x3000-ui .brand .brand-section {
  display: block;
  padding: 6px 0 6px 20px;
  border-left: 1px solid var(--mz-line);
  color: var(--mz-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.x3000-ui :is(.header nav, .app-header nav, .header-actions, .shop-nav) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.x3000-ui :is(.header nav, .app-header nav, .header-actions, .shop-nav) > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--mz-blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.x3000-ui :is(.header nav, .app-header nav, .header-actions, .shop-nav) > a:hover { background: var(--mz-soft); }
.x3000-ui .test-banner { background: #fff5e9; color: #795019; font-size: 12px; border-bottom: 1px solid #f1d8b9; }
.x3000-ui .test-badge { background: #fff5e9; color: #795019; border-color: #edcfab; }
.x3000-ui .page { min-width: 0; }
.x3000-management .page { max-width: 1376px; padding-top: 36px; }
.x3000-ui :is(.intro, .introduction, .login-intro) h1 { font-size: clamp(30px, 3.5vw, 44px); }
.x3000-ui .scope-note { background: var(--mz-soft); border-color: var(--mz-line); color: var(--mz-blue); border-radius: var(--mz-radius); }
.x3000-ui .scope-symbol { color: var(--mz-blue); }
.x3000-ui :is(.card, .login-card, .wizard, .operator-card) {
  background: var(--mz-surface);
  border: 1px solid var(--mz-line);
  border-radius: var(--mz-radius);
  box-shadow: var(--mz-shadow);
}
.x3000-ui :is(.entity, .business, .finalize-box) { background: #f8fafd; border-color: var(--mz-line); border-radius: 10px; }
.x3000-ui :is(.empty, .empty-state) { color: var(--mz-muted); background: #f8fafd; border-color: var(--mz-line); }
.x3000-ui :is(.entity-meta, .operator-meta, .list-title) { font-size: 12px; }
.x3000-ui .entity-name { font-size: 15px; }
.x3000-ui .overview { background: var(--mz-blue); color: #fff; border-radius: var(--mz-radius); border-color: var(--mz-blue); }
.x3000-ui .overview > div { border-color: rgb(255 255 255 / 22%); }
.x3000-ui .overview :is(strong, span) { color: #fff; }
.x3000-ui .overview strong { font-variant-numeric: tabular-nums; }
.x3000-ui :is(.step, .step-mark) { background: var(--mz-soft); color: var(--mz-blue); border-color: var(--mz-line); border-radius: 10px; }
.x3000-ui :is(.pool-badge, .country-list > span, .summary-strip, .session-scope) { background: var(--mz-soft); color: var(--mz-blue); border-color: var(--mz-line); }
.x3000-ui .portal-session { border-left: 4px solid var(--mz-blue); }
.x3000-ui .portal-session h2 { font-size: 20px; }
.x3000-ui #ps-user { font-weight: 600; }

/* Shared controls; size and contrast remain usable on touch screens. */
.x3000-ui .button, .x3000-auth #login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color .15s, border-color .15s;
}
.x3000-ui :is(.primary, .button-primary), .x3000-auth #login-submit { color: #fff; background: var(--mz-blue); border-color: var(--mz-blue); }
.x3000-ui :is(.primary, .button-primary):hover:not(:disabled), .x3000-auth #login-submit:hover:not(:disabled) { background: var(--mz-blue-hover); border-color: var(--mz-blue-hover); }
.x3000-ui :is(.secondary, .button-secondary, .button-header) { color: var(--mz-blue); background: #fff; border-color: #b3c6db; }
.x3000-ui :is(.secondary, .button-secondary, .button-header):hover:not(:disabled) { background: var(--mz-soft); border-color: var(--mz-blue); }
.x3000-ui .button-text { color: var(--mz-blue); }
.x3000-ui .button.danger { color: var(--mz-error); background: #fff; border-color: #dfb3bc; }
.x3000-ui button:disabled { opacity: .55; cursor: not-allowed; }
.x3000-ui label { color: var(--mz-ink); font-size: 14px; font-weight: 600; }
.x3000-ui :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--mz-ink);
  background: #fff;
  border: 1px solid #b3c3d5;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.4;
}
.x3000-ui input::placeholder, .x3000-ui textarea::placeholder { color: #64788c; }
.x3000-ui :is(input, select, textarea):disabled { color: var(--mz-muted); background: #edf1f6; }
.x3000-ui input:read-only { background: #f4f7fb; }
.x3000-ui :is(input[type=checkbox], input[type=radio]) { accent-color: var(--mz-blue); }
.x3000-ui input[type=file]::file-selector-button { color: var(--mz-blue); background: var(--mz-soft); border: 0; border-radius: 5px; padding: 8px 10px; }
.x3000-ui .slug { border-color: #b3c3d5; }
.x3000-ui .slug > input { border: 0; background: transparent; }
.x3000-ui :is(.actions, .view-actions, .form-actions) { gap: 10px; }
.x3000-ui :is(.key-value, code, .mono) { font-family: Consolas, "SFMono-Regular", monospace; }

/* Tables scroll within the work area, never the whole screen. */
.x3000-ui :is(.table-wrap, .table-scroll) { width: 100%; max-width: 100%; overflow-x: auto; border-radius: 8px; }
.x3000-ui table { width: 100%; font-size: 14px; border-collapse: collapse; }
.x3000-ui th { color: var(--mz-muted); background: #f3f6fa; font-size: 11px; font-weight: 700; letter-spacing: .045em; border-bottom-color: var(--mz-line); }
.x3000-ui td { border-bottom-color: #e3eaf2; }
.x3000-ui :is(th, td) { padding: 13px 14px; }
.x3000-ui tbody tr:hover { background: #f8fafd; }
.x3000-ui .number { font-variant-numeric: tabular-nums; }
.x3000-ui .money-strong { color: var(--mz-blue); }
.x3000-ui :is(.badge, .status-pill, .status-badge, .count-pill) { border-radius: 6px; font-size: 12px; font-weight: 650; }
.x3000-ui .badge { background: var(--mz-soft); border-color: var(--mz-line); color: var(--mz-blue); }
.x3000-ui :is(.badge.active, .status-pill.success, .status-badge.active, .status-badge.Active) { color: #12613e; background: #e9f6ee; border-color: #afd6be; }
.x3000-ui :is(.notice, .message) { border-radius: 9px; font-size: 14px; line-height: 1.65; }
.x3000-ui .notice:not(.error):not(.notice-error):not(.warning), .x3000-ui .message:not(.error):not(.pending) { color: var(--mz-blue); border-color: #b7cde3; background: #edf4fc; }
.x3000-ui :is(.error, .notice-error) { color: #962638; border-color: #e2b5bd; background: #fff0f2; }
.x3000-ui :is(.pending, .pending-note) { color: var(--mz-warning); border-color: #e5cd9a; background: #fff7e7; }
.x3000-ui :is(.test-note, .license-summary) { border-left-color: var(--mz-orange); }
.x3000-ui :is(footer, .footer) { color: var(--mz-muted); border-color: var(--mz-line); font-size: 12px; }
.x3000-ui .progress li { white-space: normal; color: var(--mz-muted); border-bottom-color: var(--mz-line); }
.x3000-ui .progress [aria-current=step] { color: var(--mz-blue); border-bottom-color: var(--mz-orange); }
.x3000-register .progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x3000-ui .skip-link { z-index: 1500; }
.x3000-auth .header { min-height: 92px; }
.x3000-auth .page { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 64px; }
.x3000-auth .introduction { min-width: 0; }
.x3000-auth #login-submit { width: 100%; justify-content: space-between; }
.x3000-auth .login-card { border-top: 4px solid var(--mz-blue); }
.x3000-shop .sample-voucher {
  color: #fff;
  background: linear-gradient(120deg, #06417d, #123153);
  border: 1px solid #1a4f86;
  box-shadow: 0 16px 36px rgb(6 65 125 / 15%);
}
.x3000-shop :is(.sample-top, .sample-bottom, .sample-top > span:first-child) { color: #e2edfa; }
.x3000-shop .sample-top > span:last-child { color: #fff; background: #ffffff16; border-color: #ffffff40; }
.x3000-shop .sample-bottom { border-color: #ffffff40; }
.x3000-shop :is(.issuer-line strong, .history-title, .history-amount, .balance-line strong, .voucher-code-box code) { color: var(--mz-blue); }
.x3000-shop .issuer-dot { background: var(--mz-orange); }
.x3000-shop .amount-options button { min-height: 44px; color: var(--mz-blue); border-color: #b3c6db; border-radius: 8px; }
.x3000-shop .amount-options button[aria-pressed=true] { color: #fff; background: var(--mz-blue); border-color: var(--mz-blue); box-shadow: inset 0 -3px var(--mz-orange); }
.x3000-shop .amount-options button:hover:enabled { background: var(--mz-soft); color: var(--mz-blue); }
.x3000-shop :is(.history-item, .receipt) { border-color: var(--mz-line); }
.x3000-shop .history-item { background: #f8fafd; }
.x3000-shop .history-item.active { border-color: var(--mz-blue); }
.x3000-shop .count-pill { color: var(--mz-blue); background: var(--mz-soft); }
.x3000-shop .selection > * { min-width: 0; max-width: 100%; }
.x3000-shop :is(.sample-bottom, .history-meta, .storage-note, .receipt-order, .qr-caption) { font-size: 12px; }

@media (max-width: 1000px) {
  .x3000-ui :is(.header-inner, .header:not(:has(.header-inner))) { gap: 12px 24px; padding: 20px 24px; }
  .x3000-auth .page { gap: 32px; }
}
@media (max-width: 700px) {
  .x3000-shop .sample-voucher { transform: none; }
  .x3000-ui :is(.header-inner, .header:not(:has(.header-inner))) { min-height: 78px; padding: 18px 20px; gap: 14px; }
  .x3000-logo { width: 212px; max-width: 100%; }
  .x3000-ui .brand { flex-wrap: wrap; gap: 8px 14px; }
  .x3000-ui .brand .brand-section { display: block; padding: 0; border: 0; font-size: 12px; }
  .x3000-ui :is(.header nav, .app-header nav, .header-actions, .shop-nav) { width: 100%; gap: 2px; }
  .x3000-ui :is(.header nav, .app-header nav, .header-actions, .shop-nav) > a { padding: 8px 10px; font-size: 13px; }
  .x3000-ui :is(.card, .login-card, .wizard, .operator-card) { padding: 22px; border-radius: 10px; }
  .x3000-ui :is(.page-heading, .workspace-heading, .card-heading) { flex-wrap: wrap; gap: 14px; }
  .x3000-ui .page-heading > *, .x3000-ui .workspace-heading > * { min-width: 0; max-width: 100%; }
  .x3000-auth .page { display: block; margin-top: 24px; }
  .x3000-ui :is(.ps-scopes, .scope-card, .preview-controls) { flex-wrap: wrap; }
  .x3000-ui .overview { gap: 8px; }
  .x3000-ui :is(.actions, .view-actions, .form-actions) > .button { min-width: 0; white-space: normal; }
}
@media (max-width: 380px) {
  .x3000-shop .amount-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x3000-ui :is(.header-inner, .header:not(:has(.header-inner))) { padding-inline: 16px; }
  .x3000-ui :is(.card, .login-card, .wizard, .operator-card) { padding: 18px; }
  .x3000-ui h1 { font-size: 29px; }
  .x3000-ui h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .x3000-ui *, .x3000-ui *::before, .x3000-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .x3000-ui { background: white; color: black; }
  .x3000-ui :is(.no-print, .skip-link) { display: none !important; }
  .x3000-ui :is(.card, .login-card, .wizard) { box-shadow: none; }
}