:root{
  --bg:#f3f1ea;
  --panel:#fcfbf7;
  --panel-2:#f7f4ec;
  --panel-3:#f1ede2;
  --ink:#161612;
  --muted:#6f6a5c;
  --line:#ddd5c5;
  --line-strong:#c7bda8;
  --brand:#123c32;
  --brand-2:#1f5a4b;
  --brand-3:#dce8df;
  --accent:#b98a2f;
  --accent-soft:#f4e7c7;
  --danger:#9f3d31;
  --danger-soft:#f7e4df;
  --shadow:0 24px 60px rgba(33,27,17,.08);
  --shadow-soft:0 12px 30px rgba(33,27,17,.05);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at top left,rgba(185,138,47,.12),transparent 24%),
    radial-gradient(circle at bottom right,rgba(18,60,50,.11),transparent 28%),
    linear-gradient(180deg,#f6f2e9 0%,#f0ece3 100%);
  font:15px/1.5 "Manrope",system-ui,sans-serif;
}

.page-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05));
  opacity:.4;
}

main{position:relative;z-index:1}

.hidden{display:none!important}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.68));
  border:1px solid rgba(255,255,255,.75);
  border-radius:28px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.logo{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:
    linear-gradient(135deg,#1f5a4b,#0d2f27);
  color:#fff;
  font:800 22px/1 "Space Grotesk",sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

h1,h2,h3,p{margin-top:0}
h1,h2,h3{
  font-family:"Space Grotesk",sans-serif;
  letter-spacing:-.04em;
  line-height:1.02;
}
h1{font-size:52px;margin-bottom:10px}
h2{font-size:30px;margin-bottom:10px}
h3{font-size:19px;margin-bottom:8px}

.eyebrow{
  margin-bottom:10px;
  color:var(--brand-2);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  font-weight:800;
}

.muted{color:var(--muted)}

label{
  display:grid;
  gap:8px;
  font-size:12px;
  font-weight:800;
  color:#464236;
}

input,select,textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffdf8;
  color:var(--ink);
  font:600 14px/1.3 "Manrope",system-ui,sans-serif;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

input::placeholder{color:#9b9384}
textarea{
  min-height:150px;
  resize:vertical;
  line-height:1.45;
}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--brand-2);
  box-shadow:0 0 0 4px rgba(31,90,75,.10);
}

button{
  border:0;
  border-radius:16px;
  min-height:46px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:#fff;
  font:800 14px/1 "Manrope",system-ui,sans-serif;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(18,60,50,.18);
  filter:saturate(1.03);
}

.secondary{
  background:linear-gradient(180deg,#fff3d8,#efd7a6);
  color:#5f4517;
}

.ghost{
  background:transparent;
  color:var(--brand);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}

.ghost:hover{
  background:rgba(255,255,255,.06);
  box-shadow:none;
}

.danger{
  background:transparent;
  color:var(--danger);
  min-height:auto;
  padding:8px 6px;
  box-shadow:none;
}

.danger:hover{
  transform:none;
  background:var(--danger-soft);
  box-shadow:none;
}

.error{
  color:var(--danger);
  min-height:20px;
  margin-bottom:0;
}

.login-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
}

.login-stage{
  width:min(1180px,100%);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  align-items:stretch;
}

.login-promo{
  padding:42px;
  background:
    radial-gradient(circle at top right,rgba(185,138,47,.24),transparent 28%),
    linear-gradient(160deg,#143f35 0%,#102c26 100%);
  color:#f6f0e3;
  border:0;
  position:relative;
  overflow:hidden;
}

.login-promo .eyebrow,
.login-promo .muted{color:#d7d9d2}

.login-promo::after{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-60px;
  width:220px;
  height:220px;
  border-radius:32px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  transform:rotate(24deg);
}

.promo-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.promo-grid article{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.promo-grid span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font:800 13px/1 "Space Grotesk",sans-serif;
}

.promo-grid strong{
  display:block;
  margin-bottom:8px;
  font:700 16px/1.2 "Space Grotesk",sans-serif;
}

.promo-grid p{
  margin-bottom:0;
  color:#d9ddd5;
  font-size:13px;
}

.login-card{
  padding:38px;
  align-self:center;
  background:linear-gradient(180deg,rgba(255,250,241,.96),rgba(255,246,233,.84));
}

.login-card h2{margin-bottom:8px}
.login-card button{width:100%;margin-top:22px}

.admin-shell{
  width:calc(100% - 30px);
  margin:15px auto;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.topnav{
  position:sticky;
  top:15px;
  z-index:60;
  padding:4px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  background:
    linear-gradient(180deg,#173c33 0%,#102e27 100%);
  color:#f4eee2;
  border:0;
}

.topnav button{
  min-height:34px;
  padding:6px 10px;
}

.topnav .muted{color:#b9c1bb}

.topnav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.topnav-brand .logo{
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:14px;
}

.topnav-brand h2{
  font-size:15px;
  margin:0;
  color:#fff7ea;
}

.topnav-brand .eyebrow{font-size:10px}

.topnav-brand .eyebrow{color:#cbd7d1}

.topnav-groups{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  flex:1;
}

.topnav-link,
.topnav-group-toggle{
  flex-shrink:0;
  white-space:nowrap;
  text-align:left;
  justify-content:flex-start;
  background:rgba(255,255,255,.04);
  color:#ecf3ee;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  padding:6px 10px;
  border-radius:9px;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.topnav-link:hover,
.topnav-group-toggle:hover{
  box-shadow:none;
  background:rgba(255,255,255,.08);
}

.topnav-link.active{
  background:linear-gradient(180deg,#f4e6c0,#debf78);
  color:#35270c;
  border-color:transparent;
}

.topnav-group{
  position:relative;
  flex-shrink:0;
}

.topnav-group-toggle::after{
  content:"\25be";
  margin-left:8px;
  opacity:.7;
}

.topnav-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:180px;
  padding:6px;
  border-radius:12px;
  background:#173c33;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px rgba(8,20,16,.4);
  z-index:70;
  flex-direction:column;
  gap:2px;
}

.topnav-group.open .topnav-dropdown{display:flex}

.topnav-dropdown .topnav-link{width:100%}

.topnav-actions{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.tab-strip{
  display:flex;
  align-items:center;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
  margin:0 0 1px;
  padding:1px 3px 2px;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(199,189,168,.55);
}

.tab-strip:empty{display:none}

.tab-strip::-webkit-scrollbar{display:none}

.tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  min-height:28px;
  padding:3px 4px 3px 9px;
  border-radius:7px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.tab:hover{
  background:rgba(255,255,255,.62);
  border-color:rgba(199,189,168,.45);
  color:var(--ink);
}

.tab.active{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(237,244,239,.9));
  border-color:rgba(40,112,91,.24);
  color:var(--brand);
  font-weight:700;
  box-shadow:0 1px 3px rgba(22,22,18,.08);
}

.tab.active::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:-3px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--brand-2),var(--accent));
}

.tab-label{white-space:nowrap}

.tab-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  min-height:0;
  border-radius:50%;
  border:0;
  background:transparent;
  color:inherit;
  font-size:11px;
  line-height:1;
  padding:0;
  box-shadow:none;
  opacity:.35;
}

.tab:hover .tab-close,
.tab.active .tab-close{opacity:.65}

.tab-close:hover{
  background:rgba(40,112,91,.12);
  opacity:1;
  transform:none;
  filter:none;
  box-shadow:none;
}

.workspace{
  padding:1px 4px 34px;
  position:relative;
  min-width:0;
}

.topbar,
.section-head,
.heading,
.actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.topbar{
  padding:14px 18px;
  margin-bottom:14px;
  background:linear-gradient(180deg,rgba(255,251,245,.92),rgba(252,247,239,.8));
}

.topbar-title{
  display:flex;
  align-items:center;
}

.topbar h1{margin-bottom:0}

.topbar-actions{
  display:flex;
  align-items:end;
  gap:14px;
}

.compact{
  min-width:320px;
  padding:14px 16px;
  border-radius:20px;
  background:var(--panel-2);
  border:1px solid var(--line);
}

.view{animation:rise .26s ease}

@keyframes rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.hero{
  padding:30px;
  margin-bottom:18px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  background:
    linear-gradient(135deg,rgba(255,250,241,.95),rgba(244,238,224,.82));
}

.hero-badge{
  padding:24px;
  border-radius:24px;
  background:
    linear-gradient(160deg,#143f35 0%,#205447 100%);
  color:#f7f1e3;
  display:grid;
  align-content:end;
  position:relative;
  overflow:hidden;
}

.hero-badge::after{
  content:"";
  position:absolute;
  inset:auto -40px -50px auto;
  width:180px;
  height:180px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%);
}

.hero-badge span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#d4ddd8;
  font-weight:800;
}

.hero-badge strong{
  font:700 36px/1 "Space Grotesk",sans-serif;
}

.stats-grid,.module-grid{
  display:grid;
  gap:16px;
}

.stats-grid{
  grid-template-columns:repeat(4,1fr);
  margin-bottom:18px;
}

.stat{
  padding:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,247,240,.78));
}

.stat strong{
  display:block;
  margin:10px 0 6px;
  font:800 40px/1 "Space Grotesk",sans-serif;
}

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

.module-grid{grid-template-columns:repeat(2,1fr)}

.module{
  padding:24px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:end;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(249,246,239,.78));
}

