@import url("/static/css/design-tokens.css");
* { box-sizing: border-box; letter-spacing: 0 !important; }
body { margin: 0; padding: 28px !important; background: var(--ui-bg) !important; color: var(--ui-text); font: 14px/1.6 var(--ui-font); }
h1 { color: var(--ui-brand) !important; font-size: 26px !important; margin: 0 0 25px !important; }
.container { width: 100%; max-width: var(--ui-content-max-width); padding: 0 !important; margin: 0 auto !important; background: transparent !important; text-align: left !important; box-shadow: none !important; border-radius: 0 !important; }
.main-content { gap: 28px; }
input, select, textarea { background: #fff !important; color: var(--ui-text) !important; border: 1px solid #bdbdbd !important; border-radius: 5px !important; font: 14px var(--ui-font) !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid #d9c8eb !important; border-color: var(--ui-brand) !important; }
button { background: var(--ui-brand-gradient) !important; color: #fff; border: 1px solid transparent; border-radius: 5px !important; padding: 9px 16px !important; min-height: 38px; font: 13px var(--ui-font) !important; margin: 0 6px 0 0 !important; box-shadow: none !important; }
button:hover { background: var(--ui-brand-gradient-hover) !important; transform: none !important; }
button[onclick="clearQRCode()"] { background: #fff !important; color: #666; border-color: var(--ui-border); }
.qrcode-container { min-height: 250px; width: 100%; background: #fff !important; border: 1px solid var(--ui-border); border-radius: 6px !important; margin-top: 0; padding: 20px; }
#qrcode canvas, #qrcode img { display: block; max-width: 100%; height: auto; }
.left-panel, .right-panel { min-width: 0; width: 100%; }
label { font-size: 13px; }
small { font-size: 11px; color: #888 !important; }
ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
li a { display: block; border: 1px solid var(--ui-border); background: #fff; color: var(--ui-brand); padding: 16px; border-radius: 5px; text-decoration: none; }
li a:hover { border-color: #a18cd1; background: var(--ui-soft); }
@media (max-width: 768px) { body { padding: 18px !important; } .main-content { flex-direction: column !important; } .right-panel { order: initial !important; } .size-controls { flex-direction: row !important; } h1 { font-size: 23px !important; } ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }