:root {
  --color-primary: #50AFA4;
  --color-primary-hover: #3D9B90;
  --color-primary-soft: #7BCFC2;
  --color-light: #E8F6F2;
  --color-bg: #F6FAF9;
  --color-surface: #FFFFFF;
  --color-border: #DCE9E6;
  --color-text: #253638;
  --color-muted: #738487;
  --color-danger: #D65353;
  --color-warning: #D39A22;
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.qr-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.qr-header {
  text-align: center;
  margin-bottom: 32px;
}

.qr-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: var(--color-text);
}

.qr-header p {
  margin: 0;
  color: var(--color-muted);
}

.qr-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.qr-controls {
  flex: 1;
  min-width: 320px;
}

.qr-preview-panel {
  flex: 0 0 380px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

.qr-card {
  background-color: var(--color-surface);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 24px;
}

.qr-input-group {
  margin-bottom: 16px;
}

.qr-input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

.qr-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.qr-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-light);
}

.qr-error-message {
  color: var(--color-danger);
  font-size: 13px;
  margin-top: 6px;
  min-height: 18px;
}

.qr-btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(80, 175, 164, 0.3);
}

.qr-btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.qr-btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.qr-btn-primary:disabled {
  background-color: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.qr-btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.qr-btn-secondary:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-muted);
}

.qr-btn-full {
  width: 100%;
}

.qr-customization {
  margin-top: 24px;
  opacity: 1;
  transition: opacity 0.3s;
}

.qr-customization.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.qr-tabs {
  display: flex;
  flex-direction: row;
  gap: 4px;
  background-color: var(--color-bg);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.qr-tab {
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-muted);
}

.qr-tab:hover {
  color: var(--color-text);
}

.qr-tab.active {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 2px 6px rgba(80, 175, 164, 0.2);
}

.qr-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.qr-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.qr-color-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.qr-color-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.qr-color-group label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}

.qr-color-picker {
  width: 100%;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--color-surface);
}

.qr-color-picker::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.qr-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.qr-toggle-group {
  margin: 16px 0;
}

.qr-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.qr-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.qr-style-grid + label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 16px;
  margin-bottom: 8px;
}

.qr-style-option {
  height: 60px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--color-surface);
}

.qr-style-option:hover {
  border-color: var(--color-primary-soft);
}

.qr-style-option.selected {
  border-color: var(--color-primary);
  border-width: 2px;
  background-color: var(--color-light);
}

/* Pseudo icons for style previews */
.icon-square, .icon-rounded, .icon-extra-rounded, .icon-classy, 
.icon-eye-square, .icon-eye-extra, .icon-eye-dot {
  width: 24px;
  height: 24px;
  background-color: var(--color-text);
}
.icon-square { border-radius: 0; }
.icon-rounded { border-radius: 4px; }
.icon-extra-rounded { border-radius: 12px; }
.icon-classy { border-radius: 12px 0 12px 0; }

.icon-eye-square { border-radius: 0; border: 4px solid var(--color-text); background: transparent; position: relative; }
.icon-eye-square::after { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background: var(--color-text); }
.icon-eye-extra { border-radius: 8px; border: 4px solid var(--color-text); background: transparent; position: relative; }
.icon-eye-extra::after { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background: var(--color-text); border-radius: 4px; }
.icon-eye-dot { border-radius: 8px; border: 4px solid var(--color-text); background: transparent; position: relative; }
.icon-eye-dot::after { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background: var(--color-text); border-radius: 50%; }


.qr-logo-upload {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--color-bg);
}

.qr-logo-upload:hover, .qr-logo-upload.dragover {
  border-color: var(--color-primary);
  background-color: var(--color-light);
}

.qr-logo-upload p {
  margin: 0;
  font-size: 14px;
  color: var(--color-muted);
}

.qr-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.qr-template-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.qr-template-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.qr-template-card h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
}

.qr-template-card p {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.qr-warning {
  padding: 12px;
  border-radius: 8px;
  background-color: rgba(211, 154, 34, 0.1);
  color: var(--color-warning);
  font-size: 13px;
  margin-bottom: 16px;
}

.qr-warning.danger {
  background-color: rgba(214, 83, 83, 0.1);
  color: var(--color-danger);
}

.qr-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background-color: var(--color-bg);
  border-radius: 12px;
  margin-bottom: 24px;
  min-height: 300px;
}