.module.accent{
  background:
    radial-gradient(circle at top right,rgba(255,219,144,.16),transparent 24%),
    linear-gradient(140deg,#173f35 0%,#205347 100%);
  color:#fff7ea;
}

.module.accent .eyebrow,
.module.accent .muted{color:#e8ede7}

.module-state{
  padding:8px 12px;
  border-radius:999px;
  background:var(--panel-3);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.placeholder{
  padding:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,244,236,.8));
}

.section-head{margin-bottom:18px}

.reseller-form,
.provider-form,
.backend-form,
.coverage-form,
.role-form,
.user-form,
.user-roles-form,
.enum-browser{
  padding:24px;
  margin-bottom:18px;
}

.reseller-form h3,
.provider-form h3,
.backend-form h3,
.coverage-form h3,
.role-form h3,
.user-form h3,
.user-roles-form h3{margin-bottom:0}

.coverage-form{
  display:grid;
  gap:16px;
}

.coverage-form .location{margin:0}

.reseller-fields{
  display:grid;
  grid-template-columns:1.3fr .7fr 1fr;
  gap:16px;
}

.backend-fields,
.role-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.backend-fields label:has(textarea),
.role-fields label:has(textarea){
  grid-column:1 / -1;
}

@media (max-width:1500px){
  .backend-fields,
  .role-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.role-permission-group{margin-bottom:14px}
.role-permission-group:last-child{margin-bottom:0}

.provider-fields{
  display:grid;
  grid-template-columns:1.1fr .8fr .7fr .8fr;
  gap:16px;
}

.provider-url{
  grid-column:1 / -1;
}

.provider-search-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:8px;
}

.provider-search-limit-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.provider-category-head{
  margin:24px 0 10px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.provider-category-head h3{margin-bottom:4px}

.markup-layer-context{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border:1px solid rgba(31,90,75,.18);
  border-radius:14px;
  background:var(--brand-3);
  color:var(--brand);
}

.markup-layer-context strong{white-space:nowrap}
.markup-layer-context span{font-size:13px;color:var(--muted)}

.markup-rule-groups{
  display:grid;
  gap:18px;
}

.markup-rule-group{
  padding:0;
  overflow:hidden;
  border-top:3px solid var(--brand-2);
}

.markup-rule-group.reseller-rules{border-top-color:var(--accent)}

.markup-rule-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}

.markup-rule-group-head h3{margin-bottom:5px}
.markup-rule-group-head p:last-child{margin-bottom:0}
.markup-rule-group-head button{flex-shrink:0}
.markup-rule-group .markup-layer-table-wrap{padding:0;border-radius:0;box-shadow:none}

.provider-category-options{
  margin-bottom:18px;
}

.provider-credentials{
  margin-top:14px;
}

.provider-credential-add{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:14px;
  max-width:520px;
}

.provider-assignment-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin:26px 0 12px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.provider-assignment-head h3{margin-bottom:4px}

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

.provider-assignment{
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(260px,1.4fr) 150px;
  gap:16px;
  align-items:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.7);
}

