/* Shared visual rules. Page styles may arrange components, but use these tokens for appearance. */
:root {
  --ui-primary: var(--green);
  --ui-primary-hover: var(--green-dark);
  --ui-danger: #b33442;
  --ui-danger-hover: #942735;
  --ui-focus: var(--blue);
  --ui-control-radius: 8px;
  --ui-panel-radius: 12px;
  --ui-control-height: 44px;
  --ui-control-padding: 10px 16px;
  --ui-control-font: 15px;
  --ui-control-weight: 700;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
}
:is(.ui-button,.primary-button,.secondary-button,.danger-button,.table-action,.ghost-button,.text-button,.external-button,.header-home) {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ui-space-2);
  min-height:var(--ui-control-height); max-width:100%; padding:var(--ui-control-padding);
  border:1px solid transparent; border-radius:var(--ui-control-radius);
  font-family:inherit; font-size:var(--ui-control-font); font-weight:var(--ui-control-weight); line-height:1.4;
  text-align:center; text-decoration:none; cursor:pointer; overflow-wrap:anywhere;
  background:var(--ui-button-bg,#fff); color:var(--ui-button-color,var(--ui-primary-hover));
}
:is(.ui-button,.primary-button,.secondary-button,.danger-button,.table-action,.ghost-button,.text-button,.external-button,.header-home):hover {text-decoration:none}
:is(.primary-button,.ui-button--primary) {--ui-button-bg:var(--ui-primary);--ui-button-color:#fff;border-color:var(--ui-primary)}
:is(.primary-button,.ui-button--primary):hover {background:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}
:is(.secondary-button,.table-action,.ghost-button,.ui-button--secondary) {border-color:#bacbc4;background:#fff;color:var(--ui-primary-hover)}
:is(.secondary-button,.table-action,.ghost-button,.ui-button--secondary):hover {background:var(--green-soft);border-color:var(--ui-primary)}
:is(.danger-button,.ui-button--danger) {background:var(--ui-danger);color:#fff;border-color:var(--ui-danger)}
:is(.danger-button,.ui-button--danger):hover {background:var(--ui-danger-hover);border-color:var(--ui-danger-hover)}
:is(.text-button,.ui-button--text) {background:transparent;color:var(--ui-primary-hover)}
:is(.text-button,.ui-button--text):hover {background:var(--green-soft)}
:is(.table-action,.ui-button--compact) {width:auto;font-size:13px;padding:8px 12px}
.ui-button--full {width:100%}
:is(.ui-button,.primary-button,.secondary-button,.danger-button,.table-action,.ghost-button,.text-button):disabled,
:is(.ui-button,.primary-button,.secondary-button,.danger-button,.table-action,.ghost-button,.text-button):disabled:hover {
  background:#e1e7e5;color:#596761;border-color:#cbd5d0;cursor:not-allowed;box-shadow:none;
}
:is(.ui-button,.primary-button,.secondary-button,.danger-button,.table-action,.ghost-button,.text-button):focus-visible,
:is(input,select,textarea,a):focus-visible {outline:3px solid var(--ui-focus);outline-offset:3px}
.site-header :is(.header-home,.text-button) {min-height:var(--ui-control-height);padding:8px 12px;border-radius:var(--ui-control-radius);color:#fff;background:transparent;font-size:14px}
.site-header .header-home {border:1px solid #ffffff66}
.site-header :is(.header-home,.text-button):hover {background:#ffffff18}
.field :is(input,select,textarea):where(:not([type=checkbox]):not([type=radio])),.ui-input {
  width:100%;min-width:0;min-height:var(--ui-control-height);padding:10px 12px;border:1px solid #bacbc4;
  border-radius:var(--ui-control-radius);background:#fff;color:var(--ink);font:inherit;line-height:1.4;
}
.field :is(input,select,textarea):disabled,.ui-input:disabled {background:#edf1ef;color:#596761;cursor:not-allowed}
.field :is(input,select,textarea)[aria-invalid=true],.ui-input[aria-invalid=true] {border-color:var(--ui-danger)}
.ui-field-error {color:var(--ui-danger);font-size:13px;margin:6px 0 0}
.panel,.ui-panel {border:1px solid var(--line);border-radius:var(--ui-panel-radius);background:#fff;padding:var(--ui-space-6);box-shadow:var(--shadow-sm)}
.ui-actions {display:flex;gap:var(--ui-space-3);align-items:center;flex-wrap:wrap}
.ui-actions form {margin:0}
.ui-toolbar {display:flex;gap:var(--ui-space-3);align-items:end;flex-wrap:wrap}
.ui-toolbar .field {flex:1 1 240px;min-width:0}
.ui-toolbar :is(.primary-button,.secondary-button,.ui-button),.developer-view-search :is(.primary-button,.secondary-button) {width:auto}
.ui-table-scroll {max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--ui-panel-radius)}
.ui-table {width:100%;min-width:560px;border-collapse:collapse;background:#fff}
.ui-table th,.ui-table td {padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;overflow-wrap:anywhere}
.ui-table thead th {background:#f3f7f6;font-size:13px;color:var(--muted)}
.ui-table tbody th {background:transparent;font-weight:600;white-space:normal}
.ui-table tbody tr:last-child>* {border-bottom:0}
.design-guide {min-width:0;grid-template-columns:minmax(0,1fr)}
.design-guide .panel {min-width:0}
.design-guide-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.design-guide-example {display:grid;gap:12px;min-width:0}
.design-guide-example h3 {margin:0;font-size:16px}
.design-guide-swatches {display:flex;gap:16px;flex-wrap:wrap}
.design-guide-swatch {display:flex;align-items:center;gap:8px;font-size:14px}
.design-guide-swatch i {width:28px;height:28px;border-radius:8px;background:var(--swatch);display:inline-block}
.design-guide pre {padding:16px;background:#eef3f1;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.7}
.design-guide h2 {margin-bottom:16px}
@media(max-width:700px){.design-guide-grid{grid-template-columns:minmax(0,1fr)}.panel,.ui-panel{padding:18px}.ui-toolbar .field{flex-basis:100%}.ui-toolbar button{flex:1 1 auto}}
@media print{.panel,.ui-panel{padding:0;border:0;box-shadow:none}.ui-table-scroll{overflow:visible;border:0}.ui-table{min-width:0}}

.developer-qr-page{min-width:0;grid-template-columns:minmax(0,1fr)}
.developer-qr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.developer-qr-grid>.panel{min-width:0;display:grid;gap:16px;align-content:start}
.developer-qr-grid p{margin:0;line-height:1.7}.developer-qr-grid .qr{height:auto}
.developer-qr-grid .ui-actions :is(a,button){width:auto}
.developer-qr-grid .button-row{margin-top:0}
.developer-qr-grid input[type=file]{max-width:100%;font-size:13px}
.developer-qr-grid #camera{max-width:100%}
.developer-select-page .page-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:700px){.developer-qr-grid{grid-template-columns:minmax(0,1fr);gap:16px}}

.developer-selection-steps{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0}
.developer-selection-steps li{padding:10px 14px;border-radius:8px;background:#e9efec;color:var(--muted)}
.developer-selection-steps [aria-current=step]{background:var(--green-dark);color:#fff;font-weight:700}
.developer-company-table{min-width:580px;table-layout:fixed}.developer-company-table th:first-child{width:40%}
.developer-company-table tbody th{background:transparent;white-space:normal;overflow-wrap:anywhere}
.developer-company-table small{display:block;margin-top:4px;font-weight:400}
.developer-company-table th:last-child{width:160px}.developer-company-table .secondary-button{width:auto}

.reception-choice-list{grid-template-columns:minmax(0,1fr)}

.developer-qr-pass .qr{height:auto}.developer-qr-reader{width:100%;max-width:640px;justify-self:center;min-width:0;display:grid;gap:16px}.developer-qr-reader p{margin:0;line-height:1.7}.developer-qr-reader input[type=file]{max-width:100%;font-size:13px}