.header-bar{display:flex;align-items:center;height:48px;background:#fff;border-bottom:1px solid #ececec;padding:0 24px;z-index:10}.header-bar__left{display:flex;align-items:center;flex:1 1 0}.header-bar__menu-btn{background:none;border:none;font-size:20px;margin-right:16px;color:#444;cursor:pointer;display:flex;align-items:center}.header-bar__logo{height:22px;margin-right:12px}.header-bar__divider{width:1px;height:24px;background:#e0e0e0;margin:0 16px;display:inline-block}.header-bar__vendor{font-weight:500;color:#333;font-size:16px}.header-bar__right{display:flex;align-items:center;gap:12px}.header-bar__switch-vendor{border:1px solid #ff7043;background:#fff;color:#ff7043;border-radius:6px;font-size:13px;padding:4px 16px;font-weight:500;cursor:pointer;transition:background .2s}.header-bar__switch-vendor:hover{background:#fff3ee}.header-bar__user{display:flex;align-items:center;gap:6px}.header-bar__user-icon{font-size:18px;color:#444}.header-bar__user-name{font-size:14px;color:#444;font-weight:500}.header-bar__user-dropdown{font-size:13px;color:#888;margin-left:2px}.header-bar__user{position:relative;cursor:pointer}.header-bar__dropdown-menu{position:absolute;top:110%;right:0;min-width:140px;background:#fff;box-shadow:0 4px 16px #14142814;border-radius:8px;padding:8px 0;z-index:100;display:flex;flex-direction:column;animation:fadeIn .13s}.header-bar__dropdown-item{background:none;border:none;width:100%;text-align:left;padding:8px 20px;font-size:14px;color:#444;cursor:pointer;transition:background .16s}.header-bar__dropdown-item:hover{background:#f5f6fa;color:#ff7043}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.header-bar{padding:0 8px}.header-bar__vendor{font-size:14px}.header-bar__logo{height:18px}}.side-menu{width:260px;background:#fff;border-right:1px solid #f3f3f3;min-height:100vh;display:flex;flex-direction:column;align-items:stretch;padding:0 10px}.side-menu__logo-area{height:0}.side-menu__nav{flex:1 1 0;margin-top:10px}.side-menu__list{list-style:none;margin:0;padding:0}.side-menu__item-wrapper{margin-bottom:4px}.side-menu__item{display:flex;align-items:center;gap:10px;padding:0 0 0 18px;height:48px;font-size:18px;color:#232b38;font-weight:400;border-radius:8px;background:transparent;text-decoration:none;transition:background .18s,color .18s;cursor:pointer}.side-menu__item:focus{outline:2px solid #ff7043;outline-offset:0}.side-menu__icon{font-size:16px;color:#232b38;width:32px;display:flex;justify-content:center;align-items:center;letter-spacing:1px}.side-menu__label{flex:1 1 0;font-size:14px;font-weight:500}@media (max-width: 900px){.side-menu{width:56px;min-width:56px}.side-menu__label{display:none}.side-menu__item{justify-content:center;padding-left:0}.side-menu__item[title]:hover:after{content:attr(title);position:absolute;left:60px;top:50%;transform:translateY(-50%);background:#232b38;color:#fff;font-size:14px;padding:4px 12px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px #1e1e1e1a;z-index:2000;pointer-events:none}}.side-menu__item--active{background:#d25527;color:#fff;font-weight:600}.side-menu__item--active .side-menu__icon{color:#fff}.side-menu__item:hover:not(.side-menu__item--active){background:#f7e5db;color:#d25527}.side-menu__item:hover:not(.side-menu__item--active) .side-menu__icon{color:#d25527}@media (max-width: 900px){.side-menu{width:56px;min-width:56px}}.main-layout{display:flex;flex-direction:column;min-height:100vh;background-color:#f5f7fa}.main-layout__body{display:flex;flex:1}.main-layout__content{flex:1;padding:10px;overflow-y:auto;transition:margin .3s ease}@media (max-width: 768px){.main-layout__content{margin-left:0;padding:15px}}.screen-loader{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;background-color:#fffc;position:fixed;top:0;left:0;z-index:9999}.screen-loader__spinner{font-size:2rem;color:#3498db}#root{font-family:Roboto,sans-serif;font-size:14px}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em rgba(100,108,255,.6666666667))}.logo.react:hover{filter:drop-shadow(0 0 2em rgba(97,218,251,.6666666667))}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}body{line-height:18px}body button{height:40px}