:root{--ribbon-bg: #2a2a2a;--ribbon-border: #444;--ribbon-text: #00ff00;--ribbon-text-secondary: #888;--ribbon-hover: #003300;--ribbon-active: #006600;--ribbon-accent: #00ff00;--ribbon-height: 126px}.ribbon-interface{position:fixed;top:0;left:0;right:0;background:var(--ribbon-bg);border-bottom:2px solid var(--ribbon-accent);z-index:1000;font-family:Segoe UI,Tahoma,sans-serif;box-shadow:0 2px 8px #00000080;height:var(--ribbon-height);display:flex;flex-direction:column;overflow:hidden}.ribbon-tabs{display:flex;background:#222;border-bottom:1px solid var(--ribbon-border);padding:0 4px;flex-shrink:0}.ribbon-tab{padding:4px 16px;cursor:pointer;border-bottom:2px solid transparent;color:var(--ribbon-text-secondary);font-size:11px;font-weight:600;transition:all .12s ease;user-select:none;text-transform:uppercase;letter-spacing:.5px}.ribbon-tab:hover{background:var(--ribbon-hover);color:var(--ribbon-accent)}.ribbon-tab.active{background:var(--ribbon-bg);color:var(--ribbon-accent);border-bottom-color:var(--ribbon-accent)}.ribbon-content{flex:1;padding:4px 4px 0;overflow:hidden}.ribbon-groups{display:flex;gap:0;align-items:stretch;height:100%}.ribbon-group{display:flex;flex-direction:column;border-right:1px solid var(--ribbon-border);padding:2px 6px 0;flex-shrink:0}.ribbon-group:last-child{border-right:none}.ribbon-group-content{flex:1;display:flex;align-items:center;gap:2px}.ribbon-group-content.layout-grid{display:grid;grid-template-rows:1fr 1fr;grid-auto-flow:column;grid-auto-columns:auto;gap:2px;align-items:center}.ribbon-group-content.layout-row{display:flex;flex-direction:row;gap:2px;align-items:center}.ribbon-group-label{font-size:9px;color:var(--ribbon-text-secondary);text-align:center;padding:1px 0 2px;border-top:1px solid var(--ribbon-border);font-weight:600;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}.ribbon-command{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;border-radius:3px;transition:all .1s ease;user-select:none;position:relative;background:transparent;color:var(--ribbon-text)}.ribbon-command:hover:not(.disabled){background:var(--ribbon-hover);border-color:var(--ribbon-border);color:var(--ribbon-accent)}.ribbon-command:active:not(.disabled){background:var(--ribbon-active)}.ribbon-command.disabled{opacity:.3;cursor:not-allowed}.ribbon-command-small{width:46px;height:34px;padding:2px;flex-direction:column}.ribbon-command-small .command-icon{font-size:14px;line-height:1}.ribbon-command-small .command-name{font-size:8px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:1px}.ribbon-command-medium{width:36px;height:54px;padding:2px}.ribbon-command-medium .command-icon{font-size:18px;line-height:1}.ribbon-command-medium .command-name{font-size:8px;text-align:center;font-weight:600;margin-top:2px}.ribbon-command-large{width:50px;height:62px;padding:3px 2px}.ribbon-command-large .command-icon{font-size:24px;line-height:1}.ribbon-command-large .command-name{font-size:9px;text-align:center;font-weight:600;margin-top:3px;white-space:nowrap}.command-icon{display:flex;align-items:center;justify-content:center;color:inherit}.command-name{color:inherit;overflow:hidden;text-overflow:ellipsis}.dropdown-command{position:relative;flex-direction:row!important}.dropdown-command .command-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.dropdown-command .dropdown-trigger{width:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-left:1px solid var(--ribbon-border);color:var(--ribbon-text-secondary);font-size:7px}.dropdown-command:hover .dropdown-trigger{color:var(--ribbon-accent)}.dropdown-arrow{font-size:7px}.dropdown-menu{position:fixed;min-width:160px;background:var(--ribbon-bg);border:1px solid var(--ribbon-border);border-radius:4px;box-shadow:0 8px 24px #0009;z-index:9999;opacity:0;visibility:hidden;transition:opacity .12s ease;max-height:300px;overflow-y:auto;display:none}.dropdown-menu.visible{opacity:1;visibility:visible;display:block}.dropdown-item{display:flex;align-items:center;padding:6px 10px;cursor:pointer;transition:all .1s ease;border-radius:2px;margin:2px 4px;color:var(--ribbon-text-secondary);font-size:11px}.dropdown-item:hover{background:var(--ribbon-hover);color:var(--ribbon-accent)}.dropdown-item:active{background:var(--ribbon-active)}.dropdown-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;margin-right:8px;font-size:12px;flex-shrink:0}.dropdown-text{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px}.dropdown-name{font-size:11px;color:inherit;white-space:nowrap}.dropdown-shortcut{font-size:9px;color:var(--ribbon-text-secondary);white-space:nowrap}.dropdown-separator{height:1px;background:var(--ribbon-border);margin:4px 0}#ribbon-container{overflow:hidden;position:relative;z-index:1000}canvas{margin-top:var(--ribbon-height);position:relative;z-index:1}@media(max-width:1200px){.ribbon-groups{overflow-x:auto}.ribbon-group{flex-shrink:0}}@media(max-width:768px){.ribbon-interface{position:relative;height:auto}.ribbon-tabs{overflow-x:auto;scrollbar-width:none}.ribbon-tabs::-webkit-scrollbar{display:none}.ribbon-tab{white-space:nowrap;flex-shrink:0}.ribbon-content{overflow-x:auto}canvas{margin-top:120px}.auth-username{display:none}}.ribbon-auth-area{margin-left:auto;display:flex;align-items:center;padding-right:12px;flex-shrink:0}.auth-login-btn{background:transparent;border:1px solid var(--ribbon-accent);color:var(--ribbon-accent);padding:4px 16px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit;transition:background .2s,color .2s}.auth-login-btn:hover{background:var(--ribbon-accent);color:#000}.auth-user-info{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:4px;position:relative;transition:background .2s}.auth-user-info:hover{background:#ffffff0d}.auth-avatar{width:28px;height:28px;border-radius:50%;background:var(--ribbon-accent);color:#000;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.auth-username{color:#ccc;font-size:12px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-dropdown{display:none;position:absolute;top:100%;right:0;background:#333;border:1px solid #555;border-radius:4px;min-width:140px;box-shadow:0 4px 12px #0006;z-index:2000;margin-top:4px}.auth-dropdown.visible{display:block}.auth-dropdown-item{padding:8px 14px;font-size:12px;color:#ccc;cursor:pointer;transition:background .15s}.auth-dropdown-item:hover{background:#ffffff14}.auth-dropdown-item.auth-role{color:var(--ribbon-accent);font-size:11px;cursor:default;border-bottom:1px solid #444}.auth-dropdown-item.auth-role:hover{background:transparent}.auth-dropdown-item.auth-logout{color:#ff6b6b}.login-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(4px)}.login-modal{background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:32px;width:360px;max-width:90vw;box-shadow:0 16px 48px #00000080;position:relative;animation:loginFadeIn .2s ease-out}@keyframes loginFadeIn{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.login-modal-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.login-modal-logo{font-size:20px;font-weight:700;color:#0f0;letter-spacing:2px}.login-modal-title{font-size:16px;color:#ccc}.login-modal-form{display:flex;flex-direction:column;gap:16px}.login-field label{display:block;font-size:12px;color:#999;margin-bottom:6px}.login-field input{width:100%;padding:10px 12px;background:#1a1a1a;border:1px solid #444;border-radius:4px;color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s;box-sizing:border-box}.login-field input:focus{border-color:#0f0}.login-field input::placeholder{color:#555}.login-error{color:#ff6b6b;font-size:12px;min-height:16px}.login-submit{width:100%;padding:10px;background:#0f0;color:#000;border:none;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}.login-submit:hover{background:#0c0}.login-submit:disabled{background:#444;color:#888;cursor:not-allowed}.login-close{position:absolute;top:12px;right:12px;background:transparent;border:none;color:#888;font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .2s}.login-close:hover{color:#fff}