:root{
  --bg:#0b1220; --card:#111827; --text:#e5e7eb; --muted:#9aa8c8; --border:#243040;
  --accent:#22c55e; --accent-2:#3b82f6; --danger:#ef4444; --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7fafc; --card:#ffffff; --text:#0b1220; --muted:#4b5563; --border:#e5e7eb; }
}
*{ box-sizing:border-box }
html,body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
}
.container{ width:min(1100px,92vw); margin:0 auto; }
.header{ padding:18px 0 8px; display:grid; gap:8px; }
.meta{ color:var(--muted); font-size:0.9rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 0 40px; }
@media (max-width:920px){ .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.h2{ margin:0 0 8px; font-size:1.2rem; }
.h3{ margin:16px 0 6px; font-size:1rem; }

.form .row{ display:grid; gap:6px; margin:8px 0; }
.input, .select, .code{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  width:100%;
}
.input:focus, .select:focus, .code:focus{ border-color:var(--accent-2); box-shadow:0 0 0 2px rgba(59,130,246,.4); }

.adv{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  margin:12px 0;
}
.actions, .qr-actions, .sig-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin:12px 0;
}
.btn, .btn-primary{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  transition:all .15s ease;
}
.btn:hover, .btn-primary:hover{ transform:translateY(-1px); }
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),#2563eb);
  border-color:#1d4ed8;
  color:#fff;
  font-weight:700;
}
.preview{ display:grid; gap:10px; }
.qr-box{
  display:grid; place-items:center;
  min-height:280px;
  border:1px dashed var(--border);
  border-radius:14px;
  padding:10px;
  background:var(--card);
}
.code{
  font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  resize:vertical;
  min-height:160px;
}
.sig-preview{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}
.sig-preview img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.muted{ color:var(--muted); }
.foot{ padding:0 0 24px; text-align:center; }

/* Select styling */
#signatureStyle{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
}
#signatureStyle:hover{ border-color:var(--accent-2); }

/* lepše za podpisni HTML predogled */
.sig-preview table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.sig-preview .sig-name{ color:#0078d4; font-weight:800; font-size:14px; }
.sig-preview .sig-title{ font-weight:700; }
.sig-preview .sig-left{ padding-right:16px; vertical-align:middle; }
.sig-preview .sig-right{ vertical-align:middle; }
.sig-preview .sig-note{ color:#2b2b2b; font-size:12px; margin-top:6px; }
.sig-preview .sig-verify{ margin-top:8px; font-size:11px; color:#2b2b2b; }
.sig-preview .sig-verify a{ color:#0078d4; text-decoration:none; }
.sig-preview .sig-hr{ height:8px; display:block; }