.provider-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.provider-toggle input,
.category-check input{
  width:auto;
  min-height:auto;
}

.provider-meta{
  display:block;
  margin:5px 0 0 26px;
  color:var(--muted);
  font-size:12px;
}

.provider-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 0 26px;
}

.category-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.category-check{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:7px 9px;
  border-radius:10px;
  background:var(--panel-2);
  font-size:12px;
}

.provider-assignment.disabled .category-options,
.provider-assignment.disabled .provider-assignment-status{
  opacity:.45;
  pointer-events:none;
}

.form-actions{
  display:flex;
  justify-content:flex-end;
}

.criteria-rows{
  display:grid;
  gap:10px;
  margin-bottom:12px;
}

.reseller-table-wrap,
.provider-table-wrap,
.backend-table-wrap,
.enum-table-wrap{padding:0}

.enum-controls{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:16px;
  align-items:end;
  margin-bottom:16px;
}

.enum-empty{
  min-height:48px;
  align-content:center;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-2);
}

.credential-fields{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:46px;
  align-items:center;
}

.table-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
}

.table-action{
  min-height:auto;
  padding:8px 10px;
  border-radius:10px;
  background:var(--panel-3);
  color:var(--brand);
  box-shadow:none;
}

.table-action:hover{box-shadow:none}

.refresh-btn{
  display:flex;
  align-items:center;
  gap:6px;
  align-self:center;
}

.refresh-btn:disabled{opacity:.6;pointer-events:none}

.refresh-btn .refresh-icon{display:inline-block}

.refresh-btn.is-loading .refresh-icon{animation:refresh-spin .6s linear infinite}

@keyframes refresh-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.heading{
  margin:0 2px 14px;
}

.heading span{
  padding:8px 12px;
  border-radius:999px;
  background:var(--accent-soft);
  color:#6f531d;
  font-size:12px;
  font-weight:800;
}

#drafts{
  display:grid;
  gap:14px;
}

.draft,
.routing-draft{
  padding:18px;
  display:grid;
  grid-template-columns:1.05fr 1.1fr 1.55fr 1.55fr auto;
  gap:14px;
  align-items:end;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,245,238,.82));
  box-shadow:var(--shadow-soft);
}

.routing-draft{
  grid-template-columns:1fr;
  align-items:stretch;
  padding:0;
  overflow:hidden;
}

.draft label,
.routing-draft label{margin:0}

/* Rule form sections - a colored top edge per section, so the eye separates "what this rule
   targets" from "conditions that narrow it" from "what happens" without needing a heavier
   redesign. */
.rule-section{
  padding:18px;
  border-top:3px solid var(--line-strong);
}
.rule-section + .rule-section{border-top:3px solid var(--line-strong)}
.rule-section.basics{border-top-color:var(--brand-2)}
.rule-section.criteria{border-top-color:var(--danger)}
.rule-section.effect{border-top-color:var(--accent)}

/* Multi-select: a click-to-open panel over a searchable option list, selections shown as
   removable tags in the closed control. Replaces a wall of checkboxes for anything that can
   have many options (providers, resellers, countries, cities). */
.ms{position:relative}
.ms-control{
  width:100%;
  min-height:48px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffdf8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  text-align:left;
  box-shadow:none;
}
.ms-control:hover{box-shadow:none;transform:none}
.ms-control.open{border-color:var(--brand-2)}
.ms-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1;
}
.ms-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--brand-3);
  color:var(--brand);
  font-size:12px;
  font-weight:800;
}
.ms-tag button{
  min-height:auto;
  width:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--brand);
  box-shadow:none;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.ms-placeholder{color:#9b9384;font-size:14px;font-weight:600}
.ms-arrow{color:var(--muted);font-size:11px}
.ms-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:60;
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid rgba(199,189,168,.55);
  border-radius:18px;
  background:rgba(255,251,244,.98);
  box-shadow:0 18px 35px rgba(30,24,15,.10);
  max-height:280px;
  overflow:auto;
}
.ms-search{min-height:40px}
.ms-options{display:grid;gap:2px}
.ms-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}
.ms-option:hover{background:var(--panel-3)}
.ms-option.selected{background:var(--accent-soft)}
.ms-option input{width:auto;min-height:auto}
.ms-option.hidden{display:none}
.ms-empty{padding:10px;color:var(--muted);font-size:13px}

.criteria-list{display:grid;gap:10px;margin-top:10px}
/* One always-visible line per criterion type (Departure/Arrival/Booking date/Travel date) -
   config fields shown until that type is added, then it collapses to a .criteria-row summary. */
.criteria-line{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:end;
  padding:14px;
  border-radius:14px;
  background:var(--panel-2);
  border:1px solid var(--line);
}

.criteria-full{grid-column:1 / -1}

/* One {from,to} range within a multi-range criterion (OrderCreationDate, FareRange, ...) - spans 2 of
   .criteria-line's 4 columns so the pair plus its remove button sit together as one unit instead
   of scattering across the row. */
