:root{--control-h: 44px;--border-w: 1px;--radius: 8px;--pad-x: .75em;--font-size: 1rem;--line-tight: 1.2;--line-body: 1.25;--c-bg: #ffffff;--c-bg-secondary: #f8f9fa;--c-bdr: #d0d7de;--c-bdr-focus: #8b68ff;--c-text: #24292f;--c-text-secondary: #656d76;--c-text-muted: #8c959f;--btn-primary: #8b68ff;--btn-primary-hover: #7a58e8;--btn-primary-active: #6a48d1;--btn-secondary: #6e7781;--btn-secondary-hover: #57606a;--btn-danger: #da3633;--btn-danger-hover: #b62324;--status-success: #1a7f37;--status-error: #da3633;--status-warning: #bf8700;--status-info: #0969da;--spacing-xs: .25em;--spacing-sm: .5em;--spacing-md: 1em;--spacing-lg: 1.5em;--spacing-xl: 2em;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";margin:0;padding:var(--spacing-md);text-align:center;color:var(--c-text);background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;line-height:1.5}.container{max-width:600px;margin:0 auto;padding:var(--spacing-xl);background:var(--c-bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);position:relative}.app-header{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.app-logo{flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(139,104,255,.3));transition:transform var(--transition-base),filter var(--transition-base)}.app-logo:hover{transform:scale(1.05);filter:drop-shadow(0 4px 12px rgba(139,104,255,.4))}h1{font-size:2rem;font-weight:700;margin-bottom:0;color:var(--c-text);background:linear-gradient(135deg,var(--btn-primary) 0%,var(--btn-primary-hover) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}input,select,textarea,button{font:inherit;font-size:var(--font-size);color:inherit;letter-spacing:inherit;text-align:left;box-sizing:border-box}button,input[type=button]{width:auto;display:inline-flex;align-items:center;justify-content:center;margin:.5em auto;padding:0 1em}.container input[type=text],.container input[type=number],.container select,.container textarea{width:100%;max-width:100%}input[type=text],input[type=number],select{height:var(--control-h);width:100%;max-width:100%;margin:.5em 0;line-height:var(--line-tight);padding-inline:var(--pad-x);padding-block:calc((var(--control-h) - (1em * var(--line-tight)) - (2 * var(--border-w))) / 2);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);background:var(--c-bg);-moz-appearance:none;appearance:none;-webkit-appearance:none;transition:all var(--transition-base);color:var(--c-text)}input[type=text]:hover,input[type=number]:hover{border-color:var(--c-text-secondary);background:var(--c-bg-secondary)}select:hover{border-color:var(--c-text-secondary);background-color:var(--c-bg-secondary)}input[type=text]:focus,input[type=number]:focus{outline:none;border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a;background:var(--c-bg)}select:focus{outline:none;border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a;background-color:var(--c-bg)}select{padding-right:calc(var(--pad-x) + 24px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--pad-x) center;background-size:12px;cursor:pointer;transition:none}.custom-font-picker{position:relative;width:100%;margin:.5em 0}.custom-font-picker-button{width:100%;height:var(--control-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);background:var(--c-bg);color:var(--c-text);cursor:pointer;transition:all var(--transition-base);text-align:left;font-size:var(--font-size);line-height:var(--line-tight)}.custom-font-picker-button:hover{border-color:var(--c-text-secondary);background:var(--c-bg-secondary)}.custom-font-picker-button:focus{outline:none;border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a;background:var(--c-bg)}.custom-font-picker-button[aria-expanded=true]{border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a}.custom-font-picker-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-font-picker-arrow{margin-left:var(--spacing-sm);font-size:.8em;color:var(--c-text-secondary);transition:transform var(--transition-base);flex-shrink:0}.custom-font-picker-button[aria-expanded=true] .custom-font-picker-arrow{transform:rotate(180deg)}.custom-font-picker-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:var(--c-bg);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:none;flex-direction:column;max-height:400px;overflow:hidden}.custom-font-picker-dropdown.open{display:flex}.custom-font-picker-search{padding:var(--spacing-sm);border-bottom:var(--border-w) solid var(--c-bdr)}.custom-font-picker-search input{width:100%;height:calc(var(--control-h) - 8px);padding:0 var(--pad-x);border:var(--border-w) solid var(--c-bdr);border-radius:calc(var(--radius) - 2px);background:var(--c-bg);color:var(--c-text);font-size:var(--font-size);line-height:var(--line-tight)}.custom-font-picker-search input:focus{outline:none;border-color:var(--c-bdr-focus);box-shadow:0 0 0 2px #8b68ff1a}.custom-font-picker-list{overflow-y:auto;overflow-x:hidden;flex:1}.custom-font-picker-list::-webkit-scrollbar{width:8px}.custom-font-picker-list::-webkit-scrollbar-track{background:var(--c-bg-secondary)}.custom-font-picker-list::-webkit-scrollbar-thumb{background:var(--c-bdr);border-radius:4px}.custom-font-picker-list::-webkit-scrollbar-thumb:hover{background:var(--c-text-secondary)}.custom-font-picker-option{display:flex;align-items:center;padding:var(--spacing-sm) var(--pad-x);cursor:pointer;transition:background var(--transition-fast);border:none;background:transparent;width:100%;text-align:left;font-size:var(--font-size);color:var(--c-text);min-height:calc(var(--control-h) + 4px)}.custom-font-picker-option:hover,.custom-font-picker-option:focus{background:var(--c-bg-secondary);outline:none}.custom-font-picker-option.selected{background:#8b68ff1a;font-weight:600}.custom-font-picker-option-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-font-picker-option-preview{margin-left:var(--spacing-sm);font-size:1.1em;color:var(--c-text-secondary);flex-shrink:0}.custom-font-picker-option[data-font=Roboto] .custom-font-picker-option-preview{font-family:Roboto,sans-serif}.custom-font-picker-option[data-font="Open Sans"] .custom-font-picker-option-preview{font-family:Open Sans,sans-serif}.custom-font-picker-option[data-font=Lato] .custom-font-picker-option-preview{font-family:Lato,sans-serif}.custom-font-picker-option[data-font=Montserrat] .custom-font-picker-option-preview{font-family:Montserrat,sans-serif}.custom-font-picker-option[data-font=Oswald] .custom-font-picker-option-preview{font-family:Oswald,sans-serif}.custom-font-picker-option[data-font="Playfair Display"] .custom-font-picker-option-preview{font-family:Playfair Display,serif}.custom-font-picker-option[data-font=Merriweather] .custom-font-picker-option-preview{font-family:Merriweather,serif}.custom-font-picker-option[data-font="Source Sans Pro"] .custom-font-picker-option-preview{font-family:Source Sans Pro,sans-serif}.custom-font-picker-option[data-font=Raleway] .custom-font-picker-option-preview{font-family:Raleway,sans-serif}.custom-font-picker-option[data-font=Poppins] .custom-font-picker-option-preview{font-family:Poppins,sans-serif}.custom-font-picker-option[data-font=Ubuntu] .custom-font-picker-option-preview{font-family:Ubuntu,sans-serif}.custom-font-picker-option[data-font="PT Sans"] .custom-font-picker-option-preview{font-family:PT Sans,sans-serif}.custom-font-picker-option[data-font="Roboto Condensed"] .custom-font-picker-option-preview{font-family:Roboto Condensed,sans-serif}.custom-font-picker-option[data-font="Noto Sans"] .custom-font-picker-option-preview{font-family:Noto Sans,sans-serif}.custom-font-picker-option[data-font=Inter] .custom-font-picker-option-preview{font-family:Inter,sans-serif}.custom-font-picker-option[data-font="Work Sans"] .custom-font-picker-option-preview{font-family:Work Sans,sans-serif}.custom-font-picker-option[data-font=Quicksand] .custom-font-picker-option-preview{font-family:Quicksand,sans-serif}.custom-font-picker-option[data-font=Nunito] .custom-font-picker-option-preview{font-family:Nunito,sans-serif}.custom-font-picker-option[data-font=Comfortaa] .custom-font-picker-option-preview{font-family:Comfortaa,sans-serif}.custom-font-picker-option[data-font=Kalam] .custom-font-picker-option-preview{font-family:Kalam,sans-serif}.custom-font-picker-option[data-font="Indie Flower"] .custom-font-picker-option-preview{font-family:Indie Flower,cursive}.custom-font-picker-option[data-font=Caveat] .custom-font-picker-option-preview{font-family:Caveat,cursive}.custom-font-picker-option[data-font="Dancing Script"] .custom-font-picker-option-preview{font-family:Dancing Script,cursive}.custom-font-picker-option[data-font=Pacifico] .custom-font-picker-option-preview{font-family:Pacifico,cursive}.custom-font-picker-option[data-font="Shadows Into Light"] .custom-font-picker-option-preview{font-family:Shadows Into Light,cursive}.custom-font-picker-option[data-font="Amatic SC"] .custom-font-picker-option-preview{font-family:Amatic SC,sans-serif}.custom-font-picker-option[data-font="Kaushan Script"] .custom-font-picker-option-preview{font-family:Kaushan Script,cursive}.custom-font-picker-option[data-font="Great Vibes"] .custom-font-picker-option-preview{font-family:Great Vibes,cursive}.custom-font-picker-option[data-font=Allura] .custom-font-picker-option-preview{font-family:Allura,cursive}.custom-font-picker-option[data-font="Alex Brush"] .custom-font-picker-option-preview{font-family:Alex Brush,cursive}.custom-font-picker-option[data-font="Roboto Mono"] .custom-font-picker-option-preview{font-family:Roboto Mono,monospace}.custom-font-picker-option[data-font="Source Code Pro"] .custom-font-picker-option-preview{font-family:Source Code Pro,monospace}.custom-font-picker-option[data-font="Space Mono"] .custom-font-picker-option-preview{font-family:Space Mono,monospace}.custom-font-picker-option[data-font=Inconsolata] .custom-font-picker-option-preview{font-family:Inconsolata,monospace}.custom-font-picker-option[data-font="Courier Prime"] .custom-font-picker-option-preview{font-family:Courier Prime,monospace}.custom-font-picker-option[data-font=Arial] .custom-font-picker-option-preview{font-family:Arial,sans-serif}.custom-font-picker-option[data-font=Helvetica] .custom-font-picker-option-preview{font-family:Helvetica,Arial,sans-serif}.custom-font-picker-option[data-font="Times New Roman"] .custom-font-picker-option-preview{font-family:Times New Roman,Times,serif}.custom-font-picker-option[data-font="Courier New"] .custom-font-picker-option-preview{font-family:Courier New,Courier,monospace}.custom-font-picker-option[data-font=Verdana] .custom-font-picker-option-preview{font-family:Verdana,Geneva,sans-serif}.custom-font-picker-option[data-font=Georgia] .custom-font-picker-option-preview{font-family:Georgia,serif}.custom-font-picker-option[data-font=serif] .custom-font-picker-option-preview{font-family:serif}.custom-font-picker-option[data-font=sans-serif] .custom-font-picker-option-preview{font-family:sans-serif}.custom-font-picker-option[data-font=monospace] .custom-font-picker-option-preview{font-family:monospace}.border-picker{position:relative;width:100%;margin:.5em 0}.border-picker-button{width:100%;height:var(--control-h);display:flex;align-items:center;gap:var(--spacing-sm);padding:0 var(--pad-x);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);background:var(--c-bg);color:var(--c-text);cursor:pointer;transition:all var(--transition-base);text-align:left;font-size:var(--font-size);line-height:var(--line-tight)}.border-picker-button:hover{border-color:var(--c-text-secondary);background:var(--c-bg-secondary)}.border-picker-button:focus{outline:none;border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a;background:var(--c-bg)}.border-picker-button[aria-expanded=true]{border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a}.border-picker-btn-canvas{flex-shrink:0;border:1px solid var(--c-bdr);border-radius:3px;background:#fff}.border-picker-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-picker-arrow{margin-left:auto;font-size:.8em;color:var(--c-text-secondary);transition:transform var(--transition-base);flex-shrink:0}.border-picker-button[aria-expanded=true] .border-picker-arrow{transform:rotate(180deg)}.border-picker-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:var(--c-bg);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:none;flex-direction:column;max-height:350px;overflow:hidden}.border-picker-dropdown.open{display:flex}.border-picker-list{overflow-y:auto;overflow-x:hidden;flex:1;padding:var(--spacing-xs) 0}.border-picker-list::-webkit-scrollbar{width:8px}.border-picker-list::-webkit-scrollbar-track{background:var(--c-bg-secondary)}.border-picker-list::-webkit-scrollbar-thumb{background:var(--c-bdr);border-radius:4px}.border-picker-list::-webkit-scrollbar-thumb:hover{background:var(--c-text-secondary)}.border-picker-option{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--pad-x);cursor:pointer;transition:background var(--transition-fast);border:none;background:transparent;width:100%;text-align:left;font-size:var(--font-size);color:var(--c-text);min-height:44px;margin:0;height:auto;box-shadow:none}.border-picker-option:hover,.border-picker-option:focus{background:var(--c-bg-secondary);outline:none;transform:none;box-shadow:none}.border-picker-option.selected{background:#8b68ff1a;font-weight:600}.border-picker-option-canvas{flex-shrink:0;border:1px solid var(--c-bdr);border-radius:3px;background:#fff}.border-picker-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}select#fontFamily option{font-family:inherit}select#fontFamily option[data-font=Arial]{font-family:Arial,sans-serif}select#fontFamily option[data-font=Helvetica]{font-family:Helvetica,Arial,sans-serif}select#fontFamily option[data-font="Times New Roman"]{font-family:Times New Roman,Times,serif}select#fontFamily option[data-font="Courier New"]{font-family:Courier New,Courier,monospace}select#fontFamily option[data-font=Verdana]{font-family:Verdana,Geneva,sans-serif}select#fontFamily option[data-font=Georgia]{font-family:Georgia,serif}select#fontFamily option[data-font=Palatino]{font-family:Palatino,Palatino Linotype,Book Antiqua,serif}select#fontFamily option[data-font=Garamond]{font-family:Garamond,Times New Roman,serif}select#fontFamily option[data-font=Bookman]{font-family:Bookman Old Style,Bookman,serif}select#fontFamily option[data-font="Comic Sans MS"]{font-family:Comic Sans MS,cursive}select#fontFamily option[data-font="Trebuchet MS"]{font-family:Trebuchet MS,Helvetica,sans-serif}select#fontFamily option[data-font="Arial Black"]{font-family:Arial Black,Gadget,sans-serif}select#fontFamily option[data-font=Impact]{font-family:Impact,Charcoal,sans-serif}select#fontFamily option[data-font=Tahoma]{font-family:Tahoma,Geneva,sans-serif}select#fontFamily option[data-font="Lucida Console"]{font-family:Lucida Console,Monaco,monospace}select#fontFamily option[data-font=Monaco]{font-family:Monaco,Courier New,monospace}select#fontFamily option[data-font=Consolas]{font-family:Consolas,Courier New,monospace}select#fontFamily option[data-font=Courier]{font-family:Courier,monospace}select#fontFamily option[data-font=serif]{font-family:serif}select#fontFamily option[data-font=sans-serif]{font-family:sans-serif}select#fontFamily option[data-font=monospace]{font-family:monospace}select#fontFamily option[data-font=Calibri]{font-family:Calibri,Segoe UI,sans-serif}select#fontFamily option[data-font=Cambria]{font-family:Cambria,Georgia,serif}select#fontFamily option[data-font="Century Gothic"]{font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif}select#fontFamily option[data-font="Franklin Gothic"]{font-family:Franklin Gothic Medium,Franklin Gothic,Arial,sans-serif}select#fontFamily option[data-font="Gill Sans"]{font-family:Gill Sans,Gill Sans MT,Calibri,sans-serif}select#fontFamily option[data-font="Lucida Sans"]{font-family:Lucida Sans,Lucida Grande,Lucida Sans Unicode,sans-serif}select#fontFamily option[data-font="Segoe UI"]{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}select#fontFamily option[data-font=Baskerville]{font-family:Baskerville,Baskerville Old Face,Hoefler Text,Garamond,serif}select#fontFamily option[data-font="Century Schoolbook"]{font-family:Century Schoolbook,Century Schoolbook L,Georgia,serif}select#fontFamily option[data-font=Didot]{font-family:Didot,Didot LT STD,Hoefler Text,Garamond,serif}select#fontFamily option[data-font="Andale Mono"]{font-family:Andale Mono,AndaleMono,Courier New,monospace}select#fontFamily option[data-font=Menlo]{font-family:Menlo,Monaco,Courier New,monospace}select#fontFamily option[data-font=Futura]{font-family:Futura,Trebuchet MS,Arial,sans-serif}select#fontFamily option[data-font=Optima]{font-family:Optima,Segoe UI,sans-serif}select#fontFamily option[data-font="Brush Script MT"]{font-family:Brush Script MT,Brush Script Std,cursive}select#fontFamily option[data-font=Copperplate]{font-family:Copperplate,Copperplate Gothic Light,fantasy}select#fontFamily option[data-font="Lucida Handwriting"]{font-family:Lucida Handwriting,Lucida Calligraphy,cursive}select#fontFamily option[data-font="Bradley Hand"]{font-family:Bradley Hand ITC,Bradley Hand,cursive}select#fontFamily option[data-font=Mistral]{font-family:Mistral,Brush Script MT,cursive}select#fontFamily option[data-font="Marker Felt"]{font-family:Marker Felt,Comic Sans MS,fantasy}select#fontFamily option[data-font=Chalkduster]{font-family:Chalkduster,Comic Sans MS,fantasy}select#fontFamily option[data-font="Kristen ITC"]{font-family:Kristen ITC,Comic Sans MS,cursive}select#fontFamily option[data-font="Freestyle Script"]{font-family:Freestyle Script,Brush Script MT,cursive}select#fontFamily option[data-font="French Script MT"]{font-family:French Script MT,Brush Script MT,cursive}select#fontFamily option[data-font="Edwardian Script ITC"]{font-family:Edwardian Script ITC,Lucida Calligraphy,cursive}select#fontFamily option[data-font="Lucida Calligraphy"]{font-family:Lucida Calligraphy,Lucida Handwriting,cursive}select#fontFamily option[data-font=Vivaldi]{font-family:Vivaldi,Edwardian Script ITC,cursive}select#fontFamily option[data-font="Segoe Script"]{font-family:Segoe Script,Brush Script MT,cursive}select#fontFamily option[data-font="Apple Chancery"]{font-family:Apple Chancery,Lucida Calligraphy,cursive}select#fontFamily option[data-font=Zapfino]{font-family:Zapfino,Brush Script MT,cursive}select#fontFamily option[data-font=Papyrus]{font-family:Papyrus,fantasy}textarea{width:100%;max-width:100%;margin:.5em 0;height:auto;min-height:var(--control-h);resize:vertical;line-height:var(--line-body);padding:.5em var(--pad-x);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);background:var(--c-bg);-moz-appearance:none;appearance:none;-webkit-appearance:none;transition:all var(--transition-base);color:var(--c-text)}textarea:hover{border-color:var(--c-text-secondary);background:var(--c-bg-secondary)}textarea:focus{outline:none;border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a;background:var(--c-bg)}button,input[type=button]{height:var(--control-h);width:100%;max-width:100%;margin:.5em 0;padding:0 1.5em;font-weight:500;letter-spacing:.01em;border:none;border-radius:var(--radius);background:var(--btn-primary);color:#fff;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}button:hover:not(:disabled),input[type=button]:hover:not(:disabled){background:var(--btn-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}button:active:not(:disabled),input[type=button]:active:not(:disabled){background:var(--btn-primary-active);transform:translateY(0);box-shadow:var(--shadow-sm)}button:disabled,input[type=button]:disabled{opacity:.6;cursor:not-allowed;transform:none}button:focus,input[type=button]:focus{outline:none;box-shadow:0 0 0 3px #8b68ff4d}.btn-primary{background:var(--btn-primary);font-size:1.1em;padding:.75em 2em;margin-top:var(--spacing-lg)}.btn-primary:hover:not(:disabled){background:var(--btn-primary-hover)}.btn-secondary{background:var(--btn-secondary)}.btn-secondary:hover:not(:disabled){background:var(--btn-secondary-hover)}.btn-danger{background:var(--btn-danger)}.btn-danger:hover:not(:disabled){background:var(--btn-danger-hover)}.advanced-toggle{background:transparent;color:var(--c-text-secondary);font-size:.9em;border:none;padding:.5em 1em;text-decoration:none;cursor:pointer;width:auto;height:auto;margin:var(--spacing-sm) auto;box-shadow:none;transition:color var(--transition-base)}.advanced-toggle:hover{background:transparent;color:var(--c-text);text-decoration:underline;transform:none}label{display:block;text-align:left;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs);font-weight:600;font-size:.9em;color:var(--c-text);letter-spacing:.01em}label:first-of-type{margin-top:0}.options{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:var(--spacing-md);margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:var(--c-bg-secondary);border-radius:var(--radius)}.options label{font-weight:400;flex:0 1 auto;white-space:nowrap;margin-top:0;margin-bottom:0;display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer;padding:var(--spacing-xs);border-radius:4px;transition:background var(--transition-fast)}.options label:hover{background:#8b68ff1a}.options input[type=checkbox]{width:auto;height:auto;margin:0;cursor:pointer;accent-color:var(--btn-primary)}.input-group{display:flex;align-items:center;gap:.5em;margin:.5em 0}.input-group>label{display:inline-flex;margin-top:0;text-align:center;font-weight:400}.input-group .input{flex:1;width:auto;height:var(--control-h);line-height:var(--line-tight);padding-inline:var(--pad-x);padding-block:calc((var(--control-h) - (1em * var(--line-tight)) - (2 * var(--border-w))) / 2);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);background:var(--c-bg);-moz-appearance:none;appearance:none;-webkit-appearance:none}.input-group textarea.input{height:var(--control-h);min-height:var(--control-h);line-height:var(--line-body);padding:.75em var(--pad-x);overflow-y:hidden}.btn.upload-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--control-h);padding:0 1em;background:var(--btn-bg);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;transition:background .2s}.btn.upload-btn:hover{background:var(--btn-bg-hover)}.btn.upload-btn svg{display:block;width:20px;height:20px;fill:currentColor}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}#labelPreview{image-rendering:pixelated;image-rendering:crisp-edges;border:1px solid #bbb;background:#fff}.label-type-selector{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);background:var(--c-bg-secondary);padding:var(--spacing-xs);border-radius:var(--radius)}.label-type-selector .label-type-btn:first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.label-type-selector .label-type-btn:last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.label-type-btn{flex:1;padding:.65em 1em;border:none;border-radius:calc(var(--radius) - 2px);cursor:pointer;transition:all var(--transition-base);background:transparent;color:var(--c-text-secondary);font-weight:500;font-size:.95em;margin:0;height:auto;box-shadow:none}.label-type-btn:hover:not(.active){background:#8b68ff1a;color:var(--c-text)}.label-type-btn.active{background:var(--btn-primary);color:#fff;box-shadow:var(--shadow-sm)}.label-type-btn:focus{outline:none;box-shadow:0 0 0 2px #8b68ff4d}#previewContainer{margin:var(--spacing-md) 0;padding:var(--spacing-lg);background:var(--c-bg-secondary);border:2px dashed var(--c-bdr);border-radius:var(--radius);display:flex;justify-content:flex-start;align-items:center;height:180px;overflow-x:auto;overflow-y:hidden;transition:all var(--transition-base)}#previewContainer:hover{border-color:var(--c-bdr-focus);background:#f0f0f5}#previewContainer::-webkit-scrollbar{height:8px}#previewContainer::-webkit-scrollbar-track{background:var(--c-bg-secondary);border-radius:4px}#previewContainer::-webkit-scrollbar-thumb{background:var(--c-bdr);border-radius:4px}#previewContainer::-webkit-scrollbar-thumb:hover{background:var(--c-text-secondary)}#previewCanvas{width:auto;height:auto;border:1px solid var(--c-bdr);background:#fff;box-shadow:var(--shadow-md);border-radius:4px;display:block;flex-shrink:0}#calibrationPreviewContainer{margin:var(--spacing-md) 0;padding:var(--spacing-lg);background:var(--c-bg-secondary);border:2px dashed var(--c-bdr);border-radius:var(--radius);display:flex;justify-content:center;align-items:center;min-height:150px;transition:all var(--transition-base)}#calibrationPreviewContainer:hover{border-color:var(--c-bdr-focus);background:#f0f0f5}#calibrationPreviewCanvas{max-width:100%;height:auto;border:1px solid var(--c-bdr);background:#fff;box-shadow:var(--shadow-md);border-radius:4px}#imagePreviewContainer{margin:var(--spacing-md) 0;padding:var(--spacing-lg);background:var(--c-bg-secondary);border:2px dashed var(--c-bdr);border-radius:var(--radius);display:flex;justify-content:flex-start;align-items:center;height:180px;overflow-x:auto;overflow-y:hidden;transition:all var(--transition-base);min-height:180px}#imagePreviewContainer:hover{border-color:var(--c-bdr-focus);background:#f0f0f5}#imagePreviewContainer::-webkit-scrollbar{height:8px}#imagePreviewContainer::-webkit-scrollbar-track{background:var(--c-bg-secondary);border-radius:4px}#imagePreviewContainer::-webkit-scrollbar-thumb{background:var(--c-bdr);border-radius:4px}#imagePreviewContainer::-webkit-scrollbar-thumb:hover{background:var(--c-text-secondary)}#imagePreviewCanvas{width:auto;height:auto;border:1px solid var(--c-bdr);background:#fff;box-shadow:var(--shadow-md);border-radius:4px;display:block;flex-shrink:0}input[type=file]{width:100%;margin:.5em 0;padding:.5em;border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);background:var(--c-bg);cursor:pointer;transition:all var(--transition-base)}input[type=file]:hover{border-color:var(--c-text-secondary);background:var(--c-bg-secondary)}input[type=file]:focus{outline:none;border-color:var(--c-bdr-focus);box-shadow:0 0 0 3px #8b68ff1a;background:var(--c-bg)}.connection-avatar-container{position:absolute;top:var(--spacing-xl);right:var(--spacing-xl);z-index:100}.connection-avatar{position:relative;width:48px;height:48px;border-radius:50%;background:var(--c-bg-secondary);border:2px solid var(--c-bdr);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm)}.connection-avatar:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.connection-avatar:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.connection-avatar:focus{outline:none;box-shadow:0 0 0 3px #8b68ff4d}.connection-avatar-icon{font-size:1.5em;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}.connection-printer-type{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75em;font-weight:700;color:var(--c-text);display:none;z-index:1;pointer-events:none;text-shadow:0 1px 2px rgba(255,255,255,.8)}.connection-avatar.connected .connection-printer-type{display:block}.connection-avatar.connected .connection-avatar-icon{display:none}.connection-status-badge{position:absolute;bottom:2px;right:2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--c-bg);display:block;flex-shrink:0}.connection-avatar.disconnected .connection-status-badge{background:var(--status-error)}.connection-avatar.connecting .connection-status-badge{background:var(--status-info);animation:pulse 2s infinite}.connection-avatar.connected .connection-status-badge{background:var(--status-success);animation:pulse 2s infinite}.connection-avatar.disconnected{border-color:#da36334d}.connection-avatar.connecting{border-color:#0969da4d}.connection-avatar.connected{border-color:#1a7f374d}.connection-tooltip{position:absolute;top:calc(100% + 8px);right:0;background:var(--c-bg);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:var(--spacing-sm);min-width:200px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--transition-base);pointer-events:none;z-index:1000}.connection-avatar-container.avatar-connected .connection-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.connection-avatar-container.avatar-disconnected .connection-tooltip,.connection-avatar-container.avatar-connecting .connection-tooltip{opacity:0!important;visibility:hidden!important;pointer-events:none!important}.tooltip-content{display:flex;flex-direction:column;gap:var(--spacing-xs)}.tooltip-item{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}.tooltip-label{font-size:.85em;color:var(--c-text-secondary);font-weight:500}.tooltip-value{font-size:.85em;color:var(--c-text);font-weight:600;font-family:Courier New,monospace;letter-spacing:.5px;text-align:right}.tooltip-disconnect-btn{width:100%;margin-top:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background:var(--btn-danger);color:#fff;border:none;border-radius:calc(var(--radius) - 2px);font-size:.85em;font-weight:500;cursor:pointer;transition:all var(--transition-base);height:auto;box-shadow:var(--shadow-sm)}.tooltip-disconnect-btn:hover{background:var(--btn-danger-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.tooltip-disconnect-btn:active{background:var(--btn-danger-hover);transform:translateY(0);box-shadow:var(--shadow-sm)}.tooltip-disconnect-btn:focus{outline:none;box-shadow:0 0 0 3px #da36334d}.connection-avatar-container.avatar-disconnected .tooltip-disconnect-btn,.connection-avatar-container.avatar-connecting .tooltip-disconnect-btn{display:none}.connection-container{margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:var(--c-bg);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.connection-status{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-sm);border-radius:var(--radius);font-size:.9em;font-weight:500;cursor:pointer;transition:all var(--transition-base);-webkit-user-select:none;user-select:none;border:1px solid transparent}.battery-container{margin-bottom:var(--spacing-md)}.battery-level{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius);font-size:.9em;font-weight:500;background:var(--c-bg-secondary);border:1px solid var(--c-bdr);transition:all var(--transition-base)}.battery-icon{font-size:1.2em;line-height:1}#batteryLevelText{color:var(--c-text);transition:color var(--transition-base)}.device-info-container{margin-bottom:var(--spacing-md);background:var(--c-bg-secondary);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);padding:var(--spacing-md);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.device-info-header{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:var(--border-w) solid var(--c-bdr)}.device-info-icon{font-size:1.3em;line-height:1}.device-info-title{font-size:1em;font-weight:600;color:var(--c-text)}.device-info-content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.device-info-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--c-bg);border-radius:calc(var(--radius) - 2px);border:var(--border-w) solid var(--c-bdr);transition:all var(--transition-base)}.device-info-item:hover{border-color:var(--c-bdr-focus);box-shadow:var(--shadow-sm)}.device-info-label{font-size:.9em;color:var(--c-text-secondary);font-weight:500}.device-info-value{font-size:.95em;color:var(--c-text);font-weight:600;font-family:Courier New,monospace;letter-spacing:.5px;text-align:right}.device-info-container-compact{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;transition:all var(--transition-base);border-top:var(--border-w) solid var(--c-bdr);padding-top:var(--spacing-sm);margin-top:var(--spacing-sm)}.device-info-content-compact{display:flex;flex-direction:row;gap:var(--spacing-md);justify-content:center;align-items:center;flex-wrap:wrap}.device-info-item-compact{display:flex;align-items:center;gap:var(--spacing-sm);padding:0;background:transparent;border:none}.device-info-label-compact{font-size:.9em;color:var(--c-text-secondary);font-weight:500}.device-info-value-compact{font-size:.95em;color:var(--c-text);font-weight:600;font-family:Courier New,monospace;letter-spacing:.5px}.connection-status:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.connection-status:active{transform:translateY(0)}.connection-status.disconnected{background:#da36331a;color:var(--status-error);border-color:#da363333}.connection-status.disconnected:hover{background:#da363326;border-color:#da36334d}.connection-status.connecting{background:#0969da1a;color:var(--status-info);cursor:wait;border-color:#0969da33}.connection-status.connecting:hover{transform:none;box-shadow:none}.connection-status.connected{background:#1a7f371a;color:var(--status-success);cursor:default;border-color:#1a7f3733}.connection-status.connected:hover{transform:none;box-shadow:none}.connection-status:focus{outline:none;box-shadow:0 0 0 3px #8b68ff33}.connection-status-icon{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.connection-status.disconnected .connection-status-icon{background:var(--status-error)}.connection-status.connecting .connection-status-icon{background:var(--status-info);animation:pulse 2s infinite}.connection-status.connected .connection-status-icon{background:var(--status-success)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.btn-loading{position:relative;color:transparent!important;pointer-events:none}.btn-loading:after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#advancedSection{margin-top:var(--spacing-lg);padding:var(--spacing-md);background:var(--c-bg-secondary);border-radius:var(--radius);border:1px solid var(--c-bdr)}#logOutput{text-align:left;background:#1e1e1e;color:#d4d4d4;padding:var(--spacing-md);margin-top:var(--spacing-md);height:150px;overflow:auto;border-radius:var(--radius);font-family:Consolas,Monaco,Courier New,monospace;font-size:.85em;line-height:1.5}#logOutput::-webkit-scrollbar{width:8px}#logOutput::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}#logOutput::-webkit-scrollbar-thumb{background:#555;border-radius:4px}#logOutput::-webkit-scrollbar-thumb:hover{background:#666}.work-in-progress{padding:var(--spacing-lg);text-align:center;color:var(--c-text-secondary);background:var(--c-bg-secondary);border-radius:var(--radius);border:1px dashed var(--c-bdr);font-style:italic}@media (max-width: 640px){body{padding:var(--spacing-sm)}.container{padding:var(--spacing-md);max-width:100%}h1{font-size:1.75rem}.label-type-selector{flex-wrap:nowrap;gap:calc(var(--spacing-xs) / 2)}.label-type-btn{min-width:0;flex:1;font-size:.85em;padding:.5em}.options{flex-direction:column;align-items:flex-start}.options label{width:100%}button,input[type=button]{padding:.75em 1em}#previewContainer{padding:var(--spacing-md);height:180px}.font-size-control{flex-wrap:wrap}.font-size-input-group{width:100%;order:3}.font-size-btn{order:1}#fontSizeIncrease{order:2}.font-size-presets{gap:var(--spacing-xs)}.font-size-preset{font-size:.8em;padding:.4em .8em}.custom-font-picker-dropdown{max-height:50vh}.custom-font-picker-option{min-height:calc(var(--control-h) + 8px);padding:var(--spacing-md) var(--pad-x)}.connection-avatar-container{top:var(--spacing-md);right:var(--spacing-md)}.connection-avatar{width:56px;height:56px}.connection-avatar-icon{font-size:1.75em}.connection-status-badge{width:16px;height:16px}.connection-tooltip{right:0;min-width:180px}.connection-printer-type{font-size:.65em}}@media (max-width: 480px){.label-type-btn{min-width:0;flex:1;font-size:.8em;padding:.45em .4em}.label-type-selector{gap:calc(var(--spacing-xs) / 3)}}.font-size-control{display:flex;align-items:center;gap:var(--spacing-sm);margin:.5em 0}.font-size-btn{width:var(--control-h);height:var(--control-h);min-width:var(--control-h);padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.5em;font-weight:600;line-height:1;background:var(--c-bg);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);color:var(--c-text);cursor:pointer;transition:all var(--transition-base);flex-shrink:0;box-shadow:var(--shadow-sm)}.font-size-btn:hover:not(:disabled){background:var(--btn-primary);color:#fff;border-color:var(--btn-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.font-size-btn:active:not(:disabled){background:var(--btn-primary-active);transform:translateY(0);box-shadow:var(--shadow-sm)}.font-size-btn:focus{outline:none;box-shadow:0 0 0 3px #8b68ff4d}.font-size-btn:disabled{opacity:.5;cursor:not-allowed}.font-size-input-group{flex:1;display:flex;align-items:center;gap:var(--spacing-sm)}.font-size-input-group input[type=range]{flex:1;height:var(--control-h);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;padding:0}.font-size-input-group input[type=range]::-webkit-slider-track{width:100%;height:8px;background:#d0d7de;border:1px solid #b1bac4;border-radius:4px;transition:all var(--transition-base);box-shadow:inset 0 1px 2px #0000001a}.font-size-input-group input[type=range]{background:#d0d7de;border-radius:4px}.font-size-input-group input[type=range]:hover::-webkit-slider-track{background:#b1bac4;border-color:#8b949e}.font-size-input-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--btn-primary);border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003;transition:all var(--transition-base);margin-top:-7px;position:relative}.font-size-input-group input[type=range]::-webkit-slider-thumb:hover{background:var(--btn-primary-hover);transform:scale(1.15);box-shadow:0 3px 6px #0000004d}.font-size-input-group input[type=range]::-moz-range-track{width:100%;height:8px;background:#d0d7de;border:1px solid #b1bac4;border-radius:4px;transition:all var(--transition-base);box-shadow:inset 0 1px 2px #0000001a}.font-size-input-group input[type=range]:hover::-moz-range-track{background:#b1bac4;border-color:#8b949e}.font-size-input-group input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--btn-primary);border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003;transition:all var(--transition-base)}.font-size-input-group input[type=range]::-moz-range-thumb:hover{background:var(--btn-primary-hover);transform:scale(1.15);box-shadow:0 3px 6px #0000004d}.font-size-input-group input[type=range]:focus{outline:none}.font-size-input-group input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #8b68ff4d}.font-size-input-group input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 3px #8b68ff4d}.font-size-input-group input[type=number]{width:80px;flex-shrink:0;margin:0;text-align:center;font-weight:600}.font-size-presets{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm);margin-bottom:var(--spacing-md);justify-content:center;flex-wrap:wrap}.font-size-preset{padding:.5em 1em;margin:0;font-size:.85em;font-weight:500;background:var(--c-bg-secondary);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);color:var(--c-text-secondary);cursor:pointer;transition:all var(--transition-base);height:auto;width:auto;box-shadow:none}.font-size-preset:hover{background:#8b68ff1a;color:var(--c-text);border-color:var(--btn-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.font-size-preset:active{background:var(--btn-primary);color:#fff;border-color:var(--btn-primary);transform:translateY(0)}.font-size-preset:focus{outline:none;box-shadow:0 0 0 3px #8b68ff4d}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*:focus-visible{outline:2px solid var(--c-bdr-focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.shop-header{padding:var(--spacing-md);background:var(--c-bg-secondary);border-radius:var(--radius);margin-bottom:var(--spacing-lg);border:var(--border-w) solid var(--c-bdr)}.shop-currency{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.1em;font-weight:600;color:var(--c-text)}.currency-icon{font-size:1.3em}.shop-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.shop-item{display:flex;flex-direction:column;padding:var(--spacing-md);background:var(--c-bg);border:var(--border-w) solid var(--c-bdr);border-radius:var(--radius);transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.shop-item:hover{border-color:var(--c-bdr-focus);box-shadow:var(--shadow-md);transform:translateY(-2px)}.shop-item-image{width:100%;height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-sm);background:var(--c-bg-secondary);border-radius:calc(var(--radius) - 2px);overflow:hidden;position:relative}.shop-item-image img{width:100%;height:100%;object-fit:contain;padding:var(--spacing-sm)}.shop-item-icon{font-size:2.5em;text-align:center;margin-bottom:var(--spacing-sm);display:flex;align-items:center;justify-content:center;width:100%;height:100%}.shop-item-info{flex:1;margin-bottom:var(--spacing-sm)}.shop-item-name{font-size:1.1em;font-weight:600;color:var(--c-text);margin-bottom:var(--spacing-xs)}.shop-item-description{font-size:.9em;color:var(--c-text-secondary);line-height:1.4;margin-bottom:var(--spacing-xs)}.shop-item-quantity{font-size:.85em;color:var(--status-success);font-weight:500;margin-top:var(--spacing-xs)}.shop-item-price{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--c-bg-secondary);border-radius:calc(var(--radius) - 2px);margin-bottom:var(--spacing-sm);font-weight:600;color:var(--c-text)}.price-amount{font-size:1.2em}.price-icon{font-size:1.1em}.shop-item-button{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--btn-primary);color:#fff;border:none;border-radius:calc(var(--radius) - 2px);font-weight:600;cursor:pointer;transition:all var(--transition-base);margin:0;height:auto;box-shadow:var(--shadow-sm);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.shop-item-button:hover{background:var(--btn-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px);color:#fff;text-decoration:none}.shop-item-button:active{background:var(--btn-primary-active);transform:translateY(0);color:#fff;text-decoration:none}.inventory-section{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--c-bg-secondary);border-radius:var(--radius);border:var(--border-w) solid var(--c-bdr)}.inventory-section-group{margin-bottom:var(--spacing-md)}.inventory-section-group:last-child{margin-bottom:0}.inventory-section-group h3{font-size:1em;font-weight:600;color:var(--c-text);margin-bottom:var(--spacing-sm)}.inventory-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-sm)}.inventory-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--c-bg);border:var(--border-w) solid var(--c-bdr);border-radius:calc(var(--radius) - 2px);transition:all var(--transition-base)}.inventory-item:hover{border-color:var(--c-bdr-focus);box-shadow:var(--shadow-sm)}.inventory-item-icon{font-size:1.5em;flex-shrink:0}.inventory-item-name{flex:1;font-weight:500;color:var(--c-text)}.inventory-item-quantity{font-size:.9em;color:var(--c-text-secondary);font-weight:600}.inventory-empty{padding:var(--spacing-lg);text-align:center;color:var(--c-text-secondary);font-style:italic;background:var(--c-bg);border-radius:calc(var(--radius) - 2px);border:1px dashed var(--c-bdr)}@media (max-width: 640px){.shop-header{flex-direction:column;gap:var(--spacing-sm);align-items:stretch}.shop-items,.inventory-items{grid-template-columns:1fr}}.webbluetooth-unsupported-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--spacing-lg)}.webbluetooth-unsupported-overlay[hidden]{display:none}.webbluetooth-unsupported-modal{background:var(--c-bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:420px;width:100%;padding:var(--spacing-xl);text-align:left}.webbluetooth-unsupported-icon{text-align:center;margin-bottom:var(--spacing-md)}.webbluetooth-unsupported-icon svg{display:inline-block;vertical-align:middle}.webbluetooth-unsupported-title{margin:0 0 var(--spacing-md);font-size:1.25rem;color:var(--c-text)}.webbluetooth-unsupported-desc{margin:0 0 var(--spacing-md);color:var(--c-text-secondary);line-height:var(--line-body)}.webbluetooth-unsupported-sub{margin:0 0 var(--spacing-xs);font-weight:600;color:var(--c-text);font-size:.95rem}.webbluetooth-unsupported-list{margin:0 0 var(--spacing-lg);padding-left:1.25em;color:var(--c-text-secondary);line-height:1.6}.webbluetooth-unsupported-list li{margin-bottom:var(--spacing-xs)}.webbluetooth-unsupported-actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap;align-items:stretch}.webbluetooth-unsupported-actions .webbluetooth-unsupported-try,.webbluetooth-unsupported-actions .webbluetooth-unsupported-close{flex:1;min-width:120px;min-height:var(--control-h);margin:0;align-items:center;justify-content:center}