body{font-family:"Be Vietnam Pro","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;font-size:14px;color:#0f172a;margin:0;padding:24px;min-height:100vh;background:linear-gradient(135deg, #f3f4ff 0%, #f8fbff 100%)}.container.qr-generator{max-width:1140px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 28px 60px rgba(15,23,42,.08);overflow:hidden}.header{background:linear-gradient(150deg, #6366f1, #14b8a6);color:#fff;padding:36px 38px}.header h1{margin:0 0 12px;font-size:30px;font-weight:700}.header .subtitle{margin:0;font-size:14px;opacity:.9}.tool-layout{display:grid;grid-template-columns:minmax(340px, 420px) 1fr;gap:24px;padding:30px 34px 36px}.input-card,.result-card{background:#f8fbff;border:1px solid #dce8ff;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:20px}.result-card{background:#fff;border:1px solid #dbe3ff;box-shadow:0 22px 50px rgba(15,23,42,.05)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card-header h2{margin:0;font-size:18px;color:#1e2a4a}textarea,select,input[type=color]{width:100%;border-radius:12px;border:1px solid #cfe0f5;background:#fff;padding:14px 16px;font-family:"JetBrains Mono","Monaco","Menlo",monospace;font-size:13px;color:#0f172a;transition:border-color .3s ease,box-shadow .3s ease}textarea:focus,select:focus,input[type=color]:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.2);outline:none}textarea{min-height:150px;resize:vertical}.options-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:12px}.options-grid .option-item{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#334155}.options-grid .option-item select{font-family:"Be Vietnam Pro",sans-serif;font-size:13px;letter-spacing:0}.color-pickers{display:grid;grid-template-columns:repeat(2, minmax(140px, 1fr));gap:16px}.color-pickers label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#334155}.color-pickers label input[type=color]{height:44px;padding:0;border-radius:10px}.btn{padding:11px 20px;border-radius:10px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn.btn-primary{background:#6366f1;color:#fff}.btn.btn-primary:hover{background:#4f46e5}.btn.btn-secondary{background:#94a3b8;color:#fff}.btn.btn-secondary:hover{background:#64748b}.btn.btn-outline{background:rgba(0,0,0,0);border:1px solid #6366f1;color:#4338ca}.btn.btn-outline:hover{background:rgba(99,102,241,.12)}.btn.btn-outline:disabled{border-color:#cbd5f5;color:#94a3b8;cursor:not-allowed}.button-group{display:flex;gap:12px;flex-wrap:wrap}.status-message{min-height:22px;font-size:13px;font-weight:500}.status-message.status-success{color:#059669}.status-message.status-error{color:#ef4444}.qr-preview{background:#0f172a;border-radius:16px;border:1px solid #1f2940;padding:24px;min-height:280px;display:flex;align-items:center;justify-content:center}.qr-preview canvas,.qr-preview img,.qr-preview svg{max-width:100%;height:auto;display:block}.qr-preview .placeholder{color:#e2e8f0;font-size:14px;text-align:center}.advanced-options{display:grid;gap:12px}.switch{position:relative;display:flex;align-items:center;gap:12px;font-size:13px;color:#1f2937}.switch input{opacity:0;width:0;height:0}.switch .slider{position:relative;width:46px;height:24px;background:#cbd5f5;border-radius:999px;transition:background .2s ease}.switch .slider::after{content:"";position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s ease;box-shadow:0 4px 12px rgba(15,23,42,.1)}.switch input:checked+.slider{background:#6366f1}.switch input:checked+.slider::after{transform:translateX(22px)}.switch .label{font-weight:600}.history-list{display:grid;gap:10px;max-height:200px;overflow:auto}.history-list .history-item{background:#f1f5f9;border:1px solid #dce7ff;border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:14px}.history-list .history-item .text{font-family:"JetBrains Mono",monospace;font-size:12px;color:#1f2937;word-break:break-word}.history-list .history-item .history-actions{display:flex;gap:8px;flex-wrap:wrap}.history-list .history-item button{font-size:11px;padding:6px 10px;border-radius:6px}.history-list .history-empty{color:#475569;font-size:13px}.disabled-input{opacity:.5;cursor:not-allowed}.tips-section{margin:0 34px 36px;padding:24px;background:#edf4ff;border:1px solid #d7e6ff;border-radius:16px}.tips-section h3{margin:0 0 12px;font-size:16px;color:#1f2c4f}.tips-section ul{margin:0;padding-left:20px}.tips-section ul li{padding:6px 0;color:#42526b}@media(max-width: 1024px){body{padding:20px}.tool-layout{grid-template-columns:1fr}}@media(max-width: 640px){body{padding:12px}.container.qr-generator{border-radius:14px;margin:0}.tool-layout{padding:22px}.button-group{flex-direction:column;align-items:stretch}.button-group .btn{width:100%}.color-pickers{grid-template-columns:1fr}}