.range-group{
  grid-column:span 2;
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.range-group label{flex:1;min-width:0}
.range-group .chip-remove{flex:0 0 auto;margin-bottom:12px}

/* CabinClass/Refundability/Stops/Geography/TripType/Baggage stay plain multi-checkboxes
   (unlike every other criterion field, there's no "pick from a catalog" story here - the values
   are a small fixed enum) but are restyled as toggle-pills so they read as the same kind of
   multi-value control as the tag/multiselect fields around them, not a different widget type. */
.criteria-line .category-check{
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fffdf8;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.criteria-line .category-check:has(input:checked){
  background:var(--brand-3);
  border-color:var(--brand-2);
  color:var(--brand);
  font-weight:700;
}

/* Type-a-value-press-Enter multi input for criteria with no catalog to pick from (Booking class
   codes, Fare family/Hotel ids) - same removable-tag look as the catalog-backed multiselects. */
.tag-input-box{
  width:100%;
  min-height:48px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffdf8;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.tag-input-box:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(31,90,75,.10)}
.tag-input-box .tag-input-field{
  flex:1;
  width:auto;
  min-width:90px;
  min-height:28px;
  padding:4px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.tag-input-box .tag-input-field:focus{outline:none;box-shadow:none;border:0}

@media (max-width:1180px){
  .criteria-line{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .criteria-line{grid-template-columns:1fr;}
}
.criteria-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-radius:14px;
  background:var(--panel-2);
  border:1px solid var(--line);
}
.criteria-row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.criteria-row .criteria-summary{font-size:13px;font-weight:700}
.criteria-row .criteria-kind{
  display:inline-block;
  margin-right:8px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--brand-3);
  color:var(--brand);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.chip-remove{
  min-height:auto;
  width:auto;
  padding:0 2px;
  border:0;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  font-weight:800;
  cursor:pointer;
}
.chip-remove:hover{color:#b5442e;box-shadow:none;transform:none}

.field-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.field-row-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}

.field-row-auto{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,320px));
  gap:14px;
}

@media (max-width:760px){
  .field-row-2,
  .field-row-3{
    grid-template-columns:1fr;
  }
}

.location{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.search-box{display:grid;gap:8px}
.field-note{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
}
.autocomplete-shell{position:relative}
.autocomplete-results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:none;
  max-height:260px;
  overflow:auto;
  padding:8px;
  border:1px solid rgba(199,189,168,.55);
  border-radius:18px;
  background:rgba(255,251,244,.98);
  box-shadow:0 18px 35px rgba(30,24,15,.10);
  z-index:50;
}
.autocomplete-results.open{display:grid;gap:6px}
.autocomplete-item{
  width:100%;
  min-height:auto;
  padding:12px 14px;
  border-radius:14px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  display:grid;
  gap:4px;
  box-shadow:none;
}
.autocomplete-item:hover{
  transform:none;
  box-shadow:none;
  background:#f2eadc;
  filter:none;
}
.autocomplete-title{
  font:800 13px/1.3 "Manrope",system-ui,sans-serif;
  color:#1f2019;
}
.autocomplete-subtitle{
  font-size:12px;
  color:var(--muted);
}
.autocomplete-item.empty-result{
  cursor:default;
  pointer-events:none;
}

.check{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.check input{
  width:auto;
  min-height:auto;
}

.empty,.table-wrap,.placeholder{padding:24px}

.empty{
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line-strong);
  background:rgba(255,251,245,.68);
  box-shadow:none;
}

.existing{margin-top:40px}

.table-wrap{
  overflow:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,243,235,.82));
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  text-align:left;
  padding:15px 17px;
  border-bottom:1px solid rgba(199,189,168,.45);
  vertical-align:middle;
}

th{
  color:#736c5d;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
}

tbody tr:hover{
  background:rgba(250,244,231,.65);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:var(--brand-3);
  color:var(--brand);
  font-size:12px;
  font-weight:800;
}

.pill.notice{
  background:var(--accent-soft);
  color:var(--accent);
}

.pill.off{
  background:var(--danger-soft);
  color:var(--danger);
}

#toast{
  position:fixed;
  right:24px;
  bottom:24px;
  max-width:320px;
  background:#1a221d;
  color:#fff;
  border-radius:16px;
  padding:14px 16px;
  opacity:0;
  transform:translateY(8px);
  transition:.22s;
  box-shadow:0 18px 35px rgba(0,0,0,.16);
}

#toast.show{
  opacity:1;
  transform:none;
}

