:root{--color-bg-primary: #1e1e2e;--color-bg-secondary: #282840;--color-bg-input: #1a1a2e;--color-text-primary: #cdd6f4;--color-text-secondary: #a6adc8;--color-accent: #89b4fa;--color-success: #a6e3a1;--color-warning: #f9e2af;--color-error: #f38ba8;--color-border: #45475a;--color-escape: #f9e2af;--color-address: #89b4fa;--color-hex-value: #cba6f7;--color-ascii: #a6e3a1;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;--font-size-xs: .7rem;--font-size-sm: .8rem;--font-size-base: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--line-height-base: 1.5;--line-height-mono: 1.6;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .35);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--z-resize-handle: 10;--z-overlay: 100;--z-dialog: 9999}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background-color:var(--color-bg-primary);overflow:hidden}button{cursor:pointer;font:inherit;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.5}select,input{font:inherit;color:inherit}ul,ol{list-style:none}.monospace{font-family:var(--font-mono)}#app{display:flex;flex-direction:column;height:100vh;min-width:1024px;overflow:hidden}.app-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,#282840f2,#1e1e2efa);border-bottom:1px solid rgba(137,180,250,.12);border-radius:var(--border-radius-md);margin:var(--spacing-sm) var(--spacing-sm) 0;box-shadow:var(--shadow-sm);flex-shrink:0}.app-header__title{font-size:1.1rem;font-weight:600;color:var(--color-accent);letter-spacing:.05em}.app-main{display:flex;flex-direction:column;flex:1;overflow:hidden;gap:var(--spacing-sm);padding:var(--spacing-sm)}.app-main__resize-handle{height:8px;cursor:row-resize;background-color:var(--color-bg-secondary);border-radius:4px;flex-shrink:0;position:relative;transition:background-color var(--transition-fast)}.app-main__resize-handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:4px;border-radius:2px;background:repeating-linear-gradient(to right,var(--color-border) 0px,var(--color-border) 3px,transparent 3px,transparent 6px);transition:background var(--transition-fast)}.app-main__resize-handle:hover,.app-main__resize-handle:active{background-color:#89b4fa14}.app-main__resize-handle:hover:after,.app-main__resize-handle:active:after{background:repeating-linear-gradient(to right,var(--color-accent) 0px,var(--color-accent) 3px,transparent 3px,transparent 6px)}.panel{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);flex-shrink:0}.panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);background:linear-gradient(135deg,rgba(40,40,64,.6),transparent);border-bottom:1px solid rgba(69,71,90,.5)}.panel__title{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}.panel__actions{display:flex;align-items:center;gap:var(--spacing-sm)}.form-select{appearance:none;background-color:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-md);padding-right:calc(var(--spacing-md) + 1rem);color:var(--color-text-primary);font-size:var(--font-size-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a6adc8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;cursor:pointer;transition:border-color var(--transition-fast)}.form-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.form-select:disabled{cursor:not-allowed;opacity:.5}.form-input{background-color:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-text-primary);font-size:var(--font-size-sm);transition:border-color var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.form-input.is-invalid{border-color:var(--color-error)}.btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:500;transition:background-color var(--transition-fast),opacity var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:active:not(:disabled){transform:translateY(0);box-shadow:none}.btn--primary{background:linear-gradient(135deg,#89b4fa,#74c7ec);color:var(--color-bg-primary)}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#74a8f8,#63bce0)}.btn--success{background:linear-gradient(135deg,#a6e3a1,#94e2d5);color:var(--color-bg-primary)}.btn--success:hover:not(:disabled){background:linear-gradient(135deg,#8fd48a,#80d6c8)}.btn--danger{background:linear-gradient(135deg,#f38ba8,#eba0ac);color:var(--color-bg-primary)}.btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#f07090,#e58e9a)}.btn--ghost{background-color:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn--ghost:hover:not(:disabled){color:var(--color-text-primary);border-color:var(--color-text-secondary)}.btn--icon{padding:var(--spacing-xs);background-color:transparent;color:var(--color-text-secondary);border-radius:var(--border-radius-sm)}.btn--icon:hover:not(:disabled){color:var(--color-text-primary);background-color:var(--color-bg-input)}.btn--icon:focus-visible{outline-offset:0}*:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}button:focus-visible{outline-offset:1px}*:focus:not(:focus-visible){outline:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.unsupported-dialog{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background-color:#000c;z-index:9999}.unsupported-dialog__box{background-color:var(--color-bg-secondary);border:1px solid var(--color-error);border-radius:var(--border-radius-md);padding:var(--spacing-xl);max-width:480px;text-align:center}.unsupported-dialog__title{font-size:1.2rem;font-weight:600;color:var(--color-error);margin-bottom:var(--spacing-md)}.unsupported-dialog__message{color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--spacing-md)}.unsupported-dialog__browsers{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.unsupported-dialog__browsers a{color:var(--color-accent)}.status-bar{display:flex;align-items:center;gap:var(--spacing-sm);margin-left:auto;font-size:var(--font-size-sm)}.status-bar__badge{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.status-bar__badge-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-bar__badge--disconnected{background-color:#a6adc81a;color:var(--color-text-secondary);border:1px solid rgba(166,173,200,.2)}.status-bar__badge--disconnected .status-bar__badge-dot{background-color:var(--color-text-secondary)}.status-bar__badge--connected{background-color:#a6e3a126;color:var(--color-success);border:1px solid rgba(166,227,161,.3)}.status-bar__badge--connected .status-bar__badge-dot{background-color:var(--color-success);box-shadow:0 0 6px var(--color-success);animation:status-pulse 2s ease-in-out infinite}@keyframes status-pulse{0%,to{box-shadow:0 0 4px var(--color-success)}50%{box-shadow:0 0 10px var(--color-success)}}.status-bar__badge--error{background-color:#f38ba826;color:var(--color-error);border:1px solid rgba(243,139,168,.3)}.status-bar__badge--error .status-bar__badge-dot{background-color:var(--color-error);box-shadow:0 0 6px var(--color-error)}.status-bar__detail{color:var(--color-text-secondary);max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-xs)}.connection-panel{padding:var(--spacing-sm) var(--spacing-md)}.connection-panel__row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--spacing-sm)}.connection-panel__field{display:flex;flex-direction:column;gap:2px}.connection-panel__field-label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.connection-panel__port-btn{align-self:flex-end}.connection-panel__port-btn--selected{color:var(--color-success);border-color:var(--color-success)}.connection-panel__baud-custom{width:100px}.connection-panel__connect-btn,.connection-panel__disconnect-btn{align-self:flex-end;min-width:64px}.receive-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm)}.receive-panel__body{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}.receive-panel__pane{overflow:hidden;min-width:0}.receive-panel__pane--text{border-right:1px solid var(--color-border);overflow:auto}.receive-panel__pane--hex{display:flex;flex-direction:column}.receive-panel__text-view{padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-mono);font-size:var(--font-size-sm);line-height:var(--line-height-mono);white-space:pre-wrap;word-break:break-all;tab-size:4;user-select:text}.receive-panel__escape{color:var(--color-escape)}.receive-panel__resize-handle{width:8px;cursor:col-resize;background-color:var(--color-bg-secondary);flex-shrink:0;z-index:var(--z-resize-handle);position:relative;transition:background-color var(--transition-fast)}.receive-panel__resize-handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:32px;border-radius:2px;background:repeating-linear-gradient(to bottom,var(--color-border) 0px,var(--color-border) 3px,transparent 3px,transparent 6px);transition:background var(--transition-fast)}.receive-panel__resize-handle:hover,.receive-panel__resize-handle:active{background-color:#89b4fa14}.receive-panel__resize-handle:hover:after,.receive-panel__resize-handle:active:after{background:repeating-linear-gradient(to bottom,var(--color-accent) 0px,var(--color-accent) 3px,transparent 3px,transparent 6px)}.receive-panel__hex-header{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-md);font-family:var(--font-mono);font-size:var(--font-size-sm);line-height:20px;white-space:pre;width:max-content;min-width:100%;color:var(--color-text-secondary);background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);flex-shrink:0;user-select:none}.receive-panel__hex-container{overflow:auto;flex:1;min-height:0}.receive-panel__hex-content{position:relative;width:100%}.receive-panel__hex-row{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-md);font-family:var(--font-mono);font-size:var(--font-size-sm);line-height:20px;white-space:pre;width:max-content;min-width:100%;user-select:text}.receive-panel__hex-addr{color:var(--color-address);flex-shrink:0}.receive-panel__hex-bytes{color:var(--color-text-primary);flex-shrink:0}.receive-panel__hex-ascii{color:var(--color-ascii);flex-shrink:0}.send-panel{flex-shrink:0}.send-panel__input-row{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);align-items:stretch}.send-panel__input{flex:1;resize:none;min-height:34px;padding:var(--spacing-xs) var(--spacing-sm);font-family:var(--font-mono);font-size:var(--font-size-sm);line-height:var(--line-height-mono);background-color:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);color:var(--color-text-primary);transition:border-color var(--transition-fast)}.send-panel__input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.send-panel__input:disabled{opacity:.5;cursor:not-allowed}.send-panel__input.is-invalid{border-color:var(--color-error);box-shadow:0 0 0 1px var(--color-error)}.send-panel__send-btn{min-width:64px;flex-shrink:0}.send-panel__clear-label{display:flex;align-items:center;gap:4px;font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;cursor:pointer;user-select:none}.send-panel__format-btn{min-width:80px;text-align:center}.send-panel__format-btn--hex{color:var(--color-accent);border-color:var(--color-accent)}.send-panel__warning{color:var(--color-error);font-size:var(--font-size-xs);align-self:center}.send-panel__field{display:flex;flex-direction:column;gap:2px}.send-panel__field-label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.send-history{flex-shrink:0}.send-history__toggle{font-size:.65rem}.send-history__list{height:140px;overflow-y:auto}.send-history__list[hidden]{display:block;height:0;opacity:0;overflow:hidden;pointer-events:none}.send-history__empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-text-secondary);font-size:var(--font-size-sm);opacity:.5}.send-history__entry{display:flex;gap:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-md);cursor:pointer;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);line-height:var(--line-height-mono);transition:background-color var(--transition-fast)}.send-history__entry:hover,.send-history__entry:focus-visible{background-color:var(--color-bg-input);outline:none}.send-history__ts{color:var(--color-text-secondary);flex-shrink:0}.send-history__text{color:var(--color-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.send-history__hex{color:var(--color-hex-value);flex-shrink:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.send-history__bytes{color:var(--color-text-secondary);flex-shrink:0;min-width:48px;text-align:right}