/* =========================================================

   UNIVERSAL style.css (LIGHT ONLY, WORKING UI)

   Readable • Calm • No tiny fonts • No dark buttons

   ========================================================= */



:root{

  --bg:#ffffff;

  --panel:#f6f7f9;

  --panel2:#ffffff;

  --border:#d0d7de;



  --text:#0f172a;

  --muted:#5b6672;



  --accent:#2563eb;

  --accent2:#1d4ed8;



  --ok:#16a34a;

  --warn:#b45309;

  --danger:#dc2626;



  --radius:10px;

  --shadow:0 6px 18px rgba(16,24,40,.10);

  --shadow2:0 2px 10px rgba(16,24,40,.08);



  --fs-base:16px;

  --fs-sm:14px;

  --fs-xs:13px;



  color-scheme: light;

}



/* ---------- BASE ---------- */

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{

  margin:0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  font-size:var(--fs-base);

  color:var(--text);

  background:var(--bg);

}



/* Links */

a{ color:var(--accent); text-decoration:none; }

a:hover{ text-decoration:underline; }



/* Layout */

.wrap{ max-width:1200px; margin:0 auto; padding:20px; }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.stack{ display:flex; flex-direction:column; gap:12px; }

.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.divider{ height:1px; background:var(--border); margin:12px 0; }



.layout3{

  display:grid;

  grid-template-columns:260px 1fr 260px;

  gap:16px;

}

@media (max-width:1000px){

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

}



/* Panels */

.panel{

  background:var(--panel2);

  border:1px solid var(--border);

  border-radius:var(--radius);

  box-shadow:var(--shadow2);

  overflow:hidden;

}

.panelHd{

  padding:12px 14px;

  border-bottom:1px solid var(--border);

  background:var(--panel);

  font-size:16px;

  font-weight:700;

}

.panelBd{ padding:14px; }



/* Text helpers */

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

.small{ font-size:var(--fs-sm); color:var(--muted); }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }



/* Captions (READABLE, NOT BOLD) */

caption, .caption, figcaption{

  font-size:15px;

  font-weight:500;

  line-height:1.55;

  color:var(--muted);

  text-align:left;

  padding:8px 0 10px;

}

caption{ caption-side:top; }



/* ---------- BUTTONS (LIGHT) ---------- */

.btn, button{

  appearance:none;

  border:1px solid var(--border);

  background:#ffffff;                 /* <- LIGHT */

  color:var(--text);

  border-radius:var(--radius);

  padding:9px 12px;

  font-size:14px;

  font-weight:600;

  cursor:pointer;

  box-shadow:0 1px 0 rgba(16,24,40,.04);

}

.btn:hover, button:hover{ background:#f3f4f6; }

.btn:active, button:active{ transform:translateY(1px); }

.btn:disabled, button:disabled{ opacity:.55; cursor:not-allowed; transform:none; }



.btn.primary{

  background:var(--accent);

  border-color:var(--accent);

  color:#fff;

}

.btn.primary:hover{ background:var(--accent2); border-color:var(--accent2); }



.btn.danger{

  background:var(--danger);

  border-color:var(--danger);

  color:#fff;

}

.btn.danger:hover{ filter:brightness(.95); }



.btn.ok{

  background:var(--ok);

  border-color:var(--ok);

  color:#fff;

}



.btn.ghost{

  background:transparent;

}

.btn.ghost:hover{ background:#f3f4f6; }



.btn.sm{ padding:7px 10px; font-size:13px; border-radius:9px; }

.btn.icon{ padding:7px 10px; }



.btn.block{ width:100%; justify-content:space-between; display:flex; align-items:center; }



/* ---------- INPUTS ---------- */

.input, .select, textarea, input[type="text"], input[type="number"], input[type="file"], select{

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:9px 10px;

  background:#ffffff;

  color:var(--text);

  font-size:15px;

}

.select{ min-width:220px; }

.input:focus, .select:focus, textarea:focus, input:focus, select:focus{

  outline:none;

  border-color:rgba(37,99,235,.55);

  box-shadow:0 0 0 3px rgba(37,99,235,.12);

}

input[type="file"]{ padding:7px 10px; }



/* Alerts */

.alert{

  border:1px solid var(--border);

  border-radius:var(--radius);

  background:var(--panel);

  padding:10px 12px;

  box-shadow:var(--shadow2);

  font-size:14px;

}

.alert.ok{ border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.08); }

.alert.err{ border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.08); }

.alert.warn{ border-color:rgba(180,83,9,.35); background:rgba(180,83,9,.08); }



/* Badges */

.badge{

  display:inline-flex;

  align-items:center;

  padding:2px 7px;

  border-radius:999px;

  border:1px solid var(--border);

  background:#fff;

  font-size:12px;

  color:var(--muted);

}



