/* Modern banking UI layer. Disable with html[data-ui="kiosk"]. */

.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
  flex:0 0 auto;
}

html:not([data-ui="kiosk"]) .brand{
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  grid-template-areas:"logo title" "logo sub";
  column-gap:12px;
  align-items:center;
}

html:not([data-ui="kiosk"]) .brand-logo{ grid-area:logo; }
html:not([data-ui="kiosk"]) .brand h1,
html:not([data-ui="kiosk"]) .brand h2{ grid-area:title; }
html:not([data-ui="kiosk"]) .brand .brand-title{ grid-area:title; }
html:not([data-ui="kiosk"]) .brand .sub,
html:not([data-ui="kiosk"]) .brand .brand-sub,
html:not([data-ui="kiosk"]) .brand .muted.small{ grid-area:sub; }

html[data-ui="kiosk"] .brand-logo{
  width:40px;
  height:40px;
  margin-bottom:4px;
}

html:not([data-ui="kiosk"]){
  --bg:#f5f8f7;
  --bg2:#edf3f1;
  --card:#ffffff;
  --text:#172033;
  --muted:#667085;
  --line:#d8e0e7;
  --accent:#0f766e;
  --ok:#157f5b;
  --warn:#9a6a00;
  --err:#b42318;
  --shadow:0 10px 24px rgba(23,32,51,.08);
  --radius:8px;
  --bank-surface:#ffffff;
  --bank-soft:#eef6f4;
  --bank-soft-2:#f7faf9;
  --bank-accent:#0f766e;
}

html:not([data-ui="kiosk"])[data-theme="dark"]{
  --bg:#101412;
  --bg2:#161c19;
  --card:#171d1b;
  --text:#eef4f2;
  --muted:#aebbb6;
  --line:rgba(238,244,242,.14);
  --accent:#3fb79c;
  --ok:#58c896;
  --warn:#d6a73d;
  --err:#ff7b72;
  --shadow:0 16px 34px rgba(0,0,0,.24);
  --bank-surface:#171d1b;
  --bank-soft:#1e2925;
  --bank-soft-2:#151b19;
  --bank-accent:#3fb79c;
}

html:not([data-ui="kiosk"]) *{ letter-spacing:0; }

html:not([data-ui="kiosk"]) body{
  min-height:100%;
  background:linear-gradient(180deg, var(--bank-soft) 0, var(--bg) 260px, var(--bg) 100%) fixed;
  color:var(--text);
}

html:not([data-ui="kiosk"]) a{ color:var(--bank-accent); }

html:not([data-ui="kiosk"]) .wrap{
  max-width:1120px;
  margin:0 auto;
  padding:18px 18px 42px;
}

html:not([data-ui="kiosk"]) .topbar{
  align-items:center;
  margin:0 0 18px;
  padding:14px 0 16px;
  border-bottom:1px solid var(--line);
}

html:not([data-ui="kiosk"]) .brand h1{
  font-size:22px;
  font-weight:760;
  color:var(--text);
}

html:not([data-ui="kiosk"]) .brand .sub,
html:not([data-ui="kiosk"]) .muted{ color:var(--muted); }

html:not([data-ui="kiosk"]) .controls,
html:not([data-ui="kiosk"]) .topbar-actions{ gap:8px; }
html:not([data-ui="kiosk"]) .grid{ gap:16px; }

html:not([data-ui="kiosk"]) .card{
  background:var(--bank-surface);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
  padding:18px;
}

html:not([data-ui="kiosk"]) .card h2{
  font-size:15px;
  font-weight:760;
  color:var(--text);
}

html:not([data-ui="kiosk"]) .select,
html:not([data-ui="kiosk"]) .btn,
html:not([data-ui="kiosk"]) .input,
html:not([data-ui="kiosk"]) textarea{
  min-height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bank-soft-2);
  color:var(--text);
  box-shadow:none;
}

