*{box-sizing:border-box;margin:0;padding:0}body{font-family:sans-serif;background:#1a1a1a;color:#eee;height:100vh}.layout{display:flex;height:100vh}.sidebar{width:200px;min-width:160px;background:#242424;border-right:1px solid #333;overflow-y:auto;padding:8px}.sidebar h3{font-size:12px;color:#888;padding:4px 0 8px;text-transform:uppercase}.item{padding:6px 8px;cursor:pointer;border-radius:4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item:hover{background:#333}.item.active{background:#06c}.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#2a2a2a;border-bottom:1px solid #333}.toolbar button{padding:4px 12px;border:1px solid #444;border-radius:4px;background:#333;color:#eee;cursor:pointer;font-size:13px}.toolbar button:hover{background:#444}.toolbar button.on{background:#06c;border-color:#06c}.toolbar button.unsaved{background:#a40;border-color:#c50}.sep{color:#555}.autosave-notice{color:#4caf50;font-size:13px;margin-left:8px;animation:autosave-fade 1.5s ease-out forwards}@keyframes autosave-fade{0%{opacity:1}70%{opacity:1}to{opacity:0}}.status-bar{color:#aaa;font-size:12px;margin-left:4px}.deleted-indicator{color:#ff6b6b;font-size:12px;margin-left:4px;font-weight:700}.context-menu{position:fixed;z-index:1000;background:#2a2a2a;border:1px solid #444;border-radius:4px;padding:4px 0;min-width:160px;box-shadow:0 4px 12px #0006}.context-menu-item{padding:6px 16px;cursor:pointer;font-size:13px}.context-menu-item:hover{background:#06c}.annotator-el{flex:1;display:block}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:#0009;display:flex;align-items:center;justify-content:center}.help-modal{position:relative;background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:24px 32px;max-width:540px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #00000080}.help-modal h2{font-size:18px;margin-bottom:16px;color:#fff}.help-modal h3{font-size:15px;margin:16px 0 8px;color:#ccc}.help-close{position:absolute;top:12px;right:16px;background:none;border:none;color:#888;font-size:22px;cursor:pointer}.help-close:hover{color:#fff}.help-modal table{width:100%;border-collapse:collapse;font-size:13px}.help-modal th{text-align:left;padding:6px 8px;color:#888;border-bottom:1px solid #444}.help-modal td{padding:5px 8px;border-bottom:1px solid #333}.help-modal tr:last-child td{border-bottom:none}.help-modal kbd{background:#444;border:1px solid #555;border-radius:3px;padding:1px 6px;font-family:monospace;font-size:12px;color:#eee}.login-overlay{display:flex;align-items:center;justify-content:center;height:100vh;background:#1a1a1a}.login-form{background:#242424;border:1px solid #333;border-radius:8px;padding:32px;width:320px;display:flex;flex-direction:column;gap:12px}.login-logo{width:64px;height:64px;border-radius:12px;align-self:center}.login-form h2{font-size:18px;color:#fff;text-align:center;margin-bottom:2px}.login-subtitle{font-size:14px;font-weight:300;letter-spacing:.5px;color:#b0a0c0;text-align:center;line-height:1.4;margin-bottom:4px}.login-form input{padding:8px 12px;border:1px solid #444;border-radius:4px;background:#1a1a1a;color:#eee;font-size:14px;outline:none}.login-form input:focus{border-color:#06c}.login-form button{padding:8px 16px;border:none;border-radius:4px;background:#06c;color:#fff;font-size:14px;cursor:pointer}.login-form button:hover{background:#05a}.login-error{color:#ff6b6b;font-size:13px;text-align:center}.toolbar-spacer{flex:1}.toolbar-user{color:#aaa;font-size:13px;margin-right:4px}.logout-btn{opacity:.7}.logout-btn:hover{opacity:1}