:root{
  --bg:#1F2937;
  --card:#ffffff;
  --border:#374151;

  --text:#ffffff;
  --muted:#777777;

  --accent:#A7F3D0;
  --warn:#FCA5A5;

  --card-text:#1F2937;
}

body{
  margin:20px auto;
  padding:0 20px;
  max-width:1100px;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  background:var(--bg);
  color:var(--text);
}

/* ---------- Layout ---------- */

header{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

h1{
  margin:0 0 6px 0;
}

.grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(320px,1fr));
  gap:14px;
}

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

@media (max-width:900px){

  .grid,
  .grid2{
    grid-template-columns:1fr;
  }

}

/* ---------- Generic ---------- */

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

.small{
  font-size:.9em;
  color:#6b7280;
}

.mono{
  font-family:
    ui-monospace,
    Menlo,
    Monaco,
    Consolas,
    "Courier New",
    monospace;
}

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

/* ---------- Pills ---------- */

.pill{
  display:inline-block;
  padding:3px 10px;

  border-radius:999px;

  background:var(--accent);
  color:var(--card-text);

  font-size:.85em;
  font-weight:600;
}

/* ---------- Cards ---------- */

.card{
  background:var(--card);
  color:var(--card-text);

  border:none;
  border-radius:8px;

  padding:18px;
  margin-top:14px;

  box-shadow:
    0 8px 24px rgba(0,0,0,.15);
}

.card h2{
  margin-top:0;
}

.card p{
  margin:6px 0 10px;
}

.card a {
    color:var(--card-text);
}

/* ---------- Forms ---------- */

label{
  display:block;
  margin:10px 0 4px;
}

input,
select,
textarea{
  margin-top:4px;
  padding:8px 10px;

  border:1px solid #d1d5db;
  border-radius:8px;

  background:#ffffff;
  color:var(--card-text);

  font:inherit;
}

button{
  margin-top:4px;
  padding:8px 12px;

  border:none;
  border-radius:8px;

  background:var(--card-text);
  color:#ffffff;

  font:inherit;
  cursor:pointer;
}

button:hover{
  background:#374151;
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---------- Messages ---------- */

.status{
  font-size:.95em;
  color:var(--accent);
}

.error{
  font-size:.95em;
  color:var(--warn);
}

.ok{
  color:var(--accent);
  font-weight:bold;
}

.bad{
  color:var(--warn);
  font-weight:bold;
}

/* ---------- Info Panels ---------- */

.note {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    color: var(--text);
}

.previewBox,
.resultBox,
.outputBox{
  background:#f9fafb;

  border:1px solid #d1d5db;
  border-radius:10px;

  padding:12px;

  color:var(--card-text);
}

.outputLabel{
  display:inline-block;

  background:var(--accent);
  color:var(--card-text);

  border-radius:999px;

  padding:2px 10px;
  margin-bottom:8px;

  font-size:.85em;
  font-weight:600;
}

/* ---------- QR Page ---------- */

.qrWrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}

.qrCanvasBox{
  background:#ffffff;

  border:1px solid #d1d5db;
  border-radius:12px;

  padding:10px;
}

.qrTextBox{
  background:#f9fafb;

  border:1px dashed #d1d5db;
  border-radius:10px;

  padding:8px 12px;

  color:var(--card-text);

  max-width:100%;
  word-break:break-word;
  white-space:pre-wrap;
}

/* ---------- Lists ---------- */

.list{
  margin:6px 0 0;
  padding-left:18px;
}

ul{
  padding-left:20px;
}

/* ---------- Navigation ---------- */

a.button,
.homeButton{
  display:inline-block;

  text-decoration:none;
  font-weight:600;

  color:var(--card-text);

  border-bottom:2px solid var(--accent);

  padding-bottom:.15rem;
}

a.button:hover,
.homeButton:hover{
  opacity:.85;
}

/* ---------- Footer ---------- */

footer{
  margin-top:2rem;
  padding-top:1rem;

  border-top:
    1px solid rgba(255,255,255,.2);

  color:var(--muted);

  font-size:.95em;
}

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

footer a:hover{
  opacity:.85;
}

/* Mobile and tablet */
@media (max-width: 768px) {

  /* Prevent horizontal overflow */
  body {
    padding: 10px;
    overflow-x: hidden;
  }

  /* Stack panels vertically */
  .container,
  .main-layout,
  .row {
    display: flex;
    flex-direction: column;
  }

  /* Full-width form controls */
  input,
  select,
  textarea,
  button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Reduce heading size */
  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  /* Make tables scrollable */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    width: 100%;
    min-width: 600px;
  }

  /* Better touch targets */
  button {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* CSV action buttons */
  .button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}