*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;margin-block-start:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}#root{background-color:#1e1e1e}:root{--bg: #EEEEEE;--surface: #FFFFFF;--surface-alt: #F5F5F5;--border: #E0E0E0;--primary: #4CAF50;--primary-hover: #43A047;--accent: #FFC107;--blue: #2196F3;--red: #E53935;--text: #212121;--text-dim: #757575;--text-light: #9E9E9E;--radius-lg: 10px;--radius-md: 0px;--radius-sm: 4px;--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-stack);-webkit-font-smoothing:antialiased;overflow:hidden}.fade-in{animation:fadeIn .35s ease forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.app-layout{display:flex;height:100vh;justify-content:space-between;gap:0}.app-container{display:flex;flex-direction:column;height:100vh;max-width:1093px;margin:0;flex:1}.app-header{padding:10px 20px;display:flex;justify-content:space-between;align-items:center;background:var(--surface);border-bottom:1px solid var(--border);z-index:100}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:34px;height:34px;background:#e8f5e9;border-radius:var(--radius-sm);display:none;align-items:center;justify-content:center}.brand h1{font-size:1.15rem;font-weight:700;margin:0;letter-spacing:-.3px;color:var(--text)}.user-pill{padding:6px 14px;border-radius:100px;background:var(--surface-alt);border:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-dim)}.status-dot-sm{width:8px;height:8px;border-radius:50%;display:inline-block}.main-stage{flex:1;overflow-y:auto;padding:16px 20px 40px;display:flex;flex-direction:column;gap:16px}.main-stage::-webkit-scrollbar{width:5px}.main-stage::-webkit-scrollbar-track{background:transparent}.main-stage::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.connection-panel{background:var(--surface);padding:28px 24px}.panel-row{display:flex;align-items:stretch;gap:0}.panel-card{flex:1}.panel-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);margin:0 0 10px;font-weight:600}.code-block{display:flex;align-items:center;justify-content:space-between;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:.5px 16px;cursor:pointer;transition:border-color .2s}.code-block:hover{border-color:var(--primary)}.code-digits{font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:4px;color:var(--text)}.copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--primary);cursor:pointer;font-size:.8rem;font-weight:600}.panel-hint{margin:8px 0 0;font-size:.78rem;color:var(--text-light)}.panel-divider{display:flex;align-items:center;justify-content:center;width:60px;flex-shrink:0}.panel-divider span{font-size:.8rem;color:var(--text-light);text-transform:uppercase;font-weight:600}.code-input-row{display:flex;gap:10px}.code-input-row input{flex:1;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;font-size:1.05rem;color:var(--text);outline:none;transition:border-color .2s;letter-spacing:2px;font-variant-numeric:tabular-nums}.code-input-row input:focus{border-color:var(--primary)}.connect-btn{background:var(--primary);color:#fff;border:none;padding:0 20px;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:background .2s;min-height:44px}.connect-btn:hover{background:var(--primary-hover)}.connect-btn:disabled{opacity:.6;cursor:not-allowed}.connecting-indicator{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:16px;color:var(--text-dim);font-size:.85rem}.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}.connected-banner{display:flex;align-items:center;justify-content:space-between;background:#e8f5e9;border:1px solid #C8E6C9;border-radius:var(--radius-md);padding:10px 16px}.banner-left{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#2e7d32}.lan-badge{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--blue);background:#e3f2fd;border:1px solid #BBDEFB;padding:4px 10px;border-radius:100px;font-weight:600}.dashboard{display:flex;flex-direction:column;flex:1;gap:16px;min-height:0}.upload-area{display:flex;flex-direction:column;align-items:center;gap:6px}.upload-zone{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius-lg);cursor:pointer;color:var(--text-dim);font-weight:600;font-size:.95rem;transition:border-color .2s,color .2s}.upload-zone:hover{border-color:var(--primary);color:var(--primary)}.upload-label{pointer-events:none}.queue-hint{margin:0;font-size:.78rem;color:var(--text-light)}.section{margin-bottom:0}.section.grow{flex:1;display:flex;flex-direction:column;min-height:0}.section-title{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;margin:0 0 8px 2px;font-weight:600}.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}.file-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.file-icon{color:var(--accent);flex-shrink:0}.file-info{flex:1;overflow:hidden}.file-info .name{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}.file-info .meta{font-size:.72rem;color:var(--text-light)}.icon-btn-sm{background:transparent;border:none;cursor:pointer;color:var(--text-light);padding:4px;border-radius:var(--radius-sm)}.icon-btn-sm:hover{background:#f0f0f0;color:var(--red)}.transfers-list{display:flex;flex-direction:column;gap:8px}.transfer-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.direction-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.direction-icon.up{background:#fff3e0;color:#ef6c00}.direction-icon.down{background:#e8f5e9;color:var(--primary)}.transfer-details{flex:1;min-width:0}.transfer-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}.transfer-top .name{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;color:var(--text)}.transfer-top .speed{font-size:.75rem;color:var(--text-dim);flex-shrink:0;margin-left:8px}.progress-track{width:100%;height:5px;background:var(--bg);border-radius:3px;overflow:hidden;margin-bottom:5px}.progress-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .25s ease}.transfer-btm{display:flex;gap:10px;font-size:.72rem;color:var(--text-light)}.text-btn{background:none;border:none;cursor:pointer;font-size:.72rem;padding:0;font-weight:600}.text-btn.cancel{color:var(--red)}.history-list{flex:1;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.empty-state{padding:36px 20px;text-align:center;color:var(--text-light);font-size:.88rem}.history-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bg)}.history-item:last-child{border-bottom:none}.history-icon{width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.history-icon.sent{background:#fff3e0;color:#ef6c00}.history-icon.received{background:#e8f5e9;color:var(--primary)}.file-data{flex:1;min-width:0}.filename{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}.subtext{font-size:.75rem;color:var(--text-light);display:flex;align-items:center;gap:6px}.sep{color:var(--text-light)}.tag{font-size:.65rem;padding:2px 6px;border-radius:var(--radius-sm);text-transform:uppercase;font-weight:700}.tag.sent{background:#fff3e0;color:#ef6c00}.tag.received{background:#e8f5e9;color:#2e7d32}.app-footer{text-align:center;padding:10px 0;font-size:.7rem;color:var(--text-light)}.changelog-sidebar{width:320px;height:100vh;background:#1e1e1e;border-left:1px solid #333333;padding:16px;overflow-y:auto;display:flex;flex-direction:column;flex-shrink:0}.changelog-sidebar::-webkit-scrollbar{width:5px}.changelog-sidebar::-webkit-scrollbar-track{background:transparent}.changelog-sidebar::-webkit-scrollbar-thumb{background:var(--text-light);border-radius:3px}.changelog-header{margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #333333}.changelog-header h2{font-size:1.1rem;font-weight:700;margin:0;color:#fff}.changelog-content{display:flex;flex-direction:column;gap:16px}.changelog-section{padding:12px;background:#2a2a2a;border-radius:0;border:1px solid #333333}.changelog-version{font-size:.9rem;font-weight:700;color:var(--primary);margin-bottom:4px}.changelog-date{font-size:.72rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.changelog-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.changelog-items li{font-size:.8rem;color:var(--text-dim);padding-left:16px;position:relative}.changelog-items li:before{content:"•";position:absolute;left:4px;color:var(--primary);font-weight:700}.toast-custom{background:var(--surface);color:var(--text);padding:10px 20px;border-radius:100px;position:fixed;top:24px;left:50%;transform:translate(-50%) translateY(-14px);z-index:1000;opacity:0;transition:all .3s ease;box-shadow:0 4px 20px #0000001f;font-size:.85rem;font-weight:500;border:1px solid var(--border);pointer-events:none}.toast-custom.show{opacity:1;transform:translate(-50%) translateY(0)}.app-container.dark-mode{--bg: #121212;--surface: #1E1E1E;--surface-alt: #2A2A2A;--border: #333333;--primary: #66BB6A;--primary-hover: #81C784;--accent: #FFB74D;--blue: #64B5F6;--red: #EF5350;--text: #FFFFFF;--text-dim: #B0B0B0;--text-light: #808080}.app-container.dark-mode body{background:var(--bg);color:var(--text)}.app-container.dark-mode .brand-icon{background:#1b3a1b}.app-container.dark-mode .tag.sent{background:#320;color:#ffb74d}.app-container.dark-mode .tag.received{background:#1b3a1b;color:#81c784}@media(max-width:768px){.app-layout{flex-direction:column}.app-container{max-width:100%}.changelog-sidebar{display:none}.app-header{padding:8px 14px}.brand h1{font-size:1rem}.main-stage{padding:10px 12px 30px}.panel-row{flex-direction:column;gap:0}.panel-divider{width:100%;padding:12px 0}.connection-panel{padding:20px 16px}.code-digits{font-size:1.5rem}.code-input-row{flex-direction:column}.connect-btn{width:100%;justify-content:center}.file-grid{grid-template-columns:1fr}}