@media (max-width:1180px){
  .login-stage,
  .hero{
    grid-template-columns:1fr;
  }

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

  .topnav{
    flex-wrap:wrap;
    row-gap:10px;
  }

  .topnav-groups{
    order:3;
    flex-basis:100%;
  }

  .stats-grid,
  .module-grid,
  .reseller-fields,
  .backend-fields,
  .enum-controls,
  .provider-fields,
  .provider-search-limit-fields,
  .provider-assignment{
    grid-template-columns:1fr;
  }

  .provider-url{grid-column:auto}

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

/* Providers table -> cards below ~15.6" laptop viewport widths. Independent
   of the 1180px sidebar breakpoint - this triggers earlier. Same <table>
   markup, reflowed with CSS: each <tr> becomes a card, each <td> becomes a
   labeled row via its data-label attribute (set in renderProviderTable). */
@media (max-width:1366px){
  .provider-table-wrap table,
  .provider-table-wrap thead,
  .provider-table-wrap tbody,
  .provider-table-wrap tr,
  .provider-table-wrap td{
    display:block;
    width:100%;
  }

  .provider-table-wrap thead{display:none}

  .provider-table-wrap tr{
    margin-bottom:16px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
  }

  .provider-table-wrap tr:last-child{margin-bottom:0}

  .provider-table-wrap td{
    padding:10px 0;
    border-bottom:1px solid rgba(199,189,168,.35);
  }

  .provider-table-wrap td:first-child{padding-top:0}
  .provider-table-wrap td:last-child{border-bottom:none;padding-bottom:0}

  .provider-table-wrap td[data-label]:not([data-label=""])::before{
    content:attr(data-label);
    display:block;
    margin-bottom:6px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .provider-table-wrap .table-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

@media (max-width:760px){
  .login-shell{padding:18px}

  .markup-rule-group-head,
  .markup-layer-context{
    align-items:stretch;
    flex-direction:column;
  }

  .markup-rule-group-head button{width:100%}

  .login-promo,
  .login-card,
  .topbar,
  .hero,
  .stat,
  .module,
  .draft,
  .placeholder,
  .table-wrap{
    padding:20px;
  }

  .topbar,
  .section-head,
  .heading{
    flex-direction:column;
    align-items:stretch;
  }

  .compact{min-width:0}

  .actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

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

  .module{
    flex-direction:column;
    align-items:start;
  }

  h1{font-size:38px}
  h2{font-size:26px}
}

/* ── Docs Panel ── */

.docs-toggle{
  width:100%;
  margin-top:8px;
  padding:10px;
  color:var(--muted);
  font-size:12px;
  text-align:left;
  transition:color .18s ease;
}

.docs-toggle:hover{
  color:var(--brand-2);
  background:rgba(31,90,75,.04);
}

.docs-toggle.open{
  color:var(--brand-2);
}

.docs-panel{
  padding:32px;
  max-height:calc(100vh - 64px);
  overflow-y:auto;
  align-self:start;
}

.admin-docs{
  margin-top:18px;
  max-height:none;
}

.docs-panel h3{
  font-size:22px;
  margin-bottom:4px;
}

.docs-panel h4{
  font-family:"Space Grotesk",sans-serif;
  font-size:16px;
  margin:0 0 10px 0;
  color:var(--brand-2);
}

.docs-section{
  margin-bottom:26px;
}

.docs-section:last-child{
  margin-bottom:0;
}

.docs-section table{
  width:100%;
  margin-top:10px;
  border-collapse:collapse;
}

.docs-section th{
  text-align:left;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  padding:8px 12px;
  border-bottom:1px solid var(--line);
}

.docs-section td{
  padding:8px 12px;
  font-size:13px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

.docs-section td:first-child{
  font-weight:600;
}

.docs-section code{
  font-size:12px;
  background:var(--panel-3);
  padding:2px 6px;
  border-radius:6px;
  word-break:break-all;
}

.docs-section pre{
  margin:10px 0 0 0;
  padding:16px;
  background:var(--panel-3);
  border-radius:14px;
  overflow-x:auto;
}

.docs-section pre code{
  background:none;
  padding:0;
  border-radius:0;
  display:block;
  font-size:13px;
}

.docs-section ul,
.docs-section ol{
  margin:8px 0 0 0;
  padding-left:20px;
  font-size:13px;
  color:var(--ink);
}

.docs-section li{
  margin-bottom:6px;
}

.docs-section .pill{
  font-size:11px;
  padding:2px 10px;
}

@media(max-width:900px){
  .docs-panel{
    padding:22px;
    max-height:none;
  }
}

/* ══ Matching rules ═════════════════════════════════════════════════════════
   Follows the same scale as the rest of the panel: 28px cards, 20px inner
   panels, 16px controls, Space Grotesk headings, translucent gradient
   surfaces. `.card` here carries no padding of its own — every use adds it,
   the way .hero and .topbar do.
   ═════════════════════════════════════════════════════════════════════════ */

.matching-card{
  padding:30px;
  margin-bottom:20px;
}

.matching-card > .heading{
  align-items:flex-start;
  gap:24px;
  margin-bottom:26px;
}

.matching-card > .heading .muted{
  max-width:70ch;
  margin-bottom:0;
  line-height:1.55;
}

.matching-card h3{margin-bottom:6px}

/* Orders list: one card per backend checkout (grouped by backendOrderId), holding every
   supplier-level engine Order row that checkout produced - see groupOrdersByBackendOrder(). */
.order-groups{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.order-group-card{
  border:1px solid rgba(31,90,75,.14);
  border-radius:18px;
  background:rgba(255,255,255,.55);
  padding:16px 18px;
}

.order-group-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(31,90,75,.12);
}

.order-group-backend-id code{
  font-size:13px;
}

.order-group-items{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.order-group-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(250,244,231,.55);
}

.order-group-item-main{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.order-group-item-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
}

/* Numbered steps, so the screen reads as a sequence rather than a wall of
   settings somebody has to already understand. */
/* `.heading span` already claims every span inside a heading as a pill, and its
   specificity beats a lone class, so this has to be qualified to win. */
.heading .step-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  height:44px;
  margin-right:18px;
  padding:0;
  border-radius:16px;
  background:linear-gradient(160deg,#143f35,#205447);
  color:#f7f1e3;
  font:800 17px/1 "Space Grotesk",system-ui,sans-serif;
}

.heading-with-mark{display:flex;align-items:flex-start}

.section-head .actions{align-items:flex-end;gap:14px}
.section-head .actions button{white-space:nowrap}

.inline-select{
  gap:8px;
  margin:0;
}

.inline-select select{min-width:150px}

.banner{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin:0 0 20px;
  padding:18px 22px;
  border:1px solid rgba(185,138,47,.34);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(244,231,199,.9),rgba(250,243,226,.72));
  color:#6d4f14;
  font-size:14px;
  line-height:1.55;
}

.banner::before{
  content:"!";
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font:800 13px/1 "Manrope",system-ui,sans-serif;
}

/* ── The three outcome bands ────────────────────────────────────────────────
   Drawn to scale. Seeing 80–95 as a narrow amber sliver beside a wide grey one
   says more about what a threshold does than the number does. */

.band-preview{
  display:flex;
  margin-bottom:28px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.band{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:22px 24px;
  min-width:0;
  transition:flex-grow .24s cubic-bezier(.4,0,.2,1);
}

.band strong{
  font:800 14px/1.25 "Manrope",system-ui,sans-serif;
  letter-spacing:-.01em;
}

.band span{
  font-size:12px;
  font-weight:700;
  opacity:.7;
  font-variant-numeric:tabular-nums;
}

.band-no{background:linear-gradient(160deg,#efeade,#e7e1d2);color:#5d5748}
.band-review{background:linear-gradient(160deg,#f6e8c6,#f0dcae);color:#6d4f14}
.band-auto{background:linear-gradient(160deg,#143f35,#205447);color:#eef3ec}
.band-auto span{opacity:.82}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.field-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px 30px;
}

/* Each label is itself a grid and stretches to the tallest in its row, so
   without this the spare height is shared between its rows and two inputs
   whose hints differ in length stop lining up. */
.field-grid > label{align-content:start}

/* `label` is a grid with an 8px gap, so the hint becomes its own row and needs
   no margin of its own. */
.field-grid small,
.named-share small{
  font-size:12px;
  font-weight:600;
  line-height:1.55;
  color:var(--muted);
  max-width:46ch;
}

.suffix-input{
  display:flex;
  align-items:center;
  gap:10px;
}

.suffix-input input{
  flex:0 1 148px;
  min-width:0;
  font-variant-numeric:tabular-nums;
}

.suffix-input span{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}

/* ── Shadow mode ────────────────────────────────────────────────────────── */

.shadow-toggle{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:28px 0 0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(220,232,223,.7),rgba(240,245,238,.5));
  cursor:pointer;
}

.shadow-toggle input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  min-height:0;
  margin-top:2px;
  accent-color:var(--brand-2);
}

.shadow-toggle strong{
  display:block;
  font-size:14px;
  color:var(--ink);
  margin-bottom:6px;
}

.shadow-toggle small{
  display:block;
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  color:var(--muted);
  max-width:74ch;
}

.standalone-check{
  align-self:end;
  gap:10px;
  margin:0 0 14px;
  font-size:13px;
}

.standalone-check input{
  width:18px;
  height:18px;
  min-height:0;
  accent-color:var(--brand-2);
}

/* ── Weights ────────────────────────────────────────────────────────────── */

.weight-total{
  flex:0 0 auto;
  padding:11px 20px;
  border-radius:999px;
  background:linear-gradient(160deg,#143f35,#205447);
  color:#eef3ec;
  font:800 15px/1 "Space Grotesk",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:background .2s ease;
}

.weight-total.invalid{
  background:linear-gradient(160deg,#9f3d31,#b84a3c);
  color:#fff;
}

.weight-rows{
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(249,245,237,.7));
}

.weight-row{
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(140px,1.4fr) auto;
  align-items:center;
  gap:26px;
  padding:16px 22px;
  border-bottom:1px solid rgba(199,189,168,.4);
  transition:background .16s ease;
}

.weight-row:last-child{border-bottom:none}
.weight-row:hover{background:rgba(250,244,231,.6)}

.weight-label strong{
  display:block;
  font:800 14px/1.25 "Manrope",system-ui,sans-serif;
  margin-bottom:4px;
}

.weight-label small{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
}

/* The two track styles differ enough between engines that they have to be
   written out separately; both follow the panel's line and brand colours. */
.weight-row input[type=range],
.share-slider input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-height:0;
  height:6px;
  padding:0;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2) var(--fill,0%),var(--line) var(--fill,0%));
  cursor:pointer;
}

.weight-row input[type=range]::-webkit-slider-thumb,
.share-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fffdf8;
  border:2px solid var(--brand-2);
  box-shadow:0 2px 6px rgba(33,27,17,.18);
  cursor:pointer;
  transition:transform .14s ease;
}

.weight-row input[type=range]::-webkit-slider-thumb:hover,
.share-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}

.weight-row input[type=range]::-moz-range-thumb,
.share-slider input[type=range]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fffdf8;
  border:2px solid var(--brand-2);
  box-shadow:0 2px 6px rgba(33,27,17,.18);
  cursor:pointer;
}

.weight-value{
  display:flex;
  align-items:center;
  gap:7px;
}

.weight-value input{
  width:78px;
  min-height:42px;
  padding:9px 11px;
  text-align:right;
  border-radius:14px;
  font-variant-numeric:tabular-nums;
}

.weight-value span{font-size:12px;font-weight:800;color:var(--muted)}

.weight-actions{
  justify-content:flex-start;
  margin-top:18px;
}

.named-share small{max-width:none}

.named-share{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--line);
}

.share-slider{
  display:flex;
  align-items:center;
  gap:18px;
  margin:6px 0 4px;
}

.share-slider input[type=range]{flex:1}

.share-slider .muted{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  white-space:nowrap;
}

#nameShareValue{font-weight:800;color:var(--brand-2)}

.save-row{
  justify-content:flex-start;
  align-items:center;
  gap:18px;
  margin:0 0 30px;
  padding:0 4px;
}

.save-row .muted{font-size:12px;font-weight:600}

/* ── Try it ─────────────────────────────────────────────────────────────── */

.provider-static-data{
  margin:28px 0 34px;
  padding:30px;
  overflow:hidden;
}

.provider-static-data-heading{
  margin-bottom:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

.provider-static-data-heading .muted{
  margin:7px 0 0;
}

.provider-static-data-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 26px;
}

.provider-static-data-summary > div{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:92px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,#fffdf8,#f4ecdc);
}

.provider-static-data-summary span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.provider-static-data-summary strong{
  color:var(--brand);
  font:800 24px/1.1 "Space Grotesk",system-ui,sans-serif;
}

.provider-static-data-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
  min-height:120px;
  transition:opacity .18s ease;
}

