*{margin:0;padding:0;box-sizing:border-box}

:root{
  --black:#0a0a0a;
  --yellow:#d72048;
  --yellow-dark:#8a142e;
  --gray:#1a1a1a;
  --gray-light:#2a2a2a;
  --text:#ffffff;
  --text-dim:#a0a0a0;
  --radius:8px;
  --mono:'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.container{
  max-width:720px;
  margin:0 auto;
  padding:1.5rem 1rem;
}

/* Header (same layout) */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}

.logo{
  display:flex;
  align-items:center;
  gap:.625rem;
}

.logo-icon{
  width:36px;height:36px;
  background:var(--yellow);
  border-radius:6px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.logo-icon img{
  width:28px;height:28px;
  object-fit:cover;
  border-radius:6px;
  filter:contrast(1.05);
}

.logo-text h1{
  font-size:1.25rem;
  font-weight:600;
  color:var(--text);
}
.logo-text p{
  font-size:.75rem;
  color:var(--text-dim);
  margin-top:-.125rem;
}

.nav{display:flex;gap:.5rem;align-items:center}

.status{
  display:flex;
  align-items:center;
  gap:.375rem;
  padding:.375rem .75rem;
  background:var(--gray);
  border-radius:999px;
  font-size:.75rem;
  color:var(--text-dim);
}
.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-dim);
}
.status-dot.online{
  background:var(--yellow);
  box-shadow:0 0 8px var(--yellow);
}

/* Widgets (same) */
.widgets{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:.75rem;
  margin-bottom:1.5rem;
}

.widget-link{
  display:flex;
  align-items:center;
  gap:.625rem;
  padding:.875rem;
  background:var(--gray);
  border-radius:var(--radius);
  text-decoration:none;
  transition:all .2s;
  border:1px solid transparent;
  color:inherit;
}
.widget-link:hover{
  background:var(--gray-light);
  border-color:var(--yellow);
  transform:translateY(-1px);
}
.widget-icon{
  width:32px;height:32px;
  background:var(--yellow);
  border-radius:4px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.widget-icon svg{
  width:18px;height:18px;
  fill:var(--black);
}

.widget-info h3{
  font-size:.875rem;
  font-weight:500;
  color:var(--text);
}
.widget-info p{
  font-size:.625rem;
  color:var(--text-dim);
  margin-top:-.125rem;
}

/* Main card (reuse upload-card style) */
.upload-card{
  background:var(--gray);
  border-radius:var(--radius);
  padding:1.25rem;
  margin-bottom:1.5rem;
}

/* Card head */
.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.card-title{
  font-size:.95rem;
  font-weight:700;
}
.card-sub{
  font-size:.75rem;
  color:var(--text-dim);
  margin-top:-.1rem;
}
.card-head-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

/* Inline buttons (same vibe as result-btn) */
.btn-inline{
  padding:.5rem .75rem;
  background:var(--gray);
  border:1px solid var(--gray-light);
  border-radius:var(--radius);
  font-size:.75rem;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:all .2s;
}
.btn-inline:hover{
  background:var(--gray-light);
  border-color:var(--yellow);
  transform:translateY(-1px);
}

/* Error box */
.err{
  margin:.5rem 0 1rem;
  padding:.75rem 1rem;
  background:var(--black);
  border-radius:var(--radius);
  border:1px solid rgba(220,38,38,.45);
  color:#ff8aa0;
  font-size:.85rem;
  white-space:pre-wrap;
}

/* --- QR Controls: make inputs bigger & prevent overflow --- */
.qr-controls,
.qr-preview{
  overflow:hidden;               /* penting: cegah elemen keluar card */
}

.qr-controls{
  padding:1.05rem;
}

/* semua elemen grid wajib min-width:0 biar ga maksa melebar */
.qr-layout,
.row2,
.row3,
.field{
  min-width:0;
}

.in{
  width:100%;
  padding:.78rem .85rem;         /* lebih besar */
  background:var(--gray);
  border:1px solid var(--gray-light);
  border-radius:var(--radius);
  font-family:var(--sans);       /* default: sans (lebih enak buat form) */
  font-size:.9rem;               /* lebih besar */
  color:var(--text);
  line-height:1.2;
}

.in:focus{
  outline:none;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(215,32,72,.18);
}

/* khusus input yang memang mau mono (URL/API) */
.mono,
.apiCode,
.apiInline{
  font-family:var(--mono);
  font-size:.8rem;
}

/* Text/URL field boleh tetap mono biar rapih */
#text{
  font-family:var(--mono);
  font-size:.85rem;
}

/* Select height konsisten */
select.in{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
  padding-right:2.2rem;
}

/* Color input jangan bikin layout aneh */
.in-color{
  height:46px;
  padding:.35rem;
}

/* Grid rows: lebih fleksibel */
.row2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.75rem;
  margin-top:.85rem;
}
.row3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:.75rem;
  margin-top:.85rem;
}

.field{ min-width:0; }

/* Preview lebih stabil */
/* Preview container: always square and never crop */
.qrBox{
  border-radius: var(--radius);
  border: 1px solid var(--gray-light);
  background: var(--gray);
  padding: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1 / 1;     /* INI KUNCI */
  max-width: 420px;        /* desktop cap */
  max-height: 420px;       /* desktop cap */
  margin: 0 auto;

  overflow: hidden;        /* aman karena box sudah pas 1:1 */
}

/* Make QR output fit the square box */
.qrBox canvas,
.qrBox svg,
.qrBox img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
}

/* Mobile cap */
@media (max-width: 640px){
  .qrBox{
    max-width: 280px;
    max-height: 280px;
    padding: 10px;
  }
}


/* API box */
.apiBox{
  margin-top:1rem;
  padding:.75rem;
  background:var(--gray);
  border:1px solid var(--gray-light);
  border-radius:var(--radius);
}
.apiTitle{
  font-size:.75rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.35rem;
}
.apiCode, .apiInline{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--text);
  word-break:break-all;
}

/* Footer (same) */
.footer{
  text-align:center;
  padding:1.5rem 0;
  color:var(--text-dim);
  font-size:.75rem;
}
.footer a{
  color:var(--yellow);
  text-decoration:none;
}
.footer a:hover{ text-decoration:underline; }

/* Decor */
.decor-bottom-left{
  position:fixed;
  bottom:0;
  left:0;
  width:220px;
  z-index:999;
  pointer-events:none;
  opacity:.9;
}

/* Hide on mobile */
@media (max-width:768px){
  .decor-bottom-left{display:none;}
}

/* Responsive (same behavior) */
@media (max-width: 640px){
  .container{padding:1rem;}
  .header{flex-direction:column;align-items:flex-start;gap:.75rem;}
  .nav{width:100%;justify-content:space-between;}
  .widgets{grid-template-columns:1fr;}
  .qr-layout{grid-template-columns:1fr;}
  .row3{grid-template-columns:1fr;}
  .row2{grid-template-columns:1fr;}
}