*{margin:0;padding:0;box-sizing:border-box}:root{--win7-blue-light: #3a6ea5;--win7-blue-mid: #2e5f9e;--win7-blue-dark: #1a4478;--win7-blue-alt: #2f6198;--win7-blue-border: #0d2847;--win7-gray-light: #2a2a2a;--win7-gray-mid: #1f1f1f;--win7-gray-dark: #3a3a3a;--win7-gray-border: #4a4a4a;--win7-selection: #1e4d7a;--win7-selection-gradient: linear-gradient(to bottom, #1e4d7a 0%, #163a5f 100%);--win7-hover: #2a3f5f;--win7-white: #2a2a2a;--win7-bg: #1a1a1a;--win7-text: #e0e0e0;--win7-text-dim: #999999;--win7-panel-bg: #252525;--win7-panel-header-gradient: linear-gradient(to bottom, #2f2f2f 0%, var(--win7-gray-mid) 100%)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:11px;background:var(--win7-bg);color:var(--win7-text);overflow:hidden;margin:0}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-track{background:#1a1a1a;border-left:1px solid #3a3a3a}::-webkit-scrollbar-thumb{background:linear-gradient(to right,#3a3a3a,#4a4a4a,#3a3a3a);border:1px solid #2a2a2a}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to right,#4a4a4a,#5a5a5a,#4a4a4a)}::-webkit-scrollbar-button{background:linear-gradient(to bottom,#2a2a2a,#1f1f1f);border:1px solid #3a3a3a;height:16px}::-webkit-scrollbar-button:hover{background:linear-gradient(to bottom,#3a3a3a,#2f2f2f)}.panel{display:flex;flex-direction:column;background:var(--win7-panel-bg);border:1px solid var(--win7-gray-dark);box-shadow:inset 0 0 1px #ffffff0d}.panel-header{background:var(--win7-panel-header-gradient);border-bottom:1px solid var(--win7-gray-dark);padding:4px 8px;font-weight:600;font-size:11px;color:var(--win7-text);-webkit-user-select:none;user-select:none}.panel-body{padding:8px;flex:1;overflow:auto}button{font-family:Segoe UI,Tahoma,sans-serif;font-size:11px}.win7-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:linear-gradient(to bottom,#3a3a3a 0%,var(--win7-gray-mid) 100%);border:1px solid #4a4a4a;border-radius:2px;color:var(--win7-text);font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:22px;transition:all .15s ease}.win7-btn:hover:not(:disabled){background:linear-gradient(to bottom,#3a3a3a,#2a3f5f);border-color:#3c7fb1}.win7-btn:active:not(:disabled){background:linear-gradient(to bottom,#2a3f5f,#1e4d7a);border-color:#2a5f8f}.win7-btn.active{background:linear-gradient(to bottom,#1e4d7a,#163a5f);border-color:#3a6ea5;box-shadow:inset 0 1px 3px #00000080}.win7-btn:disabled{color:#666;cursor:not-allowed;opacity:.6}.win7-btn-primary{background:linear-gradient(to bottom,var(--win7-blue-light) 0%,var(--win7-blue-mid) 100%);border-color:var(--win7-blue-border)}.win7-btn-primary:hover:not(:disabled){background:linear-gradient(to bottom,#4a7eb5 0%,var(--win7-blue-light) 100%);border-color:#3c7fb1}.win7-btn svg{width:14px;height:14px}.win7-btn-large{min-height:auto;padding:16px 20px;font-size:13px;line-height:1.4;cursor:pointer;position:relative;overflow:hidden}.win7-btn-large:hover:not(:disabled){background:linear-gradient(to bottom,#3a3a3a,#2a3f5f);border-color:#3c7fb1;box-shadow:0 0 8px #3c7fb14d}.win7-btn-large:active:not(:disabled){background:linear-gradient(to bottom,#2a3f5f,#1e4d7a);border-color:#2a5f8f;box-shadow:inset 0 1px 4px #0006;transform:translateY(1px)}input,textarea,select{font-family:Segoe UI,Tahoma,sans-serif;font-size:11px;background:#1f1f1f;color:var(--win7-text);border:1px solid #4a4a4a;padding:3px 6px;border-radius:2px}input:focus,textarea:focus,select:focus{outline:none;border-color:#39f;box-shadow:inset 0 0 2px #3399ff4d}.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.form-label{font-size:11px;font-weight:600;color:var(--win7-text)}.form-input{padding:4px 6px;border:1px solid #4a4a4a;background:#1f1f1f;color:var(--win7-text);font-size:11px;border-radius:2px}.form-input:focus{outline:none;border-color:#39f;box-shadow:inset 0 0 2px #3399ff4d}.form-checkbox{display:flex;align-items:center;gap:6px;cursor:pointer}.form-checkbox input[type=checkbox]{cursor:pointer}.win7-window{display:flex;flex-direction:column;height:100vh;background:var(--win7-bg);border:1px solid #0078d7}.title-bar{background:linear-gradient(to bottom,var(--win7-blue-light) 0%,var(--win7-blue-mid) 50%,var(--win7-blue-dark) 51%,var(--win7-blue-alt) 100%);padding:6px 10px;color:#fff;font-weight:400;font-size:11px;border-bottom:1px solid var(--win7-blue-border);-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between}.title-bar-text{font-weight:600}.title-bar-controls{display:flex;gap:2px}.content{display:flex;flex:1;overflow:hidden;background:var(--win7-bg);gap:4px;padding:4px}.toolbar{display:flex;align-items:center;gap:4px;padding:4px 6px;background:linear-gradient(to bottom,#2f2f2f 0%,var(--win7-gray-mid) 100%);border-bottom:1px solid var(--win7-gray-border)}.toolbar-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;background:linear-gradient(to bottom,#3a3a3a 0%,var(--win7-gray-mid) 100%);border:1px solid #4a4a4a;border-radius:2px;color:var(--win7-text);font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:22px;transition:all .15s ease}.toolbar-btn:hover:not(:disabled){background:linear-gradient(to bottom,#3a3a3a,#2a3f5f);border-color:#3c7fb1}.toolbar-btn:active:not(:disabled){background:linear-gradient(to bottom,#2a3f5f,#1e4d7a);border-color:#2a5f8f}.toolbar-btn.active{background:linear-gradient(to bottom,#1e4d7a,#163a5f);border-color:#3a6ea5;box-shadow:inset 0 1px 3px #00000080}.toolbar-btn:disabled{color:#666;cursor:not-allowed;opacity:.6}.toolbar-btn svg{width:14px;height:14px}.toolbar-separator{width:1px;height:20px;background:linear-gradient(to bottom,#3a3a3a,#5a5a5a,#3a3a3a);margin:0 2px}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--win7-gray-border);background:var(--win7-gray-mid);padding:4px 4px 0}.tab{padding:6px 12px;background:linear-gradient(to bottom,#2a2a2a,#1f1f1f);border:1px solid var(--win7-gray-dark);border-bottom:none;border-radius:2px 2px 0 0;color:var(--win7-text-dim);font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease}.tab:hover:not(.active){background:linear-gradient(to bottom,#3a3a3a,#2a2a2a);color:var(--win7-text)}.tab.active{background:var(--win7-panel-bg);color:var(--win7-text);border-color:var(--win7-gray-border);font-weight:600;position:relative;bottom:-1px}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--win7-panel-bg);border:1px solid var(--win7-gray-dark);box-shadow:0 8px 24px #00000080;display:flex;flex-direction:column;max-width:90vw;max-height:90vh;min-width:400px}.modal-header{background:var(--win7-panel-header-gradient);border-bottom:1px solid var(--win7-gray-dark);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}.modal-header h3{font-size:13px;font-weight:600;color:var(--win7-text);margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-close{background:transparent;border:none;color:var(--win7-text);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:2px;transition:all .2s}.modal-close:hover{background:#ffffff26;color:#fff}.modal-body{padding:16px;overflow:auto;flex:1}.modal-footer{border-top:1px solid var(--win7-gray-dark);padding:12px 16px;display:flex;gap:8px;justify-content:flex-end}.card{background:var(--win7-panel-bg);border:1px solid var(--win7-gray-dark);border-radius:2px;padding:12px;box-shadow:inset 0 0 1px #ffffff0d}.card-header{background:var(--win7-panel-header-gradient);border-bottom:1px solid var(--win7-gray-dark);padding:8px 12px;margin:-12px -12px 12px;font-weight:600;font-size:12px;color:var(--win7-text)}.list-item{padding:8px 12px;border-bottom:1px solid #3a3a3a;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .1s}.list-item:hover{background:var(--win7-hover)}.list-item.selected{background:var(--win7-selection);border-left:3px solid #3a6ea5}.badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-primary{background:var(--win7-blue-mid);color:#fff}.badge-success{background:green;color:#fff}.badge-warning{background:#f59e0b;color:#fff}.badge-error{background:#c00;color:#fff}.badge-info{background:#4a4a4a;color:var(--win7-text)}.progress-bar{width:100%;height:20px;background:#1f1f1f;border:1px solid #4a4a4a;border-radius:2px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(to bottom,var(--win7-blue-light) 0%,var(--win7-blue-mid) 100%);transition:width .3s ease;position:relative;overflow:hidden}.progress-bar-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);animation:progress-shine 2s linear infinite}@keyframes progress-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.separator{height:1px;background:linear-gradient(to right,transparent 0%,#4a4a4a 50%,transparent 100%);margin:8px 0}.menu{background:var(--win7-panel-bg);border:1px solid var(--win7-gray-border);box-shadow:0 4px 12px #00000080;padding:4px 0;min-width:150px}.menu-item{padding:6px 12px;font-size:11px;color:var(--win7-text);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}.menu-item:hover:not(.disabled){background:var(--win7-selection)}.menu-item.disabled{color:#666;cursor:not-allowed;opacity:.6}.menu-separator{height:1px;background:var(--win7-gray-border);margin:4px 0}.status-ready{color:green;font-weight:600}.status-pending{color:gray}.status-error{color:#c00;font-weight:600}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading{animation:spin 1s linear infinite}#root{width:100%;height:100vh}.demo-container{display:flex;flex-direction:column;gap:16px;max-width:800px;margin:0 auto}.demo-section{display:flex;flex-direction:column;gap:8px}.demo-section h2{font-size:14px;font-weight:600;color:var(--win7-text);margin-bottom:8px}.demo-buttons{display:flex;gap:8px;flex-wrap:wrap}.demo-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}