* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { font: 400 14px/22px var(--qc-font); color: var(--qc-text); background: var(--qc-page-bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.qc-sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; width: var(--qc-sidebar-width); background: #fff url('../assets/nav-background2.00f8003b.svg') 0 0 / cover no-repeat; display: flex; flex-direction: column; }
.qc-brand { height: 56px; padding: 12px 23px; display: flex; align-items: center; white-space: nowrap; }
.qc-brand img { width: 110px; height: 28px; object-fit: contain; }
.qc-nav { padding: 6px 5px 0; display: flex; flex-direction: column; gap: 2px; }
.qc-nav-item { position: relative; display: flex; align-items: center; width: 150px; min-height: 36px; border: 0; background: transparent; color: var(--qc-sidebar-text); font-size: 13px; text-align: left; border-radius: 6px; padding: 0 16px 0 23px; gap: 8px; white-space: nowrap; }
.qc-nav-item .qc-icon { width: 16px; height: 16px; }
.qc-nav-item.active { color: var(--qc-brand); background: rgba(255,255,255,.5); font-weight: 500; }
.qc-nav-item.active::before { content: ''; position: absolute; left: 0; width: 2px; height: 23px; border-radius: 2px; background: var(--qc-brand); }
.qc-nav-count { position: absolute; right: -1px; top: -5px; color: white; background: #fa555a; border-radius: 12px; font-size: 11px; line-height: 20px; padding: 0 5px; }
.qc-nav-bottom { margin-top: auto; }
.qc-plan { padding: 0 24px 11px; font-size: 12px; min-height: 112px; }
.qc-plan-line { display: flex; align-items: center; font-size: 13px; font-weight: 500; }
.qc-plan-line img { width: 17px; height: 17px; margin-right: 6px; }
.qc-plan-stats { margin: 4px 0 5px; color: #a1a8af; font-size: 10px; line-height: 19px; }
.qc-plan-stats div { display: flex; align-items: center; white-space: nowrap; }
.qc-plan-stats img { width: 13px; height: 13px; margin-right: 6px; }
.qc-quota { border: 0; border-radius: 6px; background: #fff4ec; color: var(--qc-brand); height: 24px; padding: 0 7px; font-size: 12px; }
.qc-settings { border-top: 1px solid #dce5ee; height: 48px; width: 160px; border-radius: 0; }
.qc-header { position: fixed; z-index: 4; left: var(--qc-sidebar-width); top: 0; right: 0; height: var(--qc-header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 12px; background: transparent; }
.qc-header-left, .qc-header-right { display: flex; align-items: center; }
.qc-header-left { gap: 11px; }
.qc-header-title { font-size: 16px; font-weight: 700; line-height: 64px; }
.qc-header-right { height: 40px; gap: 16px; padding-left: 8px; margin-right: -10px; border-radius: 8px; background: #fcfcfd; color: rgba(0,0,0,.85); }
.qc-header .qc-icon-button { width: 32px; height: 32px; }
.qc-header-left .qc-icon-button { width: 20px; }
.qc-header-queue { width: 18px; height: 40px; display: inline-flex; align-items: center; color: rgba(0,0,0,.85); cursor: pointer; }
.qc-header-service { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 4px; cursor: pointer; }
.qc-header-service:hover { background: #f5f5f5; }
.qc-header-service-icon { width: 26px; height: 26px; transform: scale(.7); background: url('../assets/status.c8bde734.svg') -26px 0 no-repeat; }
.qc-header-service-dot { position: absolute; right: 0; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #4dbd87; }
.qc-header-store-group { height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.qc-store { height: 40px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 16px; line-height: 40px; font-weight: 400; color: rgba(0,0,0,.85); }
.qc-store img { width: 16px; height: 16px; }
.qc-queue { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 4px; cursor: pointer; }
.qc-queue i { position: absolute; top: -6px; right: -10px; min-width: 21px; height: 14px; padding: 0 4px; border-radius: 10px; background: #ff4d4f; color: #fff; font: normal 12px/14px var(--qc-font); text-align: center; }
.qc-header-right .qc-icon-button { color: #374151; }
.qc-header-right .qc-icon-button:hover { background: #f3f4f6; }
.qc-header-help { width: 20px !important; color: #000 !important; }
.qc-header-notification { color: rgba(0,0,0,.65) !important; }
.qc-header-user { width: 44px; height: 24px; display: inline-flex; align-items: center; padding-right: 20px; }
.qc-user { width: 24px; height: 24px; border-radius: 50%; background: #ffc53d; color: #fff; font-size: 14px; line-height: 24px; display: grid; place-items: center; }
@media (max-width: 1535px) { .qc-header-right { margin-right: -18px; } }
.qc-workspace { position: fixed; left: 164px; right: 8px; top: 64px; bottom: 4px; }