/* Bool pill */

.bool{

  display:inline-flex;

  align-items:center;

  padding:2px 8px;

  border-radius:999px;

  border:1px solid var(--border);

  font-size:12px;

  color:var(--text);

  background:#fff;

}

.bool.on{ border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.10); }

.bool.off{ border-color:rgba(220,38,38,.30); background:rgba(220,38,38,.10); }



/* Tables */

.tableWrap{

  overflow:auto;

  border:1px solid var(--border);

  border-radius:var(--radius);

  background:#fff;

}

.table{

  width:100%;

  border-collapse:collapse;

  font-size:14px;

}

.table th{

  text-align:left;

  padding:10px;

  background:var(--panel);

  border-bottom:1px solid var(--border);

  font-weight:700;

  white-space:nowrap;

}

.table td{

  padding:10px;

  border-bottom:1px solid #e6ebf1;

  vertical-align:top;

}

.table tr:hover td{ background:#f7f9fc; }

.table.compact th, .table.compact td{ padding:8px; }



/* Pager */

.pager{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }



/* Scrollbars (LIGHT) */

*{ scrollbar-width:thin; scrollbar-color:#c7cdd6 #f1f3f6; }

*::-webkit-scrollbar{ width:10px; height:10px; }

*::-webkit-scrollbar-thumb{ background:#c7cdd6; border-radius:999px; border:2px solid #f1f3f6; }

*::-webkit-scrollbar-track{ background:#f1f3f6; border-radius:999px; }



/* Modals */

.modalOverlay{

  position:fixed;

  inset:0;

  background:rgba(15,23,42,.35);

  display:none;

  align-items:center;

  justify-content:center;

  padding:18px;

  z-index:9999;

}

.modalOverlay.show{ display:flex; }



.modal{

  width:min(980px, 100%);

  max-height:90vh;

  border-radius:var(--radius);

  border:1px solid var(--border);

  background:#fff;

  box-shadow:var(--shadow);

  overflow:hidden;

  display:flex;

  flex-direction:column;

  min-height:0;

}



.modalHd{

  padding:12px 14px;

  background:var(--panel);

  border-bottom:1px solid var(--border);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  flex:0 0 auto;

}



.modalBd{

  padding:14px;

  overflow:auto;

  flex:1 1 auto;

  min-height:0;

}



.modalTitle{ font-weight:700; font-size:15px; }



/* Dual horizontal scrollbar (top bar) */

.dualScroll{ margin-top:10px; }

.dualTop{

  overflow-x:auto; overflow-y:hidden;

  height:14px;

  border-radius:999px;

  border:1px solid var(--border);

  background:var(--panel);

  box-shadow:var(--shadow2);

  display:none;

}

.dualTopInner{ height:1px; }



/* Drag cursor helper */

.dragScrollActive{ cursor:grabbing !important; user-select:none !important; }



/* =========================================================

   FOOTER

   Clean • Light • Scrollable links • No tiny fonts

   ========================================================= */



.footer{

  border-top:1px solid var(--border);

  background:var(--panel);

  padding:14px 0;

  margin-top:20px;

}



.footerInner{

  max-width:1180px;

  margin:0 auto;

  padding:0 16px;

  display:flex;

  gap:14px;

  align-items:center;

  justify-content:space-between;

  flex-wrap:wrap;

  color:var(--muted);

  font-size:14px;

}



/* Brand block */

.footerBrand{

  display:flex;

  gap:10px;

  align-items:center;

  flex-wrap:wrap;

}



.footerBrandName{

  font-weight:700;

  color:var(--text);

}



.footerDot{

  opacity:.5;

}



/* Links container */

.footerLinks{

  display:flex;

  gap:8px;

  align-items:center;

  overflow-x:auto;

  flex-wrap:nowrap;

  padding:2px 0;

  scrollbar-width:thin;

}



.footerLinksTitle{

  font-weight:600;

  color:var(--text);

  white-space:nowrap;

}



/* Footer buttons (small light buttons) */

.footerBtn{

  border:1px solid var(--border);

  background:#ffffff;

  color:var(--text);

  border-radius:8px;

  padding:4px 10px;

  font-size:13px;

  white-space:nowrap;

  cursor:pointer;

  text-decoration:none;

}



.footerBtn:hover{

  background:#f3f4f6;

}



/* Mobile */

@media (max-width:700px){

  .footerInner{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

  }

}

/* =========================================================

   HEADER (LIGHT, readable, working)

   ========================================================= */



.siteHeader{

  position:sticky;

  top:0;

  z-index:50;

  background:#ffffff;

  border-bottom:1px solid var(--border);

  box-shadow:0 2px 10px rgba(16,24,40,.06);

}



.headerInner{

  max-width:1180px;

  margin:0 auto;

  padding:12px 16px;

  display:flex;

  flex-direction:column;

  gap:10px;

}



/* floor rows */

.hRow{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  flex-wrap:wrap;

}



.hNavRow{

  border-top:1px solid var(--border);

  padding-top:10px;

}



/* brand */

.brand{

  display:flex;

  align-items:center;

  gap:12px;

  min-width:240px;

}



.brandTitle{ display:flex; flex-direction:column; gap:4px; }



.brandTitle .t{

  margin:0;

  font-size:16px;

  font-weight:800;

  letter-spacing:.2px;

  line-height:1.15;

}



.brandTitle .s{

  margin:0;

  font-size:14px;

  font-weight:500;

  color:var(--muted);

  line-height:1.35;

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  align-items:center;

}



/* right controls */

.headerControls{

  display:flex;

  gap:10px;

  align-items:center;

  justify-content:flex-end;

  flex-wrap:wrap;

}



/* language select: light and compact */

.langSel{

  width:auto;

  min-width:0;

  border:1px solid var(--border);

  border-radius:999px;

  background:#ffffff;

  color:var(--text);

  padding:8px 36px 8px 12px;

  font-size:14px;

  font-weight:600;

  cursor:pointer;

  appearance:none;

  background-image:

    linear-gradient(45deg, transparent 50%, var(--muted) 50%),

    linear-gradient(135deg, var(--muted) 50%, transparent 50%);

  background-position: right 16px center, right 12px center;

  background-size: 6px 6px, 6px 6px;

  background-repeat:no-repeat;

}

.langSel:focus{

  outline:none;

  border-color:rgba(37,99,235,.55);

  box-shadow:0 0 0 3px rgba(37,99,235,.12);

}



/* TTL pill */

.ttlPill{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:4px 10px;

  border-radius:999px;

  border:1px solid rgba(37,99,235,.25);

  background:rgba(37,99,235,.08);

  color:var(--text);

  font-size:13px;

  font-weight:600;

}



/* nav */

.nav{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  align-items:center;

}



.nav a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 12px;

  border-radius:999px;

  border:1px solid var(--border);

  background:#ffffff;

  color:var(--text);

  font-size:14px;

  font-weight:600;

  text-decoration:none;

}

.nav a:hover{ background:#f3f4f6; }

.nav a.active{

  background:rgba(37,99,235,.10);

  border-color:rgba(37,99,235,.35);

  color:var(--accent2);

}



.navSep{

  width:1px;

  height:22px;

  background:var(--border);

  margin:0 4px;

}



/* toast (light) */

.toast{

  position:fixed;

  left:50%;

  bottom:18px;

  transform:translateX(-50%);

  padding:10px 12px;

  border-radius:var(--radius);

  border:1px solid var(--border);

  background:#ffffff;

  color:var(--text);

  box-shadow:var(--shadow);

  font-size:14px;

  display:none;

  gap:10px;

  align-items:center;

  z-index:999;

  max-width:min(760px, calc(100vw - 26px));

}

.toast.show{ display:flex; }

.toast .tDot{

  width:10px; height:10px; border-radius:50%;

  background:var(--accent);

  box-shadow:0 0 0 4px rgba(37,99,235,.12);

}



/* make sure buttons used in header are light */

.btnLogout{}



/* responsive */

@media (max-width:860px){

  .brand{ min-width:0; }

  .headerControls{ justify-content:flex-start; }

}

/* ===== COMMERCIAL LAYOUT BALANCE ===== */



/* make right QR panel wider than left */

.layout3.qrWide{

  grid-template-columns: 1.1fr 1.1fr 1.8fr;

}



/* left builder spans 2 columns (unchanged) */

.layout3.qrWide > .panel:first-child{

  grid-column: 1 / span 2;

}



/* QR panel becomes visually dominant */

.layout3.qrWide > .panel:last-child{

  grid-column: 3;

}



/* QR block centered & larger */

#qr{

  margin: 0 auto;

}



/* make QR preview column wider */

.qrBox{

  align-items: flex-start;

}



.qrBox > div:first-child{

  min-width: 340px;

}



/* preview textareas use full width */

#kvPreview, #payloadPreview{

  width:100%;

}



/* bigger QR buttons spacing */

#btnGenQR{

  min-width:140px;

}

.badge.ok{

  background: rgba(0,180,0,.12);

  color: #0a7f2e;

  border: 1px solid rgba(0,180,0,.25);

}



.badge.bad{

  background: rgba(220,0,0,.12);

  color: #b02020;

  border: 1px solid rgba(220,0,0,.25);

}

.warnBox {

  border:1px solid #eed49f;

  background: rgba(238,212,159,0.12);

  border-radius:10px;

  padding:10px 12px;

  color:#eed49f;

}