:root{--radius-md: 10px;--radius-sm: 6px;--radius-btn: 12px;--shadow-sm: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 10px 32px rgba(0, 0, 0, .1);--ink: #000000;--muted: #666666;--muted-on-dark: rgba(255, 255, 255, .78);--surface: #ffffff;--panel: #f5f5f5;--border: #e0e0e09c;--primary: #000000;--primary-hover: #333333;--primary-focus-ring: rgba(0, 0, 0, .25);--card-bg: #ffffff;--fz-h1: clamp(28px, 4.5vw, 40px);--fz-label: 13px;--fz-body: 16px;--fz-button: 15px}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;background:radial-gradient(circle at top left,#ff006685,transparent 60%),radial-gradient(circle at top right,#ffcc008f,transparent 60%),radial-gradient(circle at bottom left,#00ccff79,transparent 60%),radial-gradient(circle at bottom right,#6633ffc7,transparent 60%);background-color:#000;background-blend-mode:screen;position:relative;overflow:hidden}body:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.3;pointer-events:none;z-index:-1}.app-container{display:flex;flex-direction:column;margin:0;padding:0}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:16px}.container{width:60vw;background:var(--card-bg);border-radius:22px;z-index:1;box-shadow:var(--shadow-lg)}.ecc-toolbar{align-self:flex-end;margin-right:6px;display:flex;gap:8px}.ecc-btn{height:2vw;min-width:2vw;border-radius:999px;border:.1vw solid var(--border);background:var(--surface);cursor:pointer;font-weight:700;position:relative;transition:all .2s ease}.ecc-btn.active{background:var(--primary);color:var(--surface);border-color:var(--primary)}.ecc-btn:disabled{opacity:.5;cursor:not-allowed}.ecc-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-sm)}.ecc-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--primary-focus-ring)}.content{display:grid;grid-template-columns:20% 40% 40%;background:transparent;transition:grid-template-columns .3s ease}.content.sidebar-collapsed{grid-template-columns:4% 48% 48%}.sidebar,.center,.preview{padding:1vw}.sidebar{display:flex;flex-direction:column;gap:16px;border-right:2px solid var(--border);transition:all .3s ease;box-shadow:-2px 0 10px #0000001a;overflow-y:auto;max-height:73vh}.sidebar.collapsed{padding:1vw;width:3vw;overflow:visible}.sidebar.collapsed .input-switcher,.sidebar.collapsed .sidebar-header span{display:none}.sidebar-header{display:flex;justify-content:space-between;align-items:center}.sidebar-collapse{background:var(--primary);color:var(--surface);border:none;border-radius:var(--radius-btn);width:2vw;height:2vw;cursor:pointer;font-size:16px;font-weight:700}.sidebar-collapse:hover{background:var(--primary-hover);transform:scale(1.1)}.center{width:100%;border-right:2px solid var(--border)}.preview{display:flex;align-items:center;justify-content:flex-start;flex-direction:column;position:relative}.input-switcher{display:flex;flex-direction:column;gap:12px}.input-toggle{width:100%;height:48px;border-radius:var(--radius-btn);border:2px solid var(--border);background:var(--surface);cursor:pointer;font-weight:600;transition:all .3s ease;text-align:left;padding:0 16px;color:var(--ink);display:flex;align-items:center;gap:10px}.input-toggle .btn-ic{width:18px;display:inline-flex;align-items:center;justify-content:center}.input-toggle .btn-ic svg{width:18px;height:18px;display:block}.field-group.invalid input,.field-group.invalid select,.link-input-container.invalid input,.link-input-container.invalid select{border-color:#e53935;box-shadow:0 0 0 4px #e5393526}.field-error{color:#e53935;font-size:12px;margin-top:-2px}.input-toggle:hover{background:var(--panel);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.input-toggle.active{background:var(--primary);color:var(--surface);border-color:var(--primary);box-shadow:var(--shadow-sm)}.link-input-container{display:flex;flex-direction:column;gap:20px}.link-input-container.stacked{gap:20px}.field-group{display:flex;flex-direction:column;gap:8px}.field-group label{font-size:var(--fz-label);font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.5px}.field-group input,.field-group select,.link-input-container input{height:2.2vw;border-radius:var(--radius-btn);border:2px solid var(--border);background:var(--surface);padding-inline:16px;font-size:var(--fz-body);color:var(--ink);transition:all .3s ease}.field-group input:focus,.field-group select:focus,.link-input-container input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-focus-ring);transform:translateY(-1px)}.field-group input::placeholder,.link-input-container input::placeholder{color:var(--muted)}.generate-btn,.download-btn{height:50px;padding:0 24px;border:none;border-radius:var(--radius-btn);cursor:pointer;font-weight:700;font-size:var(--fz-button);transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.generate-btn{background:var(--primary);color:var(--surface);box-shadow:var(--shadow-sm)}.generate-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.download-btn{background:var(--surface);color:var(--primary);border:2px solid var(--primary)}.download-btn:hover{background:var(--primary);color:var(--surface);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.qr-display{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;width:100%}.qr-code{width:clamp(200px,100%,280px);height:clamp(200px,100%,280px);border-radius:16px;background:var(--surface);padding:20px;box-shadow:var(--shadow-sm);border:2px solid var(--border)}.qr-text{margin:0;color:var(--muted);max-width:300px;line-height:1.6;font-weight:500}.qr-meta{width:100%;max-width:360px;font-size:13px;color:var(--muted);border-top:1px dashed var(--border);padding-top:12px;display:grid;grid-template-columns:110px 1fr;gap:6px 12px;text-align:left}.qr-meta .label{font-weight:600;color:var(--primary)}.qr-meta .value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qr-meta .preview-url{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin}.qr-toolbar{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:2vw}.qr-controls,.qr-toolbar label{display:none}.qr-toolbar input[type=color],.qr-toolbar select{height:28px;width:28px;border-radius:6px;border:2px solid var(--border);background:var(--surface);padding:0}.qr-toolbar select{width:auto;height:32px;padding:0 6px}.color-group{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.color-label{font-size:12px;font-weight:600;color:var(--primary)}.qr-action-btn{height:32px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--primary);font-weight:600;cursor:pointer}.qr-action-btn:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}.qr-toolbar input[type=checkbox]{width:18px;height:18px}@media (max-width: 860px){.content,.content.sidebar-collapsed{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:2px solid var(--border);min-width:auto}.sidebar.collapsed{display:none;min-width:auto}.center{border-right:none;border-bottom:2px solid var(--border)}.input-switcher{flex-direction:row;flex-wrap:wrap}.input-toggle{width:auto;min-width:120px}}.watermark{padding-left:6px;color:#fffc;-webkit-user-select:none;user-select:none;pointer-events:none;margin-bottom:0;padding-bottom:0;text-shadow:0 2px 10px rgba(0,0,0,.35)}.watermark h1{font-size:2vw;margin:0;padding:0;font-weight:600;color:#fffc}.watermark h2{line-height:0;font-size:1vw;margin-top:0;padding-top:0;font-weight:400}