.provider-static-data-grid.is-loading{
  opacity:.42;
  pointer-events:none;
}

.provider-catalog-card{
  min-width:0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,253,248,.92);
  box-shadow:0 8px 24px rgba(22,49,42,.06);
}

.provider-catalog-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.provider-catalog-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:34px;
  padding:7px 11px;
  border-radius:12px;
  background:linear-gradient(145deg,#173f35,#255f50);
  color:#fffaf0;
  font:800 12px/1 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:.08em;
}

.provider-catalog-id{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.provider-catalog-card h4{
  margin:0 0 7px;
  overflow-wrap:anywhere;
  color:var(--ink);
  font:800 17px/1.25 "Space Grotesk",system-ui,sans-serif;
}

.provider-catalog-card p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.provider-static-data-empty{
  grid-column:1/-1;
  margin:0;
  padding:34px;
  border:1px dashed var(--line-strong);
  border-radius:18px;
  color:var(--muted);
  text-align:center;
}

.provider-static-data-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:30px 0 0;
  padding:20px 0 0;
  border-top:1px solid var(--line);
}

.provider-static-data-pagination strong{
  min-width:150px;
  color:var(--ink);
  text-align:center;
  font-size:13px;
}

.provider-static-data-pagination button:disabled{
  cursor:not-allowed;
  opacity:.42;
}

.provider-static-data-raw{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.provider-static-data-raw summary{
  cursor:pointer;
  color:var(--brand-2);
  font-size:13px;
  font-weight:800;
}

.provider-static-data-output{
  max-height:620px;
  overflow:auto;
  margin:16px 0 0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#17231f;
  color:#eaf1e8;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

@media(max-width:900px){
  .provider-static-data{padding:22px}
  .provider-static-data-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  .provider-static-data{padding:18px}
  .provider-static-data-summary{grid-template-columns:1fr}
  .provider-static-data-grid{grid-template-columns:1fr}
  .provider-static-data-pagination strong{order:-1;width:100%}
}

.try-card{
  background:linear-gradient(180deg,rgba(255,250,241,.95),rgba(244,238,224,.8));
}

.example-row{
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:10px;
  margin-bottom:24px;
  padding:16px 20px;
  border:1px dashed var(--line-strong);
  border-radius:20px;
  background:rgba(255,251,245,.6);
}

.example-row > .muted{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-right:4px;
}

/* .ghost is designed against the dark login panel and its border is nearly
   invisible on a cream card, so these get their own outline. */
.example-chip{
  min-height:40px;
  padding:10px 16px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:#fffdf8;
  color:var(--brand);
  font:800 13px/1 "Manrope",system-ui,sans-serif;
  box-shadow:none;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}

.example-chip:hover{
  background:var(--brand-3);
  border-color:var(--brand-2);
  transform:translateY(-1px);
  box-shadow:none;
}

.try-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;
}

.try-column{
  display:grid;
  gap:16px;
  align-content:start;
  padding:24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,246,238,.76));
}