html:not([data-ui="kiosk"]) .input:focus,
html:not([data-ui="kiosk"]) .select:focus,
html:not([data-ui="kiosk"]) textarea:focus{
  border-color:var(--bank-accent);
  box-shadow:0 0 0 3px rgba(15,118,110,.16);
}

html:not([data-ui="kiosk"]) .btn{
  font-weight:700;
  background:var(--bank-surface);
  color:var(--text);
}

html:not([data-ui="kiosk"]) .btn:hover{
  border-color:var(--bank-accent);
  background:var(--bank-soft);
  text-decoration:none;
}

html:not([data-ui="kiosk"]) .btn.primary{
  background:var(--bank-accent);
  border-color:var(--bank-accent);
  color:#fff;
}

html:not([data-ui="kiosk"]) .btn.primary:hover{ background:#0d635d; }
html:not([data-ui="kiosk"])[data-theme="dark"] .btn.primary:hover{ background:#2f9f87; }
html:not([data-ui="kiosk"]) .btn.ghost{ background:transparent; }

html:not([data-ui="kiosk"]) .pill,
html:not([data-ui="kiosk"]) .tag,
html:not([data-ui="kiosk"]) .badge{
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bank-soft-2);
  color:var(--muted);
}

html:not([data-ui="kiosk"]) .statbox{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bank-soft-2);
}

html:not([data-ui="kiosk"]) .statvalue{
  font-size:28px;
  font-weight:760;
}

html:not([data-ui="kiosk"]) .hr{ background:var(--line); }

html:not([data-ui="kiosk"]) pre,
html:not([data-ui="kiosk"]) .qr{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bank-soft-2);
  color:var(--text);
}

html:not([data-ui="kiosk"]) .kv{
  grid-template-columns:minmax(128px, 180px) 1fr;
  gap:12px 16px;
}

html:not([data-ui="kiosk"]) .modal-backdrop{
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(8px);
}

html:not([data-ui="kiosk"]) .modal{
  border-radius:8px;
  background:var(--bank-surface);
}

html:not([data-ui="kiosk"]) .tableWrap,
html:not([data-ui="kiosk"]) table{ border-radius:8px; }

html:not([data-ui="kiosk"]) th{ background:var(--bank-soft); }
html:not([data-ui="kiosk"]) .ui-mode-btn{ min-width:112px; }

.paylink-qr-panel{
  display:grid;
  gap:10px;
}

.paylink-qr-box{
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:14px;
}

.paylink-qr-img{
  display:block;
  width:min(260px, 100%);
  height:auto;
  aspect-ratio:1;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.paylink-qr-actions{
  justify-content:flex-start;
}

.paylink-qr-fullscreen{
  position:fixed;
  inset:0;
  z-index:20000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.86);
}

.paylink-qr-fullscreen-card{
  width:min(760px, 100%);
  max-height:96vh;
  overflow:auto;
  display:grid;
  gap:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  color:var(--text);
  padding:16px;
  box-shadow:var(--shadow);
}

.paylink-qr-fullscreen-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.paylink-qr-fullscreen-head h2{
  margin:0;
  font-size:18px;
}

.paylink-qr-fullscreen-img{
  width:min(72vh, 100%);
  max-width:560px;
  justify-self:center;
  background:#fff;
  border-radius:8px;
  padding:12px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

@media (max-width:720px){
  html:not([data-ui="kiosk"]) .wrap{ padding:14px 12px 32px; }
  html:not([data-ui="kiosk"]) .topbar{ align-items:stretch; }
  html:not([data-ui="kiosk"]) .controls{ justify-content:flex-start; }
  html:not([data-ui="kiosk"]) .btn,
  html:not([data-ui="kiosk"]) .select{ white-space:normal; }
  .paylink-qr-img{ width:min(220px, 100%); }
  .paylink-qr-actions .btn{ flex:1 1 160px; }
}