.qr-short-link {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.qr-short-link input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  outline: none;
}

.qr-download-section {
  margin-top: 24px;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}

.qr-download-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.qr-select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.qr-select:focus {
  border-color: var(--color-primary);
}

.qr-login-prompt {
  text-align: center;
  padding: 24px;
  background-color: var(--color-light);
  border-radius: 12px;
  margin-top: 24px;
}

.qr-login-prompt p {
  margin: 0 0 16px 0;
  font-weight: 500;
  color: var(--color-primary);
}

.hidden {
  display: none !important;
}

/* Duoi 780px: bo cuc rong mac dinh (cot trai min 320px + gap 24 + cot phai
   380px = 724px) khong con du cho. Cac dieu chinh duoi day dung cho MOI truong
   hop hep, ca hai cot thu gon lan mot cot. */
@media (max-width: 780px) {
  /* Ma QR duoc ve co dinh 300x300 bang JS. Tren man hinh hep no chiem gan het
     chieu ngang, cong them dem 24px moi ben la tran. Cho phep thu nho theo
     khung chua nhung van giu ti le vuong. */
  #qr-canvas canvas,
  #qr-canvas svg,
  #qr-canvas img {
    max-width: 100%;
    height: auto;
  }

  .qr-preview-container {
    padding: 12px;
    min-height: 0;
    margin-bottom: 16px;
  }

  /* Bon the tuy chinh (Mau sac, Kieu dang, Logo & Khung, Mau co san) can 374px
     nhung khung tren dien thoai chi rong 294px. Truoc day chung tran ra ngoai va
     phai cuon ngang moi thay, nen the thu tu gan nhu vo hinh voi nguoi dung.
     Nhoi ca bon vao mot hang thi moi the chi con ~68px, khong du cho 'Logo &
     Khung'. Vi vay cho xuong hang thanh hai hang hai the. */
  .qr-tabs {
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .qr-tab {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 4px;
    font-size: 13px;
    text-align: center;
  }
}

/* Dai 621-780px: khung iframe trong cua so chat gan nhu luon roi vao day.
   SplitLayout mac dinh chia chat 60% / iframe 40%, nen tren man hinh 1920px
   khung nay chi rong ~665px va vung noi dung con ~612px - duoi nguong 780px.
   Nghia la bo cuc hai cot cua trinh tao QR truoc day gan nhu khong bao gio
   duoc dung den tren desktop: nguoi dung go dia chi o tren roi phai cuon
   xuong moi thay ma QR vua sinh ra.

   Hai cot van vua neu thu hep cot xem truoc: 316 + 16 + 260 = 592 < 612.
   Do thuc te: cot dieu khien 336px, cot xem truoc 260px, khong tran ngang,
   chieu cao trang giam tu 1278px xuong 793px. */
@media (max-width: 780px) and (min-width: 621px) {
  .qr-container {
    gap: 16px;
  }

  /* Bo min-width 320px cua ban goc, neu khong cot trai khong chiu co lai */
  .qr-controls {
    min-width: 0;
  }

  .qr-preview-panel {
    flex: 0 0 260px;
  }

  /* Hai o chon (dinh dang + kich thuoc) canh nhau chi con ~100px moi o,
     khong du cho chuoi "1000x1000 px". Xep doc thay vi nhoi ngang. */
  .qr-download-controls {
    flex-direction: column;
  }
}

/* Duoi 620px moi that su phai xep doc: dien thoai, hoac khi nguoi dung keo
   thanh chia lam khung iframe hep lai. */
@media (max-width: 620px) {
  /* Phai la column chu khong phai column-reverse. Trong HTML khoi nhap lieu
     dung truoc, khoi xem truoc dung sau - dung cho man hinh rong. Dao nguoc
     lai tren dien thoai se day ma QR rong len dau, nguoi dung phai cuon qua
     het no moi thay o nhap dia chi, tuc la nguoc voi trinh tu thao tac. */
  .qr-container {
    flex-direction: column;
  }

  .qr-preview-panel {
    position: static;
    flex: auto;
  }

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

/* Man hinh dien thoai thuc su: tiet che co chu tieu de cho do chiem cho */
@media (max-width: 480px) {
  .qr-header h1 {
    font-size: 24px;
  }

  .qr-header p {
    font-size: 14px;
  }

  .qr-card {
    padding: 16px;
  }
}