.try-column .eyebrow{margin-bottom:2px}
.try-column .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.try-context{margin-top:24px}

.try-card > .actions{justify-content:flex-start;margin-top:26px}

/* ── The verdict ────────────────────────────────────────────────────────── */

.preview-result{
  margin-top:30px;
  padding-top:30px;
  border-top:1px solid var(--line);
}

.verdict{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  padding:26px 30px;
  border-radius:24px;
  margin-bottom:20px;
  box-shadow:var(--shadow-soft);
}

.verdict-automap{background:linear-gradient(160deg,#143f35,#205447);color:#eef3ec}
.verdict-automap .verdict-text small{color:rgba(238,243,236,.72)}

.verdict-review{
  background:linear-gradient(160deg,#f6e8c6,#f0dcae);
  color:#6d4f14;
  border:1px solid rgba(185,138,47,.3);
}

.verdict-none{
  background:linear-gradient(160deg,#efeade,#e6e0d1);
  color:#5d5748;
  border:1px solid var(--line-strong);
}

.verdict-score{
  flex:0 0 auto;
  font:800 40px/1 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}

.verdict-text{min-width:min(100%,260px)}

.verdict-text strong{
  display:block;
  font-size:15px;
  line-height:1.4;
  margin-bottom:5px;
}

.verdict-text small{
  display:block;
  font-size:12px;
  font-weight:600;
  line-height:1.55;
  opacity:.85;
}

.blocking-list{
  list-style:none;
  margin:0 0 20px;
  padding:20px 24px;
  border:1px solid rgba(159,61,49,.3);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(247,228,223,.92),rgba(250,238,234,.7));
}

.blocking-list li{
  position:relative;
  padding-left:26px;
  margin:8px 0;
  color:#7d2f25;
  font-size:13px;
  font-weight:600;
  line-height:1.6;
}

.blocking-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--danger);
}

.contribution-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,243,235,.82));
}

.contribution-wrap table{min-width:640px}
.contribution-wrap tbody tr:last-child td{border-bottom:none}

.contribution-wrap td.numeric,
.contribution-wrap th.numeric{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.contribution-wrap td strong{font-size:14px}

.contribution-wrap .explain{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  max-width:52ch;
}

.contribution-wrap tr.unavailable td{color:#9b9384}
.contribution-wrap tr.unavailable td strong{font-weight:700}

.preview-note{
  margin:14px 2px 0;
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  color:var(--muted);
  max-width:80ch;
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width:1100px){
  .weight-row{grid-template-columns:minmax(160px,1fr) minmax(120px,1fr) auto;gap:18px}
}

@media (max-width:820px){
  .matching-card{padding:22px}

  .matching-card > .heading{flex-direction:column;gap:16px}

  .band-preview{flex-direction:column}
  .band{padding:16px 20px}

  .weight-row{grid-template-columns:1fr;gap:12px;padding:18px 20px}
  .weight-value{justify-content:flex-end}

  .heading .step-mark{width:38px;height:38px;margin-right:14px;font-size:15px}

  .verdict{padding:22px;gap:16px}
  .verdict-score{font-size:34px}
}

/* ══ Catalogue sync ═════════════════════════════════════════════════════════
   Same scale as the matching screen: 28px cards with their own padding, 20px
   inner panels, 16px controls.
   ═════════════════════════════════════════════════════════════════════════ */

.schedule-rows{
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(249,245,237,.7));
}

.schedule-rows > .muted{margin:0;padding:20px 22px;font-size:13px}

.schedule-row{
  display:grid;
  grid-template-columns:minmax(200px,1.4fr) auto auto auto auto;
  align-items:center;
  gap:20px;
  padding:16px 22px;
  border-bottom:1px solid rgba(199,189,168,.4);
}

.schedule-row:last-child{border-bottom:none}
.schedule-row:hover{background:rgba(250,244,231,.6)}

.schedule-label strong{
  display:block;
  font:800 14px/1.25 "Manrope",system-ui,sans-serif;
  margin-bottom:4px;
}

.schedule-label small{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  max-width:46ch;
}

.schedule-enabled{margin:0;gap:8px;font-size:12px;white-space:nowrap}
.schedule-enabled input{width:18px;height:18px;min-height:0;accent-color:var(--brand-2)}

.schedule-field{display:flex;align-items:center;gap:8px;white-space:nowrap}
.schedule-field .muted{font-size:12px;font-weight:800}

.schedule-field input{
  width:82px;
  min-height:42px;
  padding:9px 11px;
  text-align:right;
  border-radius:14px;
  font-variant-numeric:tabular-nums;
}

.schedule-actions{display:flex;gap:8px}
.schedule-actions button{min-height:40px;padding:10px 16px;font-size:13px}

/* Adding an override is a different shape from editing one — it needs the
   provider and catalogue chosen first, so it sits below rather than inline. */
.override-add{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  align-items:end;
  gap:18px;
  margin-top:22px;
  padding:20px 22px;
  border:1px dashed var(--line-strong);
  border-radius:22px;
  background:rgba(255,251,245,.6);
}

.override-add button{white-space:nowrap}

.sync-status-wrap{border:1px solid var(--line);border-radius:22px;padding:0}
.sync-status-wrap table{min-width:820px}
.sync-status-wrap td.numeric{text-align:right}
.sync-status-wrap .compact-btn{min-height:36px;padding:8px 14px;font-size:12px}

/* The error sits under its own row rather than in a column, because a provider
   error is a paragraph and would otherwise squeeze every other column. */
.sync-error-row td{
  padding-top:0;
  border-bottom:1px solid rgba(199,189,168,.45);
  color:var(--danger);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
}

.sync-error-row:hover{background:transparent}

@media (max-width:1100px){
  .schedule-row{grid-template-columns:1fr;gap:12px}
  .schedule-actions{justify-content:flex-start}
}

/* ══ Hotel list ═════════════════════════════════════════════════════════════
   A request builder plus a response reader. The response half deliberately
   foregrounds the fields provider matching scores on, because a blank one is
   the reason a hotel will not match later.
   ═════════════════════════════════════════════════════════════════════════ */

.hotel-list-summary{margin-bottom:20px}
.hotel-list-summary .verdict{margin-bottom:0}

.hotel-list-items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}

