.key-help-actions{flex-wrap:wrap!important}
.account-compact-control{display:inline-flex;align-items:center;flex:none;min-height:44px}
.account-compact-toggle{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:8px 16px;border:1px solid #a8cfca;border-radius:10px;background:#f0faf7;color:#225c54;font-size:14px;font-weight:600;cursor:pointer}
.account-compact-toggle:focus-visible{outline:2px solid #14b8a6;outline-offset:3px}
.account-compact-toggle:disabled{opacity:.6;cursor:wait}
.compact-track{display:inline-flex;align-items:center;width:38px;height:22px;padding:3px;border-radius:14px;background:#94a3b8;box-sizing:border-box}
.compact-track>span{width:16px;height:16px;border-radius:50%;background:white;transition:transform .15s}
.account-compact-toggle[aria-checked=true] .compact-track{background:#0d9488}
.account-compact-toggle[aria-checked=true] .compact-track>span{transform:translateX(16px)}
.dark .account-compact-toggle{background:#0b2633;border-color:#315b6b;color:#bcebe6}
.account-compact-groups .workspace-group-copy>small:not(.workspace-model-match):not(.workspace-peak){display:none!important}
.account-compact-groups .workspace-group-card{min-height:64px!important}
@media(max-width:650px){.account-compact-control,.account-compact-toggle{width:100%}.account-compact-groups .workspace-mobile-details{display:none!important}.account-compact-groups .workspace-group-card.is-selected+.workspace-mobile-details{display:block!important}}
@media(prefers-reduced-motion:reduce){.compact-track>span{transition:none}}
.key-help-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;max-width:1000px!important}
@media(max-width:650px){.key-help-actions{grid-template-columns:1fr!important}}
.group-picker-panel .key-vendor-heading{align-items:center!important;flex-wrap:wrap}
.group-picker-panel .key-vendor-heading>.input-label{margin-right:auto}
.group-picker-panel .account-compact-control{min-height:32px;flex:none;width:auto}
.group-picker-panel .account-compact-toggle{min-height:32px;width:auto;padding:4px 8px;font-size:12px;gap:8px}
.group-picker-panel .compact-track{width:32px;height:20px;padding:2px}
.group-picker-panel .compact-track>span{width:16px;height:16px}
.group-picker-panel .account-compact-toggle[aria-checked=true] .compact-track>span{transform:translateX(12px)}
.group-picker-panel.account-compact-groups .picker-option:not(.compact-description-open) .option-content>p:not(.option-model-match):not(.option-peak){display:none!important}
.compact-description-toggle{display:none}
.group-picker-panel.account-compact-groups .compact-description-toggle{display:inline-flex;align-items:center;min-height:32px;margin-top:4px;padding:4px 8px;border:1px solid #91bbb4;border-radius:6px;color:#166b60;background:transparent;font-size:12px;cursor:pointer}
.dark .group-picker-panel.account-compact-groups .compact-description-toggle{color:#88e3d9;border-color:#315b6b}
.compact-description-toggle:focus-visible{outline:2px solid #14b8a6;outline-offset:2px}

/* Create-key layout: keep Vue-owned nodes in place, order the three lower controls visually. */
.key-create-layout{display:flex!important;flex-direction:column;gap:16px}
.key-create-layout> *{margin-top:0!important;margin-bottom:0!important;min-width:0}
.key-create-layout>.key-bottom-protection{order:90}
.key-create-layout>.key-bottom-help{order:91;grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:none!important;width:100%}
.key-create-layout>.key-create-name{display:grid;grid-template-columns:minmax(0,560px) auto;align-items:center;column-gap:16px;max-width:760px!important;width:100%}
.key-create-name>.input-label{grid-column:1;grid-row:1}
.key-create-name>.input{grid-column:1;grid-row:2;min-width:0;width:100%}
.key-create-name>.account-compact-control{grid-column:2;grid-row:2;width:auto!important}
.key-create-name .account-compact-toggle{width:auto!important;white-space:nowrap}
@media(max-width:520px){.key-create-layout>.key-create-name{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}.key-create-name .account-compact-toggle{font-size:12px;padding:8px;gap:6px}.key-create-layout>.key-bottom-help{grid-template-columns:1fr!important}}

.official-status-copy{flex:none;border:1px solid #cbd5e1;border-radius:7px;padding:5px 9px;font-size:12px;color:#475569;background:#fff;white-space:nowrap;cursor:pointer}
.official-status-copy:hover{color:#0d9488;border-color:#14b8a6;background:#f0fdfa}
.official-status-copy:focus-visible{outline:2px solid #14b8a6;outline-offset:2px}
.dark .official-status-copy{background:#172435;color:#cbd5e1;border-color:#475569}
.official-status-message{font-size:12px;color:#64748b;margin-right:auto;max-width:210px}
.official-status-open-all{white-space:nowrap}
@media(max-width:520px){.official-status-choice{gap:8px!important;padding:10px!important}.official-status-copy{padding:5px 6px}.official-status-choice .client-download-info{min-width:0}.official-status-choice .client-download-info>span{overflow-wrap:anywhere}.official-status-message{max-width:140px}}

/* Hidden model-fetch notice must not reserve a blank band above the name. */
.key-create-dialog>div:has(>[data-testid="group-models-auto-notice"][aria-hidden="true"]){display:none!important}
.key-create-dialog .modal-body{padding-top:12px!important}

.key-group-workspace .workspace-rate,.key-group-workspace .detail-rate{color:#475569!important;text-shadow:none!important}
.dark .key-group-workspace .workspace-rate,.dark .key-group-workspace .detail-rate{color:#94a3b8!important;text-shadow:none!important}
.site-scale-notice{position:fixed;z-index:10000;top:12px;left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 24px));box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#334155;box-shadow:0 8px 32px #0f172a26;font-size:14px}
.site-scale-notice p{margin:0;flex:1}.site-scale-notice button{border:1px solid #cbd5e1;border-radius:7px;padding:8px 12px;background:#475569;color:white;cursor:pointer;white-space:nowrap}.site-scale-notice .scale-dismiss{background:transparent;color:#475569}.dark .site-scale-notice{background:#1e293b;color:#e2e8f0;border-color:#475569}

/* Float the auto-fetch notice alongside the name row without taking layout space. */
.key-create-dialog{position:relative}
.key-create-dialog>div:has(>[data-testid="group-models-auto-notice"]){position:absolute!important;z-index:4;top:var(--key-notice-top,112px);left:52%;right:24px;padding:0!important}
.key-create-dialog [data-testid="group-models-auto-notice"]{min-height:44px;box-sizing:border-box;font-size:12px}
.key-create-dialog .key-create-name{max-width:49%!important;grid-template-columns:minmax(0,1fr) auto!important}
@media(max-width:1000px){.key-create-dialog .key-create-name{max-width:100%!important}.key-create-dialog>div:has(>[data-testid="group-models-auto-notice"]){top:8px!important;left:auto;right:55px;max-width:65%}.key-create-dialog [data-testid="group-models-auto-notice"]{min-height:36px;padding:6px 8px;font-size:11px}}

.site-scale-notice{width:min(860px,calc(100% - 24px));flex-wrap:wrap}.site-scale-notice p{min-width:220px}
.scale-preference-toast{position:fixed;z-index:11000;right:20px;top:20px;max-width:380px;padding:16px;border-radius:12px;background:#fff;color:#334155;border:1px solid #cbd5e1;box-shadow:0 8px 30px #0f172a26;font-size:14px}.scale-preference-toast a{display:block;margin-top:8px;color:#0d9488;text-decoration:underline}
.browser-display-settings{position:relative;z-index:2;margin-bottom:16px;padding:20px;background:#fff;border:1px solid #cbd5e1;border-radius:16px;scroll-margin-top:100px;color:#334155}.browser-display-settings h3{font-weight:600;margin-bottom:12px}.browser-display-settings p{font-size:12px;color:#64748b;margin-top:8px}.browser-display-settings input{accent-color:#0d9488}.dark .browser-display-settings,.dark .scale-preference-toast{background:#1e293b;color:#e2e8f0;border-color:#475569}

.key-group-workspace .workspace-group-copy .workspace-model-match,.group-picker-panel .option-content p.option-model-match{color:#3B82F6!important}

.site-scale-notice p{white-space:pre-line;line-height:1.7}.site-scale-notice{max-height:calc(100vh - 24px);overflow-y:auto}

.site-scale-notice .scale-warning{color:#a16207}.site-scale-notice .scale-range{color:#059669}.site-scale-notice .scale-method,.site-scale-notice .scale-key{color:#2563eb}.site-scale-notice .scale-extra{color:#64748b}.dark .site-scale-notice .scale-warning{color:#fbbf24}.dark .site-scale-notice .scale-range{color:#34d399}.dark .site-scale-notice .scale-method,.dark .site-scale-notice .scale-key{color:#60a5fa}.dark .site-scale-notice .scale-extra{color:#94a3b8}

/* Daily check-in first; the full wheel and drawing controls follow at the bottom. */
.lottery-page .lottery-shell{display:flex;flex-direction:column}
.lottery-page .lottery-shell>.lottery-header{order:0}
.lottery-page .lottery-shell>.checkin-wrap{order:1;flex:none;width:100%;box-sizing:border-box}
.lottery-page .lottery-shell>.lottery-loading,.lottery-page .lottery-shell>.lottery-stage{order:2;flex:none}
/* Roomy table group chooser: viewport anchored, with the result list taking the remaining space. */
.group-picker-panel.group-picker-popover{top:4vh!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)!important;width:min(1040px,calc(100vw - 32px))!important;height:92vh!important;max-height:92vh!important;animation:none!important;display:flex!important;flex-direction:column!important;box-shadow:0 20px 70px #0f172a40!important}
.group-picker-popover>.picker-close-row{flex:none;padding:12px 20px!important}
.group-picker-popover>.picker-vendors{flex:none;padding:10px 20px 0!important}
.group-picker-popover .key-vendor-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
.group-picker-popover .key-vendor-filter.is-compact .key-vendor-choice{height:48px!important;flex-direction:row!important;gap:8px!important;padding:6px 10px!important}
.group-picker-popover .key-vendor-filter.is-compact .key-vendor-icons{height:26px!important}
.group-picker-popover .key-vendor-filter.is-compact .key-vendor-icon{width:26px!important;height:26px!important}
.group-picker-popover .key-vendor-hint{margin-top:6px!important}
.group-picker-popover>.picker-controls{flex:none;padding:10px 20px!important;gap:12px!important}
.group-picker-popover>.picker-results{min-height:0!important;max-height:none!important;flex:1 1 0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 20px 20px!important;scrollbar-gutter:stable}
.group-picker-popover .picker-option{padding:16px!important;margin-top:10px!important;border-color:#d9e7ee!important;background:#ffffff80}
.group-picker-popover .option-content>p{white-space:pre-wrap!important;overflow:visible!important;max-height:none!important;line-height:1.85!important;font-size:14px!important;overflow-wrap:anywhere}
.group-picker-popover .option-title strong{font-size:15px!important;line-height:1.65!important}
.dark .group-picker-popover .picker-option{background:#14253580!important;border-color:#334155!important}
@media(max-width:650px){.group-picker-panel.group-picker-popover{top:8px!important;width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important}.group-picker-popover .key-vendor-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.group-picker-popover .key-vendor-filter.is-compact .key-vendor-choice{height:42px!important;padding:4px!important;gap:4px!important}.group-picker-popover>.picker-vendors,.group-picker-popover>.picker-controls{padding:8px 10px!important}.group-picker-popover>.picker-results{padding:0 8px 12px!important}.group-picker-popover .picker-option{padding:12px!important}}
/* Align the display preference with the category actions, leaving the heading clear. */
.group-picker-popover .key-vendor-heading{justify-content:flex-start!important;align-items:center!important;gap:10px!important;min-height:38px}
.group-picker-popover .key-vendor-heading>.input-label{margin-right:0!important}
.group-picker-popover .key-vendor-heading>.account-compact-control{margin-left:auto!important}
.group-picker-popover .key-vendor-heading>.account-compact-control .account-compact-toggle{height:36px!important;min-height:36px!important;padding:6px 12px!important;border-radius:9px!important;background:#f0fdfa!important;border-color:#b4ddd7!important;color:#115e59!important}
.group-picker-popover .picker-close-row>button,.group-picker-popover .picker-locate,.group-picker-popover .key-vendor-all{display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;height:36px!important;min-height:36px!important;padding:0 14px!important;border:1px solid #cbd5e1!important;border-radius:9px!important;background:#fff!important;color:#475569!important;font-size:13px!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.group-picker-popover .picker-locate{background:#0d9488!important;border-color:#0d9488!important;color:#fff!important;box-shadow:0 2px 5px #0d948820}
.group-picker-popover .key-vendor-all[aria-pressed=true]{background:#f0fdfa!important;border-color:#5cc9bb!important;color:#0f766e!important}
.group-picker-popover .picker-close-row>button:hover,.group-picker-popover .key-vendor-all:hover{background:#f1f5f9!important;border-color:#94a3b8!important}
.group-picker-popover .picker-locate:hover:not(:disabled){background:#0f766e!important;border-color:#0f766e!important}
.group-picker-popover .picker-close-row>button:focus-visible,.group-picker-popover .picker-locate:focus-visible,.group-picker-popover .key-vendor-all:focus-visible{outline:2px solid #14b8a6!important;outline-offset:3px!important}
.dark .group-picker-popover .picker-close-row>button,.dark .group-picker-popover .key-vendor-all{background:#1e293b!important;border-color:#475569!important;color:#cbd5e1!important}
.dark .group-picker-popover .key-vendor-heading>.account-compact-control .account-compact-toggle,.dark .group-picker-popover .key-vendor-all[aria-pressed=true]{background:#123832!important;border-color:#28746b!important;color:#99f6e4!important}
.dark .group-picker-popover .picker-close-row>button:hover,.dark .group-picker-popover .key-vendor-all:hover{background:#334155!important}
@media(max-width:650px){.group-picker-popover .key-vendor-heading{gap:6px!important}.group-picker-popover .key-vendor-heading>.input-label{flex:1 0 100%}.group-picker-popover .key-vendor-heading>.account-compact-control{margin-left:0!important;margin-right:auto!important}.group-picker-popover .picker-locate,.group-picker-popover .key-vendor-all{padding:0 10px!important;font-size:12px!important}}

.group-picker-popover .key-vendor-choice.is-current-group-vendor{border:2px solid #0d9488!important;background:#ccfbf1!important;box-shadow:0 0 0 2px #14b8a622!important;color:#115e59!important;opacity:1!important}
.group-picker-popover .key-vendor-choice.is-current-group-vendor strong{font-weight:900!important;color:#0f766e!important}
.group-picker-popover .key-vendor-choice.is-current-group-vendor::after{content:'当前';position:absolute;right:5px;top:3px;font-size:10px;line-height:14px;font-weight:700;color:#0f766e}
.dark .group-picker-popover .key-vendor-choice.is-current-group-vendor{background:#134e4a!important;border-color:#2dd4bf!important;color:#99f6e4!important}
.dark .group-picker-popover .key-vendor-choice.is-current-group-vendor strong,.dark .group-picker-popover .key-vendor-choice.is-current-group-vendor::after{color:#99f6e4!important}

/* Compact auto-fetch feedback: no stretched blank band between text and actions. */
.key-create-dialog>div:has(>[data-testid="group-models-auto-notice"]){left:auto!important;right:24px!important;width:max-content!important;max-width:47%!important}
.key-create-dialog [data-testid="group-models-auto-notice"]{justify-content:flex-start!important;flex-wrap:nowrap!important;gap:16px!important;min-height:40px!important;padding:8px 12px!important;line-height:1.5!important}
.key-create-dialog [data-testid="group-models-auto-notice"]>span{min-width:0;overflow-wrap:anywhere}
.key-create-dialog [data-testid="group-models-auto-notice"]>div{gap:10px!important;white-space:nowrap}
@media(max-width:1000px){.key-create-dialog>div:has(>[data-testid="group-models-auto-notice"]){right:55px!important;max-width:65%!important}.key-create-dialog [data-testid="group-models-auto-notice"]{gap:8px!important;min-height:32px!important;padding:6px 8px!important;font-size:11px!important}}
@media(max-width:520px){.key-create-dialog [data-testid="group-models-auto-notice"]>span{max-width:145px}.key-create-dialog [data-testid="group-models-auto-notice"]>div{gap:4px!important}}

/* Preserve description line breaks in the list as well as the detail pane. */
.key-group-workspace .workspace-group-copy>small:not(.workspace-model-match):not(.workspace-peak){white-space:pre-line!important}

/* Native scrollbars shared by the key dialog, workspace and group chooser.
   Scope includes dynamically rendered nested lists, never the whole application.
   Theme classes live on html because BaseDialog teleports its panel to body. */
html .key-create-dialog,
html .key-group-workspace,
html .group-picker-panel {
  --key-scroll-thumb: #0EA5E9;
  --key-scroll-track: #E2E8F0;
  --key-scroll-hover: #0284C7;
  --key-scroll-active: #14B8A6;
}

html.dark .key-create-dialog,
html.dark .key-group-workspace,
html.dark .group-picker-panel {
  --key-scroll-thumb: #22C3EE;
  --key-scroll-track: #1C3445;
  --key-scroll-hover: #14B8A6;
  --key-scroll-active: #5EEAD4;
}

html .key-create-dialog,
html .key-group-workspace,
html .group-picker-panel,
html .key-create-dialog *,
html .key-group-workspace *,
html .group-picker-panel * {
  scrollbar-color: var(--key-scroll-thumb) var(--key-scroll-track) !important;
  scrollbar-width: thin !important;
}

/* Firefox uses standard scrollbar colors; native APIs expose container hover,
   rather than individual thumb pseudo states. Keyboard focus stays explicit. */
@supports not selector(::-webkit-scrollbar) {
  html .key-create-dialog:hover,
html .key-group-workspace:hover,
html .group-picker-panel:hover,
  html .key-create-dialog *:hover,
  html .key-group-workspace *:hover,
  html .group-picker-panel *:hover {
    scrollbar-color: var(--key-scroll-hover) var(--key-scroll-track) !important;
  }
  html .key-create-dialog:is(:active, :focus-visible),
html .key-group-workspace:is(:active, :focus-visible),
html .group-picker-panel:is(:active, :focus-visible),
  html .key-create-dialog *:is(:active, :focus-visible),
  html .key-group-workspace *:is(:active, :focus-visible),
  html .group-picker-panel *:is(:active, :focus-visible) {
    scrollbar-color: var(--key-scroll-active) var(--key-scroll-track) !important;
  }
}

@supports selector(::-webkit-scrollbar) {
  /* Chromium's non-auto standard properties override WebKit pseudo styling.
     Reset both so thumb hover/drag colors, radius and compact width all apply. */
  html .key-create-dialog,
html .key-group-workspace,
html .group-picker-panel,
  html .key-create-dialog *,
  html .key-group-workspace *,
  html .group-picker-panel * {
    scrollbar-color: auto !important;
    scrollbar-width: auto !important;
  }
  html .key-create-dialog::-webkit-scrollbar,
html .key-group-workspace::-webkit-scrollbar,
html .group-picker-panel::-webkit-scrollbar,
  html .key-create-dialog *::-webkit-scrollbar,
  html .key-group-workspace *::-webkit-scrollbar,
  html .group-picker-panel *::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
  }
  html .key-create-dialog::-webkit-scrollbar-track,
html .key-group-workspace::-webkit-scrollbar-track,
html .group-picker-panel::-webkit-scrollbar-track,
  html .key-create-dialog *::-webkit-scrollbar-track,
  html .key-group-workspace *::-webkit-scrollbar-track,
  html .group-picker-panel *::-webkit-scrollbar-track,
  html .key-create-dialog::-webkit-scrollbar-corner,
  html .key-group-workspace::-webkit-scrollbar-corner,
  html .group-picker-panel::-webkit-scrollbar-corner,
  html .key-create-dialog *::-webkit-scrollbar-corner,
  html .key-group-workspace *::-webkit-scrollbar-corner,
  html .group-picker-panel *::-webkit-scrollbar-corner {
    background: var(--key-scroll-track) !important;
    border-radius: 6px !important;
  }
  html .key-create-dialog::-webkit-scrollbar-thumb,
html .key-group-workspace::-webkit-scrollbar-thumb,
html .group-picker-panel::-webkit-scrollbar-thumb,
  html .key-create-dialog *::-webkit-scrollbar-thumb,
  html .key-group-workspace *::-webkit-scrollbar-thumb,
  html .group-picker-panel *::-webkit-scrollbar-thumb {
    background: var(--key-scroll-thumb) !important;
    border: 2px solid var(--key-scroll-track) !important;
    border-radius: 6px !important;
  }
  html .key-create-dialog::-webkit-scrollbar-thumb:hover,
html .key-group-workspace::-webkit-scrollbar-thumb:hover,
html .group-picker-panel::-webkit-scrollbar-thumb:hover,
  html .key-create-dialog [class]::-webkit-scrollbar-thumb:hover,
  html .key-group-workspace [class]::-webkit-scrollbar-thumb:hover,
  html .group-picker-panel [class]::-webkit-scrollbar-thumb:hover {
    background: var(--key-scroll-hover) !important;
  }
  html .key-create-dialog:focus-visible::-webkit-scrollbar-thumb,
html .key-group-workspace:focus-visible::-webkit-scrollbar-thumb,
html .group-picker-panel:focus-visible::-webkit-scrollbar-thumb,
  html .key-create-dialog [class]:focus-visible::-webkit-scrollbar-thumb,
  html .key-group-workspace [class]:focus-visible::-webkit-scrollbar-thumb,
  html .group-picker-panel [class]:focus-visible::-webkit-scrollbar-thumb,
  html .key-create-dialog::-webkit-scrollbar-thumb:active,
  html .key-group-workspace::-webkit-scrollbar-thumb:active,
  html .group-picker-panel::-webkit-scrollbar-thumb:active,
  html .key-create-dialog [class]::-webkit-scrollbar-thumb:active,
  html .key-group-workspace [class]::-webkit-scrollbar-thumb:active,
  html .group-picker-panel [class]::-webkit-scrollbar-thumb:active {
    background: var(--key-scroll-active) !important;
  }
}