:root{
  --bg:#0b0f17; --panel:#121826; --panel-2:#1a2233; --line:#243044;
  --ink:#e7edf7; --muted:#8a98ad; --acc:#4ade80; --acc-2:#22d3ee;
}
*{box-sizing:border-box}
body{
  background:radial-gradient(1200px 600px at 80% -10%,#15203a 0,var(--bg) 55%);
  color:var(--ink); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; min-height:100vh;
}
.app-head{padding:28px 0 8px}
.app-head h1{font-weight:700;letter-spacing:-.5px;font-size:1.6rem;margin:0}
.app-head h1 .dot{color:var(--acc)}
.app-head p{color:var(--muted);margin:.35rem 0 0;font-size:.92rem}
.shell{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.nav-pills .nav-link{color:var(--muted);border-radius:12px;font-weight:600;padding:.55rem 1.1rem}
.nav-pills .nav-link.active{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#04120a}
.form-label{color:var(--muted);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.form-control,.form-select{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:12px}
.form-control:focus,.form-select:focus{background:var(--panel-2);border-color:var(--acc-2);color:var(--ink);box-shadow:0 0 0 .2rem rgba(34,211,238,.15)}
.form-control::placeholder{color:#5a6781}
.btn-go{background:linear-gradient(135deg,var(--acc),var(--acc-2));border:0;color:#04120a;font-weight:700;border-radius:12px;padding:.6rem 1.2rem}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:12px;font-weight:600}
.btn-ghost:hover{border-color:var(--acc-2);color:var(--ink)}
.qr-stage{background:var(--panel-2);border:1px dashed var(--line);border-radius:16px;min-height:300px;display:flex;align-items:center;justify-content:center;padding:18px}
/* preview dính theo khi cuộn (desktop) */
@media (min-width:992px){
  .preview-sticky{position:sticky;top:16px}
}
#qrCanvasWrap{position:relative;display:inline-block;border-radius:12px;overflow:hidden}
.frame-track{margin-top:14px}
.swiper-slide{width:auto}
.frame-chip{width:92px;height:92px;border-radius:14px;border:2px solid var(--line);background:var(--panel-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);transition:.18s;font-size:.68rem;text-align:center;padding:6px;position:relative;overflow:hidden}
.frame-chip:hover{border-color:var(--acc-2)}
.frame-chip.active{border-color:var(--acc);color:var(--ink);box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.frame-chip i{font-size:1.4rem}
.frame-chip img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:6px}
.frame-chip .del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:.6rem;display:flex;align-items:center;justify-content:center;z-index:2}
.frame-chip.add{border-style:dashed}
.swatch{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);padding:2px;background:var(--panel-2);cursor:pointer}
.drop{border:2px dashed var(--line);border-radius:16px;padding:34px;text-align:center;color:var(--muted);cursor:pointer;transition:.18s}
.drop.drag,.drop:hover{border-color:var(--acc-2);background:rgba(34,211,238,.05)}
.result-box{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;word-break:break-all}
.result-box a{color:var(--acc-2)}
.muted{color:var(--muted)}
hr{border-color:var(--line);opacity:.5}
.badge-soft{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);font-weight:600}
.hist-item{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hist-item .hist-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.hist-item .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:.85rem}
.hist-item .meta{font-size:.7rem;flex-shrink:0}
.hist-item .hist-actions{display:flex;gap:6px;flex-shrink:0}
.range-row{display:flex;align-items:center;gap:10px}
.range-row input[type=range]{flex:1}
.ts-wrapper.form-select{padding:0}
.ts-control{background:var(--panel-2)!important;border:1px solid var(--line)!important;border-radius:12px!important;color:var(--ink)!important}
.ts-control .item{color:var(--ink)!important}
.ts-dropdown{background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.ts-dropdown .active{background:var(--acc-2);color:#04120a}
@media (max-width:991px){
  /* Preview QR lên trên, dính theo cuộn để luôn thấy kết quả khi chỉnh */
  #encRow{display:flex;flex-direction:column}
  #encRow .col-preview{order:-1}
  #encRow .col-preview .preview-sticky{position:sticky;top:8px;z-index:5}
  #encRow .col-preview .qr-stage{min-height:auto;padding:12px}
  #encRow .col-preview .qr-stage #qrCanvasWrap canvas{max-height:42vh;width:auto!important}
}
@media (max-width:576px){
  .app-head{padding:18px 0 4px}
  .app-head h1{font-size:1.3rem}
  .app-head p{font-size:.82rem}
  .shell{padding:14px;border-radius:14px}
  .nav-pills .nav-link{padding:.5rem .9rem;font-size:.92rem}
  /* nút lớn dễ chạm */
  .btn-go,.btn-ghost{padding:.6rem .9rem;font-size:.95rem}
  /* hàng tải về xuống dòng đều nhau */
  .col-preview .d-flex.gap-2{flex-wrap:wrap}
  .col-preview #btnDownPng{flex:1 1 100%}
  .col-preview #btnDownSvg,.col-preview #btnCopy{flex:1 1 calc(50% - 4px)}
  /* lịch sử: text trên, nút full-width bên dưới */
  .hist-item{flex-direction:column;align-items:stretch;gap:8px}
  .hist-item .hist-actions{width:100%}
  .hist-item .hist-actions .btn{flex:1}
}