:root { --primary:#ff1100; --primary-dark:#b81004; --bg:#f5f5f5; --panel:#fff; --border:#ccc; --text:#333; --radius:4px; }
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);padding:20px;}
h1,h2{text-align:center;margin:20px 0;color:var(--primary);}
.demo{margin:20px 0;padding:20px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,.1);}
button,.ext-button{background:var(--primary);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius);cursor:pointer;margin:5px;}
button:hover,.ext-button:hover{background:var(--primary-dark);}
.panel .hd{background:var(--primary);color:#fff;padding:8px;font-weight:bold;}
.panel .bd{padding:12px;}
.grid{width:100%;border-collapse:collapse;}
.grid th,.grid td{border:1px solid var(--border);padding:8px;}
.grid th{background:#f0f0f0;}
.field{margin:8px 0;}
.field label{display:block;margin-bottom:4px;font-weight:bold;}
.field input,.field select,.field textarea{width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius);}
.tree ul{list-style:none;padding-left:20px;}
.tree .node{cursor:pointer;}
.tree .folder:before{content:'Right Arrow';margin-right:5px;}
.tree .expanded:before{content:'Down Arrow';}
.tree .hidden{display:none;}
.tabpanel .tabs{display:flex;background:#f5f5f5;border-bottom:1px solid var(--border);}
.tabpanel .tab{padding:10px 16px;cursor:pointer;border-right:1px solid var(--border);}
.tabpanel .tab.active{background:var(--panel);font-weight:bold;}
.tabpanel .tab-body{padding:16px;}
.toolbar{display:flex;gap:5px;padding:8px;background:#eee;border:1px solid var(--border);border-radius:var(--radius);}
.separator{width:1px;background:#ccc;margin:0 8px;}
.progressbar{position:relative;height:24px;background:#eee;border-radius:var(--radius);overflow:hidden;margin:10px 0;}
.progressbar .bar{background:var(--primary);height:100%;width:0;transition:width .3s;}
.progressbar span{position:absolute;right:8px;top:4px;font-size:12px;}
.ajax-spinner{border:4px solid #f3f3f3;border-top:4px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:s 1s linear infinite;margin:20px auto;}
@keyframes s{to{transform:rotate(360deg)}}
.msgbox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9999;}
.msgbox{background:#fff;border-radius:8px;width:320px;box-shadow:0 8px 32px rgba(0,0,0,.3);}
.msgbox .titlebar{background:var(--primary);color:#fff;padding:12px 16px;font-weight:600;}
.msgbox .body{padding:20px;font-size:14px;}
.msgbox .footer{text-align:right;padding:12px;border-top:1px solid #eee;}
.window{box-shadow:0 8px 32px rgba(0,0,0,.3);border-radius:6px;overflow:hidden;}
.tooltip{background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s;position:absolute;z-index:10000;}