.hotel-list-items > .muted{margin:0;font-size:13px}

.hotel-list-item{
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,246,238,.76));
}

.hotel-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.hotel-list-head strong{
  display:block;
  font:800 14px/1.3 "Manrope",system-ui,sans-serif;
  margin-bottom:3px;
}

.hotel-list-head small{display:block;font-size:12px;font-weight:600}
.hotel-list-head .pill{white-space:nowrap;font-size:11px}

.hotel-list-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px 16px;
  margin:0;
}

.hotel-list-fields dt{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin-bottom:2px;
}

.hotel-list-fields dd{
  margin:0;
  font-size:13px;
  font-weight:600;
  word-break:break-word;
}

/* A missing signal is the point of this view, so it is greyed rather than hidden. */
.hotel-list-fields .blank dd{color:#b3aa99}

.hotel-list-raw{margin-top:20px}

@media (max-width:820px){
  .filter-row{grid-template-columns:1fr;align-items:stretch}
}

/* ── Signal coverage ────────────────────────────────────────────────────────
   The point of reading a catalogue before trusting matching on it: a supplier
   that sends no postcodes cannot be matched on them, whatever the weights say.
   ───────────────────────────────────────────────────────────────────────── */

.coverage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px 22px;
  margin-bottom:24px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(249,245,237,.7));
}

.coverage-cell{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}

.coverage-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.coverage-value{
  font-size:12px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--brand);
}

.coverage-bar{
  grid-column:1 / -1;
  height:6px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}

.coverage-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
}

/* A signal nothing carries is the finding, so it is coloured rather than blank. */
.coverage-cell.empty .coverage-value{color:var(--danger)}
.coverage-cell.empty .coverage-bar{background:var(--danger-soft)}

.coverage-note{
  grid-column:1 / -1;
  margin:6px 0 0;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  color:var(--muted);
}

/* Pause, Stop and Sync now sit together; Stop is danger-coloured because it is the one
   that cannot be undone. */
/* Three buttons on one line. Wrapping put Stop on its own row under Pause, which read as a
   separate action rather than one of a set. The table scrolls sideways instead. */
.sync-controls{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap}
.sync-controls .pill{align-self:center}
.sync-controls .compact-btn{padding:7px 11px;font-size:11px;min-height:32px}

/* Room for the widest combination: Sync now + Pause + Stop. */
.sync-status-wrap table{min-width:960px}

/* ── Provider mapping ─────────────────────────────────────────────────────── */

.mapping-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  margin-bottom:8px;
}
.mapping-filters label{flex:1 1 160px;min-width:140px}

.mapping-hint{margin:0 0 12px;font-size:12px;line-height:1.6}

/* Narrow enough that the checkbox column never steals room from the names, which are the
   only thing on the row a reviewer actually reads. */
.select-cell{width:34px;text-align:center}
.numeric{text-align:right;white-space:nowrap}

.mapping-queue-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:10px;
}

.mapping-bulk{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.mapping-bulk input{flex:1 1 220px;min-width:180px}

/* Side by side, because the decision is a comparison. Stacked, a reviewer has to hold one
   column in their head while reading the other, which is how wrong links get approved. */
.mapping-compare{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-bottom:20px;
}

.mapping-warnings{
  display:grid;
  gap:12px;
  margin:0 0 24px;
}

.mapping-warning{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 20px;
  border:2px solid #c77a12;
  border-radius:16px;
  background:linear-gradient(135deg,#fff0c7,#fff8e7);
  color:#6e3c00;
  box-shadow:0 10px 24px rgba(151,87,0,.12);
}

.mapping-warning strong{
  flex:0 0 auto;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mapping-warning span{
  line-height:1.55;
}

.mapping-country-assignment{
  display:grid;
  grid-template-columns:minmax(180px,260px) minmax(280px,1fr);
  align-items:center;
  gap:10px 18px;
  margin:0 0 24px;
  padding:18px 20px;
  border:1px solid rgba(185,138,47,.35);
  border-radius:16px;
  background:rgba(255,249,229,.72);
}

.mapping-country-assignment label{
  color:#6d4f14;
  font-weight:800;
}

.mapping-country-assignment select{width:100%}
.mapping-country-assignment p{grid-column:1 / -1;margin:0}

@media (max-width:700px){
  .mapping-country-assignment{grid-template-columns:1fr}
  .mapping-country-assignment p{grid-column:auto}
}

.mapping-fields{margin:0;display:grid;gap:6px}
.mapping-fields > div{
  display:grid;
  grid-template-columns:minmax(120px,40%) 1fr;
  gap:10px;
  padding:5px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.mapping-fields dt{margin:0;color:var(--muted);font-weight:600}
.mapping-fields dd{margin:0;word-break:break-word}

.mapping-evidence{
  max-height:280px;
  overflow:auto;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:12px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

.mapping-decide{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:16px;
}
.mapping-decide input{flex:1 1 240px;min-width:200px}

/* The row already linked, so a reviewer can see at a glance which one they are changing
   away from rather than working it out from the "(linked now)" label alone. */
tr.is-current{background:rgba(56,139,253,0.08)}

.coverage-bar{
  display:block;
  width:100%;
  min-width:80px;
  height:6px;
  border-radius:3px;
  background:var(--line);
  overflow:hidden;
}
.coverage-bar span{display:block;height:100%;background:var(--accent,#2f81f7)}

.provider-credential-add button{
  white-space:nowrap;
  flex-shrink:0;
}

/* Logs pages */
.log-json{
  max-height:560px;
  overflow:auto;
  margin:0;
  padding:14px;
  border-radius:12px;
  background:var(--panel-2);
  font-size:12px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}
.log-detail{margin-top:18px}
.log-url{max-width:420px;word-break:break-all}
.log-row{cursor:pointer}
.log-row-detail td{background:var(--panel-2)}