:root{--odb-bg-main: #ffffff;--odb-bg-toolbar: #ffffff;--odb-bg-header: #f5f5f5;--odb-bg-highlight: #fff0eb;--odb-bg-sidebar: #ffffff;--odb-bg-sidebar-active: #f0f0f0;--odb-border: #e0e0e0;--odb-border-light: #f0f0f0;--odb-text-main: #333333;--odb-text-muted: #888888;--odb-text-blue: #0066cc;--odb-pill-dark-bg: #444444;--odb-pill-dark-text: #ffffff;--odb-pill-gray-bg: #e8e8e8;--odb-pill-gray-text: #555555;--odb-pill-blue-bg: #e0f0ff;--odb-pill-blue-text: #0055aa}body:not(.light-mode){--odb-bg-main: #111111;--odb-bg-toolbar: #1a1a1a;--odb-bg-header: #1a1a1a;--odb-bg-highlight: #3a2218;--odb-bg-sidebar: #111111;--odb-bg-sidebar-active: #2a2a2a;--odb-border: #333333;--odb-border-light: #222222;--odb-text-main: #e0e0e0;--odb-text-muted: #888888;--odb-text-blue: #4da6ff;--odb-pill-dark-bg: #333333;--odb-pill-dark-text: #eeeeee;--odb-pill-gray-bg: #333333;--odb-pill-gray-text: #cccccc;--odb-pill-blue-bg: #1a2a40;--odb-pill-blue-text: #88ccff}.odb-container{width:100%;height:100%;background:var(--odb-bg-main);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px #00000026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;color:var(--odb-text-main);border:1px solid var(--odb-border);font-size:13px}.odb-topbar{height:36px;border-bottom:1px solid var(--odb-border);display:flex;overflow-x:hidden;background:var(--odb-bg-header)}.odb-tabs{display:flex}.odb-tab{padding:0 16px;display:flex;align-items:center;border-right:1px solid var(--odb-border);color:var(--odb-text-muted);cursor:pointer;white-space:nowrap;background:var(--odb-bg-header)}.odb-tab.active{background:var(--odb-bg-main);color:var(--odb-text-main);border-bottom:2px solid var(--odb-text-main);margin-bottom:-1px}.odb-toolbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--odb-border);background:var(--odb-bg-toolbar)}.odb-toolbar-left,.odb-toolbar-right{display:flex;align-items:center;gap:16px}.odb-btn{background:none;border:none;color:var(--odb-text-main);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit}.odb-view-btn{font-weight:500}.odb-toolbar-divider{width:1px;height:16px;background:var(--odb-border);margin:0 8px}.odb-toolbar-actions{display:flex;gap:16px}.odb-action{color:var(--odb-text-muted);display:flex;align-items:center;gap:6px;cursor:pointer}.odb-action-active{color:var(--color-orange-1);background:var(--odb-bg-highlight);padding:4px 8px;border-radius:4px}.odb-main-area{display:flex;flex:1;overflow:hidden}.odb-sidebar{width:200px;min-width:200px;border-right:1px solid var(--odb-border);background:var(--odb-bg-sidebar);padding:12px 8px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}.odb-sidebar-item{padding:6px 12px;border-radius:4px;display:flex;align-items:center;gap:10px;color:var(--odb-text-main);cursor:pointer}.odb-sidebar-item.active{background:var(--odb-bg-sidebar-active);font-weight:500}.odb-sidebar-item svg{color:var(--odb-text-blue)}.odb-grid-wrapper{flex:1;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--odb-bg-main)}.odb-grid-wrapper::-webkit-scrollbar{height:6px}.odb-grid-wrapper::-webkit-scrollbar-track{background:var(--odb-bg-main)}.odb-grid-wrapper::-webkit-scrollbar-thumb{background:var(--odb-border);border-radius:3px}.odb-grid-wrapper::-webkit-scrollbar-thumb:hover{background:var(--odb-text-muted)}.odb-table{border-collapse:collapse;width:100%;min-width:1200px}.odb-table th{position:sticky;top:0;background:var(--odb-bg-header);border:1px solid var(--odb-border);border-top:none;padding:8px 12px;text-align:left;font-weight:500;color:var(--odb-text-muted);white-space:nowrap;z-index:10}.odb-table th svg{vertical-align:text-bottom;margin-right:6px}.odb-table td{padding:6px 12px;border-right:1px solid var(--odb-border);border-bottom:1px solid var(--odb-border-light);white-space:nowrap}.odb-row-even{background:var(--odb-bg-main)}.odb-row-odd{background:var(--odb-bg-sidebar)}.odb-td-index{width:40px;text-align:center;color:var(--odb-text-muted);border-left:none}.odb-table th.odb-th-index{width:40px;border-left:none}.odb-td-right{text-align:right}.odb-client-name{color:var(--odb-text-blue)}.odb-pill{display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px}.odb-pill-dark{background:var(--odb-pill-dark-bg);color:var(--odb-pill-dark-text)}.odb-pill-gray{background:var(--odb-pill-gray-bg);color:var(--odb-pill-gray-text)}.odb-pill-blue{background:var(--odb-pill-blue-bg);color:var(--odb-pill-blue-text)}.odb-footer{height:40px;border-top:1px solid var(--odb-border);display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:var(--odb-bg-main)}.odb-footer-left{display:flex;align-items:center;gap:12px}.odb-footer-btn{background:none;border:none;color:var(--odb-text-main);display:flex;align-items:center;gap:6px;cursor:pointer}.odb-footer-count,.odb-footer-right{color:var(--odb-text-muted);font-size:12px}@media(max-width:768px){.odb-sidebar{display:none}.odb-main-area{flex-direction:column}.odb-table{min-width:800px}.odb-toolbar-actions{gap:8px}}@media(max-width:640px){.odb-table{min-width:600px}.odb-toolbar{padding:0 8px}.odb-toolbar-left,.odb-toolbar-right{gap:8px}}@media(max-width:480px){.odb-table{min-width:500px}.odb-topbar{height:30px}.odb-tab{padding:0 10px;font-size:11px}}
