:root { font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; color: #25324a; font-size: 14px; font-synthesis: none; --line: #e6ebf2; --accent: #3268e8; }
* { box-sizing: border-box; }
body { margin: 0; background: #f4f6fa; }
button { font: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
button, a, summary { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--accent); }
[v-cloak] { display: none; }
.export-dialog { width: min(780px, 94vw); max-height: 88vh; padding: 24px; border: 1px solid var(--line); border-radius: 14px; color: inherit; box-shadow: 0 16px 60px #15254433; }
.export-dialog::backdrop { background: #17243b66; }
.export-heading, .export-navigation, .export-footer { display: flex; align-items: center; gap: 10px; }
.export-heading { justify-content: space-between; margin-bottom: 18px; }
.export-heading h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.export-navigation > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-list { overflow: auto; max-height: 45vh; min-height: 140px; margin: 16px 0; }
.export-list table { width: 100%; border-collapse: collapse; text-align: left; }
.export-list th, .export-list td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.export-list td:nth-child(2) { overflow-wrap: anywhere; }
.export-list td:last-child { white-space: nowrap; color: #64758e; }
.export-list input { width: 17px; height: 17px; accent-color: var(--accent); }
.export-folder { border: 0; padding: 0; background: none; color: var(--accent); text-align: left; overflow-wrap: anywhere; }
.export-hint { color: #64758e; line-height: 1.6; font-size: 12px; }
.export-error { color: #a33333; }
.export-footer { justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.export-footer > span { margin-right: auto; }
.export-footer .delete-button { color: #a33333; margin-left: 12px; }
.delete-dialog { box-sizing: border-box; width: min(400px, 92vw); padding: 28px; border: 1px solid var(--line); border-radius: 16px; color: inherit; box-shadow: 0 20px 70px #15254440; }
.delete-dialog::backdrop { background: #17243b66; }
.delete-dialog-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 12px; color: #c43d3d; background: #fff0f0; }
.delete-dialog h2 { margin: 0; font-size: 18px; font-weight: 600; }
.delete-dialog-items { list-style: none; max-height: min(180px, 25vh); overflow-y: auto; margin: 16px 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc; }
.delete-dialog-items li { padding: 4px 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.delete-dialog p { margin: 10px 0 26px; color: #64758e; font-size: 13px; line-height: 1.7; }
.delete-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.delete-dialog-actions .tool-button { min-width: 80px; height: 36px; }
.delete-dialog-actions .delete-confirm-button { color: #fff; background: #c43d3d; border-color: #c43d3d; }
.delete-dialog-actions .delete-confirm-button:hover { background: #ad3030; border-color: #ad3030; }
.directory-dialog label { display: block; margin: 22px 0 8px; font-size: 13px; color: #64758e; }
.directory-dialog input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dce3ed; border-radius: 8px; color: inherit; font: inherit; }
.directory-dialog input[aria-invalid="true"] { border-color: #c43d3d; }
.directory-dialog .directory-error { margin-top: 10px; color: #a33333; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.directory-dialog .delete-dialog-actions { margin-top: 24px; }
@media (max-width: 560px) { .export-navigation { flex-wrap: wrap; } .export-navigation > span { flex-basis: 100%; order: -1; } }
.login-stage { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 32px clamp(24px, 6vw, 96px) 20px; background: radial-gradient(ellipse at 10% 50%, #e6efff, transparent 65%), #f7f9fc; }
.login-brand { display: flex; align-items: center; gap: 20px; color: #58677f; }
.login-brand img { width: auto; height: 42px; }
.login-brand > span { padding-left: 20px; border-left: 1px solid #cfd9e8; letter-spacing: 2px; }
.login-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); align-items: center; gap: clamp(40px, 7vw, 120px); width: 100%; max-width: 1120px; margin: 48px auto; }
.login-eyebrow { display: inline-block; color: #3268e8; font-size: 13px; font-weight: 600; letter-spacing: 3px; margin-bottom: 20px; }
.login-intro h1 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 650; line-height: 1.4; letter-spacing: 1px; color: #1c3157; }
.login-intro > p { margin: 20px 0 28px; color: #64758e; font-size: 15px; line-height: 1.9; }
.login-illustration { width: min(360px, 100%); padding: 16px; background: #ffffffb3; border: 1px solid #fff; border-radius: 16px; box-shadow: 0 16px 50px #3860a00c; }
.login-preview-bar { display: flex; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid #e8edf5; }
.login-preview-bar i { width: 6px; height: 6px; border-radius: 50%; background: #c2d2e8; }
.login-preview-body { display: flex; gap: 16px; padding-top: 14px; }
.login-preview-list { display: flex; flex-direction: column; gap: 8px; width: 70px; padding-right: 16px; border-right: 1px solid #e8edf5; }
.login-preview-list b { display: grid; place-items: center; border-radius: 8px; height: 32px; font-size: 12px; color: #83a2d2; background: #edf3fc; }
.login-preview-list b:first-child { background: #3268e8; color: white; }
.login-preview-chat { flex: 1; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; }
.login-preview-chat span { width: 65%; height: 16px; border-radius: 5px; background: #eaf0f9; }
.login-preview-chat span:nth-child(even) { width: 48%; align-self: flex-end; background: #d7e5fc; }
.login-features { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; margin: 26px 0 0; padding: 0; color: #64758e; font-size: 12px; }
.login-features li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 50%; background: #7499d9; }
.login-card { padding: 36px 32px 24px; border: 1px solid #e4eaf3; border-radius: 20px; background: white; box-shadow: 0 20px 70px #233f7410; min-width: 0; }
.login-card-heading h2 { font-size: 25px; color: #25324a; font-weight: 650; }
.login-card-heading p { margin: 12px 0 24px; color: #75839a; line-height: 1.6; }
.login-frame { display: block; width: 100%; height: 340px; border: 0; background: white; }
.login-alert { margin: 0 0 12px; padding: 12px; border-radius: 8px; color: #805600; background: #fff3dc; line-height: 1.6; }
.login-support { margin: 16px 0 0; padding-top: 20px; border-top: 1px solid #edf0f5; color: #7e8b9f; font-size: 12px; line-height: 1.8; }
.login-footer { text-align: center; color: #8896aa; font-size: 12px; letter-spacing: 1px; }
@media (max-width: 780px) {
  .login-stage { padding: 24px 20px; }
  .login-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 440px; margin: 32px auto; }
  .login-intro h1 { font-size: 28px; }
  .login-intro h1 br { display: none; }
  .login-intro > p { margin: 12px 0 0; font-size: 14px; }
  .login-eyebrow, .login-illustration, .login-features, .login-desktop-break { display: none; }
  .login-card { padding: 28px 24px 20px; }
  .login-brand img { height: 34px; }
  .login-brand > span { font-size: 12px; letter-spacing: 1px; }
}
.platform-layout { display: grid; grid-template-columns: 192px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.platform-layout.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.platform-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand h1 { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: block; width: auto; height: 40px; flex-shrink: 0; }
h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: .2px; }
.brand-description { color: #25324a; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .5px; white-space: nowrap; }
.platform-caption { color: #8793a6; font-size: 12px; white-space: nowrap; }
aside { min-height: 0; overflow-y: auto; padding: 16px 8px; background: #fff; border-right: 1px solid var(--line); }
.list-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 18px; }
h2 { margin: 0; font-size: 13px; font-weight: 600; color: #68758a; }
.count { min-width: 22px; padding: 2px 6px; text-align: center; border-radius: 6px; color: #7b879a; background: #f1f4f8; font-size: 11px; }
.account { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px 13px; align-items: center; gap: 6px; width: 100%; padding: 14px 12px; text-align: left; color: #2458c6; background: #edf3ff; border: 1px solid #dce7ff; border-radius: 10px; }
.account:hover { background: #e4edff; }
.account + .account { margin-top: 10px; }
.account[aria-current="false"] { color: #58677f; background: #fff; border-color: var(--line); }
.account[aria-current="false"]:hover { background: #f4f6fa; }
.account-avatar { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: #fff; font-weight: 600; }
.account-info { flex: 1; min-width: 0; }
.account-info strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 36px; overflow: hidden; font-size: 13px; line-height: 18px; font-weight: 600; overflow-wrap: anywhere; }
.account-info > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; font-size: 12px; color: #7b8fae; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.account-arrow { width: 13px; color: #7d9ad3; }
.unread-slot { display: flex; align-items: center; justify-content: center; width: 32px; height: 20px; }
.unread-badge { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 20px; padding: 2px 5px; border-radius: 12px; background: #ef4444; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
#account-sidebar .list-heading { margin: 0 8px 12px; }
#account-sidebar .account { position: relative; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 11px 9px; border-radius: 8px; }
#account-sidebar .account + .account { margin-top: 6px; }
#account-sidebar .account[aria-current="true"] { box-shadow: inset 3px 0 0 var(--accent); }
#account-sidebar .account-avatar { grid-area: 1 / 1; width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }
#account-sidebar .account-info { grid-area: 1 / 2; }
#account-sidebar .account-arrow { display: none; }
#account-sidebar .account-info strong { display: block; height: auto; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
#account-sidebar .account-info > span { margin-top: 3px; font-size: 11px; line-height: 16px; }
#account-sidebar .account-info > span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 5px 2px 0; border-radius: 50%; background: currentColor; }
#account-sidebar .unread-slot { grid-area: 1 / 1; position: relative; align-self: center; justify-self: end; transform: translate(5px, -14px); width: auto; height: auto; pointer-events: none; }
#account-sidebar .unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px #fff; }
main { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 56px; padding: 10px 12px; flex-shrink: 0; }
.workspace-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; white-space: nowrap; }
.workspace-title strong { font-size: 15px; font-weight: 600; }
.workspace-title > .selected-account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.input-help .tool-button:not(:first-child) { margin-top: 16px; }
.tool-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; height: 34px; padding: 0 12px; white-space: nowrap; border: 1px solid #dce3ed; border-radius: 7px; background: #fff; color: #58677f; font-size: 12px; }
.tool-button:hover { border-color: #a7bee9; color: #2458c6; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 4px #3268e818; }
.primary:hover { background: #285bcf; border-color: #285bcf; color: #fff; }
.help { position: relative; }
.help summary { padding: 8px; list-style: none; cursor: pointer; color: #7b879a; font-size: 12px; white-space: nowrap; }
.help summary::-webkit-details-marker { display: none; }
.help[open] summary, .help summary:hover { color: var(--accent); }
.help-panel { position: absolute; z-index: 10; right: 0; top: 42px; width: 310px; padding: 20px; line-height: 1.8; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 35px #2234541a; font-size: 13px; }
.help-panel p { margin: 12px 0 0; color: #6a778c; }
.usage-help .help-panel { max-height: min(560px, 60vh); max-height: min(560px, 60dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.menu-error { flex-shrink: 0; margin: 0 20px 12px; padding: 10px 14px; border-radius: 7px; background: #fff3dc; color: #805600; }
.remote-stage { position: relative; flex: 1; min-height: 0; margin: 0 12px 12px; overflow: hidden; border: 1px solid #dfe5ef; border-radius: 10px; background: #fff; box-shadow: 0 3px 14px #25324a05; }
.remote-stage iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #fff; }
/* Preserve the frame and viewport size while another VM is visible */
.remote-stage iframe.remote-inactive { visibility: hidden; pointer-events: none; }
.remote-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #68758a; }
.remote-loading { padding: 24px; text-align: center; }
.workspace-toolbar > .toolbar-actions { gap: 6px; margin-left: auto; }
.workspace-toolbar .tool-button { padding: 0 10px; }
.workspace-toolbar > .remote-actions { gap: 4px; }
.remote-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.remote-actions .tool-button { height: 32px; padding: 0 8px; }
.remote-actions .batch-actions { gap: 4px; padding-left: 0; border-left: 0; }
.remote-actions .input-help > summary { display: inline-flex; align-items: center; height: 32px; padding: 0 8px; border: 1px solid #dce3ed; border-radius: 7px; background: #fff; color: #58677f; }
.remote-actions .usage-help > summary { padding: 7px 4px; color: #7b879a; }
.batch-actions { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid #dce2ec; }
.connection-status > summary { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 6px; background: #eaf5ef; color: #25734a; font-variant-numeric: tabular-nums; }
.connection-status > summary.has-errors { background: #fff0ec; color: #ba4038; }
.connection-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.connection-status .help-panel { left: 0; right: auto; width: min(310px, calc(100vw - 48px)); white-space: normal; }
.account-info > .connection-connected { color: #16834a; }
.account-info > .connection-error { color: #ba4038; }
.account-info > .connection-connecting, .account-info > .connection-queued { color: #a16b11; }
.tool-button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1000px) {
  .platform-layout { grid-template-columns: 176px minmax(0, 1fr); }
  .platform-caption { display: none; }
  .workspace-toolbar { padding: 12px 14px; }
  .remote-stage { margin: 0 12px 12px; }
}
@media (max-width: 700px) {
  .platform-layout { grid-template-columns: 144px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); }
  .platform-header { padding: 0 14px; }
  aside { padding: 20px 8px; }
  .account { grid-template-columns: minmax(0, 1fr) 32px; padding: 12px 8px; gap: 8px; }
  .account-avatar, .account-arrow { display: none; }
  #account-sidebar .account { grid-template-columns: minmax(0, 1fr) auto; gap: 4px; padding: 10px 8px; }
  #account-sidebar .account-info { grid-area: 1 / 1; }
  #account-sidebar .unread-slot { grid-area: 1 / 2; position: static; transform: none; }
  .workspace-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .toolbar-actions { flex-wrap: wrap; gap: 6px; }
  .workspace-toolbar > .toolbar-actions { justify-content: flex-start; margin-left: 0; }
  .connection-status .help-panel { width: min(290px, calc(100vw - 190px)); }
  .help-panel { left: 0; right: auto; width: min(290px, calc(100vw - 190px)); }
  .brand h1 { gap: 8px; }
  .brand-logo { height: 34px; }
  .brand-description { font-size: 13px; }
}
.account-switcher > summary { display: inline-flex; padding: 0 12px; }
.account-switcher[open] > summary { border-color: #a7bee9; background: #edf3ff; }
.account-switcher[open] .dropdown-arrow { transform: rotate(180deg); }
.account-switcher .account-dropdown { display: flex; flex-direction: column; left: 0; right: auto; width: min(272px, calc(100vw - 28px)); padding: 0; max-height: min(520px, calc(100dvh - 140px)); overflow: hidden; white-space: normal; border-radius: 12px; box-shadow: 0 12px 36px #22345426, 0 2px 8px #2234540a; }
.account-dropdown .list-heading { flex-shrink: 0; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.account-dropdown .list-heading h2 { color: #25324a; }
.account-dropdown-list { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #c5cede transparent; padding: 8px; }
.account-dropdown .account { grid-template-columns: 28px minmax(0, 1fr) 28px 12px; gap: 6px; padding: 8px; border-color: transparent; border-radius: 8px; }
.account-dropdown .account + .account { margin-top: 4px; }
.account-dropdown .account-avatar { display: grid; width: 28px; height: 28px; border-radius: 7px; font-size: 12px; background: #f1f4f8; }
.account-dropdown .unread-slot { width: 28px; }
.account-dropdown .unread-badge { min-width: 18px; padding: 1px 4px; font-size: 10px; }
.account-dropdown .account-arrow { display: block; }
.account-dropdown .account[aria-current="true"] { border-color: #dce7ff; }
.account-dropdown .account[aria-current="true"] .account-avatar { color: var(--accent); background: #fff; }
.account-dropdown .account-info strong { display: block; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.account-dropdown .account-info > span { margin-top: 3px; }
.account-dropdown .account:focus-visible { outline-offset: -2px; }
.account-dropdown-list > p { margin: 0; padding: 24px 12px; text-align: center; }
.account-dropdown-footer { flex-shrink: 0; padding: 8px; border-top: 1px solid var(--line); background: #f8fafd; }
.account-dropdown .expand-sidebar { width: 100%; height: 30px; }