:root { color-scheme: light; --qr-ink:#101828; --qr-muted:#667085; --qr-paper:#eef3f8; --qr-line:#d9e0ea; --qr-sidebar:#111827; --qr-accent:#2563eb; --qr-green:#0f9f6e; }
* { box-sizing: border-box; }
body { min-height:100vh; color:var(--qr-ink); background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.58) 280px,transparent 560px),radial-gradient(circle at 8% 0%,rgba(37,99,235,.14),transparent 32vw),radial-gradient(circle at 88% 4%,rgba(15,159,110,.12),transparent 30vw),var(--qr-paper); }
button { font-weight:700; }
.app-shell { max-width:1680px; }
.sidebar-wrap { position:sticky; top:1.5rem; }
.sidebar { background:linear-gradient(180deg,#111827 0%,#172033 58%,#0f172a 100%); color:#fff; border-radius:1rem; }
.brand strong { font-size:1.05rem; } .brand small { color:#a8b3c4; }
.brand-mark { width:44px; height:44px; display:grid; grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; border:1px solid rgba(255,255,255,.18); border-radius:.65rem; background:linear-gradient(135deg,var(--qr-accent),var(--qr-green)); box-shadow:0 14px 28px rgba(0,0,0,.22); }
.brand-mark span { background:#fff; border-radius:2px; opacity:.96; } .brand-mark span:nth-child(4){opacity:.34;}
.mobile-type-trigger{display:none;} .type-list{display:grid;gap:.45rem;} .type-button{width:100%;min-height:42px;color:#cbd5e1;background:transparent;border:1px solid transparent;text-align:left;} .type-button:hover{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);} .type-button.active{color:#fff;background:linear-gradient(135deg,rgba(37,99,235,.30),rgba(15,159,110,.20));border-color:rgba(255,255,255,.20);box-shadow:inset 3px 0 0 #60a5fa;}
.workspace{min-width:0;} .topbar{display:flex;justify-content:space-between;gap:1.25rem;align-items:end;} .eyebrow{color:#1d4ed8;font-size:.75rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;} .display-title{max-width:920px;font-size:clamp(2rem,3.1vw,3.2rem);line-height:1.05;margin:0;} .status-pill{flex:0 0 auto;border-radius:999px;padding:.65rem .9rem;background:#dcfce7;color:#166534;border:1px solid #bbf7d0;font-weight:800;font-size:.875rem;box-shadow:0 10px 24px rgba(16,24,40,.08);} .status-pill.warn{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.panel,.preview-panel,.insights .card{border-radius:1rem;} .fields{display:grid;gap:.85rem;} .hidden{display:none!important;} .form-label{color:#344054;font-weight:700;font-size:.875rem;} .form-control,.form-select{border-color:var(--qr-line);border-radius:.65rem;} .form-control:focus,.form-select:focus{border-color:var(--qr-accent);box-shadow:0 0 0 .2rem rgba(37,99,235,.14);} .form-control-color{height:42px;padding:.25rem;} .form-check-label{color:#344054;font-weight:700;font-size:.875rem;} output{float:right;color:var(--qr-muted);font-weight:800;}
.preset-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;} .preset-grid .btn{position:relative;min-height:44px;padding-left:1.55rem;overflow:hidden;text-align:left;border-color:var(--qr-line);font-size:.78rem;font-weight:800;} .preset-grid .btn::before{content:"";position:absolute;left:.55rem;top:.68rem;width:.5rem;height:1.35rem;border-radius:999px;background:linear-gradient(180deg,var(--preset-a,#111827),var(--preset-b,#2563eb));} .preset-grid .btn:nth-child(1){--preset-a:#111827;--preset-b:#2563eb;} .preset-grid .btn:nth-child(2){--preset-a:#0f172a;--preset-b:#06b6d4;background:#ecfeff;border-color:#a5f3fc;} .preset-grid .btn:nth-child(3){--preset-a:#1f2937;--preset-b:#ea580c;background:#fff7ed;border-color:#fed7aa;} .preset-grid .btn:nth-child(4){--preset-a:#052e2b;--preset-b:#0d9488;background:#f0fdfa;border-color:#99f6e4;} .preset-grid .btn:nth-child(5){--preset-a:#18181b;--preset-b:#e11d48;background:#fff1f2;border-color:#fecdd3;} .preset-grid .btn.active{border-color:var(--qr-accent);box-shadow:0 0 0 .2rem rgba(37,99,235,.14);}
.preview-wrap{top:1.5rem;display:grid;gap:1rem;} .preview-toolbar strong{font-size:1.1rem;} .qr-stage{position:relative;min-height:560px;border-radius:1rem;overflow:hidden;display:grid;place-items:center;background:#f8fafc;background-image:linear-gradient(90deg,rgba(15,23,42,.055) 1px,transparent 1px),linear-gradient(rgba(15,23,42,.055) 1px,transparent 1px);background-size:28px 28px;} .qr-art{position:absolute;inset:18px;border:1px solid rgba(15,23,42,.08);border-radius:1rem;background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(15,159,110,.08)),#fff;} .qr-code{position:relative;z-index:1;width:min(72vw,448px);aspect-ratio:1;display:grid;place-items:center;padding:18px;background:rgba(255,255,255,.96);border:1px solid rgba(148,163,184,.30);border-radius:1rem;box-shadow:0 18px 44px rgba(16,24,40,.18);} .qr-code canvas,.qr-code svg{width:100%!important;height:100%!important;}
.quality-meter{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;color:#344054;font-size:.875rem;font-weight:800;} .quality-meter div{height:.65rem;border-radius:999px;background:#e4e7ec;overflow:hidden;box-shadow:inset 0 1px 2px rgba(16,24,40,.08);} .quality-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e);} .download-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-top:1rem;}
.insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;} .insights .card-body{padding:.9rem;} .insights span{display:block;color:var(--qr-muted);font-size:.75rem;font-weight:800;} .insights strong{display:block;margin-top:.25rem;font-size:1.1rem;}
.history-list{display:grid;gap:.5rem;margin-top:.75rem;} .history-list p{margin:0;color:var(--qr-muted);font-size:.875rem;} .history-item{display:grid;grid-template-columns:1fr 42px;gap:.5rem;} .history-item button:first-child{text-align:left;display:grid;gap:.1rem;min-width:0;background:#f8fafc;border:1px solid var(--qr-line);border-radius:.65rem;padding:.65rem .75rem;} .history-item strong,.history-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .history-item span{color:var(--qr-muted);font-size:.75rem;} .history-item button:last-child{color:#dc2626;border:1px solid var(--qr-line);border-radius:.65rem;background:#fff;font-size:1.25rem;} .site-footer{margin:1.5rem auto 0;padding:1rem .25rem .25rem;color:var(--qr-muted);font-size:.85rem;line-height:1.45;text-align:center;}
@media (max-width:1199.98px){.sidebar-wrap,.preview-wrap{position:static;}.topbar{align-items:start;flex-direction:column;}.qr-stage{min-height:460px;}}
@media (hover:none) and (pointer:coarse){button,input,textarea,select{min-height:44px;}input[type="checkbox"]{min-height:0;}}
@media (max-width:991.98px){body{background:var(--qr-paper);}.app-shell{padding:0;}.sidebar-wrap{position:sticky;top:0;z-index:20;}.sidebar{border-radius:0;box-shadow:0 10px 24px rgba(16,24,40,.18)!important;}.sidebar .card-body{padding:.65rem!important;}.brand{margin-bottom:.55rem!important;}.brand-mark{width:34px;height:34px;padding:5px;}.brand strong{font-size:.95rem;}.brand small{display:none;}.mobile-type-trigger{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}.mobile-type-trigger span{color:#cbd5e1;font-size:.75rem;}.mobile-type-trigger strong{font-size:.95rem;}.mobile-type-trigger::after{content:"⌄";color:#cbd5e1;font-size:1.1rem;}.mobile-type-trigger[aria-expanded="true"]::after{content:"⌃";}.type-list{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding-top:.55rem;}.type-list.open{display:grid;}.type-button{min-height:40px;padding:.55rem .6rem;text-align:center;}.type-button.active{box-shadow:inset 0 -3px 0 #60a5fa;}.workspace{padding:.9rem .65rem 0;}.topbar{margin-bottom:.8rem!important;gap:.65rem;}.eyebrow{font-size:.7rem;}.display-title{font-size:1.5rem;line-height:1.12;}.status-pill{align-self:stretch;text-align:center;box-shadow:none;}.tool-grid{gap:.8rem;}.panel,.preview-panel,.insights .card{border-radius:.9rem;box-shadow:none!important;}.preset-grid{grid-template-columns:1fr;}.qr-stage{min-height:300px;background-size:22px 22px;}.qr-art{inset:10px;border-radius:.75rem;}.qr-code{width:min(78vw,292px);padding:12px;border-radius:.75rem;box-shadow:0 10px 28px rgba(16,24,40,.14);}.quality-meter{grid-template-columns:1fr auto;row-gap:.5rem;}.quality-meter span{grid-column:1/-1;}.download-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;}.download-row .btn{min-width:0;padding:.6rem .35rem;font-size:.82rem;}.insights{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}.insights .card-body{padding:.65rem .5rem;}.insights strong{font-size:.95rem;}.site-footer{margin-top:.9rem;padding-bottom:1rem;font-size:.75rem;}}
@media (max-width:380px){.download-row{gap:.35rem;}.download-row .btn{font-size:.75rem;}.insights{grid-template-columns:1fr;}.qr-code{width:min(82vw,270px);}}