/* UpDuck QR — panels, buttons, responsive layout, dark-mode & focus states */
:root{
  --blue:#0a6cff; --blue-700:#0553cc;
  --orange:#ff8a00; --orange-700:#cc6d00;
  --red:#e53935; --red-700:#c62828;
  --bg:#f5f7fb; --panel:#fff; --text:#0b1220; --muted:#5b6577;
  --radius:1.25rem; --shadow:0 10px 30px rgba(2,12,27,.08);
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem;
  --container:min(1100px,100% - max(2rem,env(safe-area-inset-left) + env(safe-area-inset-right)));
  --focus:0 0 0 3px rgba(10,108,255,.25);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0f14; --text:#e5ecff; --muted:#97a2b3; --panel:#121821; --shadow:0 10px 30px rgba(0,0,0,.4); }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Inter","Roboto","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text)}
img{max-width:100%;height:auto}
.container{width:var(--container);margin-inline:auto;padding:clamp(1rem,2vw,1.5rem)}

.site-header{position:sticky;top:0;background:transparent;backdrop-filter:saturate(120%) blur(6px);z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:var(--space-2)}
.brand-logo {width: 80px;height: 80px;border-radius: 50%;object-fit: contain;background: #fff;box-shadow: var(--shadow);padding: 4px; }
.brand-title{font-size:clamp(1.25rem,2vw,1.6rem);margin:0}
.top-nav a{margin-left:var(--space-2)}

.site-footer{margin-top:var(--space-6);padding:var(--space-5) 0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.04))}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.footer-col h3{margin:0 0 var(--space-2)}

.main{min-height:calc(100dvh - 180px)}
.layout{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:900px){.layout{grid-template-columns:1.2fr .8fr}}

.panel{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}

.tabs{display:flex;gap:.5rem;margin-bottom:var(--space-3);flex-wrap:wrap}
.tab{appearance:none;border:0;border-radius:999px;padding:.5rem 1rem;background:#eaf1ff;cursor:pointer}
.tab.active{background:var(--blue);color:#fff}
.tab:focus-visible{outline:none;box-shadow:var(--focus)}
.tab-panel{display:none}
.tab-panel.active{display:block}

.field-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-3)}
.field-group input,.field-group textarea,.field-group select{
  width:100%;padding:.75rem 1rem;border-radius:.85rem;border:1px solid #d9dfeb;background:#fff;color:inherit
}
.floating{background:#fff;border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow)}
.customize{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-3);background:#fff;border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow);margin-top:var(--space-3)}
.actions{display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap}

.grid2{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
.grid3{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media (min-width:720px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr 1fr}.span2{grid-column:span 2}}

.btn{border:0;border-radius:.9rem;padding:.75rem 1rem;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{filter:brightness(1.03)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-orange{background:var(--orange);color:#111}
.btn-orange:hover{background:var(--orange-700)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-700)}
.link{color:var(--blue);text-decoration:underline}
.link:hover{text-decoration:none}

.preview-inner{display:flex;flex-direction:column;gap:var(--space-3)}
.qrcode-box{display:grid;place-items:center;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);min-height:320px}
.dl-actions{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;justify-content:center}

.alert{border-radius:.75rem;padding:.75rem 1rem}
.alert-success{background:#e7f6ec;border:1px solid #b7e1c4}
.alert-danger{background:#fde8e7;border:1px solid #f5c0be}

/* --- Tabs (new class names) --- */
.tabs{display:flex;gap:.5rem;margin-bottom:var(--space-3);flex-wrap:wrap}
.tab-btn{appearance:none;border:0;border-radius:999px;padding:.5rem 1rem;background:#eaf1ff;cursor:pointer}
.tab-btn.active{background:var(--blue);color:#fff}
.tab-btn:focus-visible{outline:none;box-shadow:var(--focus)}

/* Show one panel at a time */
.tab-content{display:none}
.tab-content.active{display:block}