:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; color: #252b36; background: #f7f8fb; }
body { margin: 0; }
.connection-action, .live-save button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 18px; border: 1px solid #d6deec; border-radius: 9px; background: white; color: #334765; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
/* V32: a quiet full-screen entry, shared with the real sidebar identity. */
.startup{--startup-ease:cubic-bezier(.22,.68,.2,1);position:fixed;inset:0;z-index:1000;min-height:480px;color:#232936}
.startup-surface{position:absolute;inset:0;background:#f8f9fb;transition:opacity .3s var(--startup-ease)}
.startup-mark{position:absolute;left:calc(50% - 44px);top:calc(45% - 94px);width:88px;height:88px;transform-origin:top left;filter:drop-shadow(0 5px 7px #20293808)}
.startup .brand-mark{display:block;width:100%;height:100%;overflow:visible}
.startup .mark-m{animation:startup-assemble .6s var(--startup-ease) both}
.startup .mark-arrow{transform-origin:64px 38px;animation:startup-arrow 1.8s var(--startup-ease) .25s infinite}
.startup-copy{position:absolute;top:calc(45% + 18px);left:50%;transform:translateX(-50%);width:min(400px,calc(100% - 40px));text-align:center;transition:opacity .16s,transform .2s var(--startup-ease)}
.startup-copy h1{font-size:30px;font-weight:650;letter-spacing:1px;line-height:1.4;margin:0}
.startup-descriptor{font-size:12px;letter-spacing:2.2px;line-height:1.8;color:#697386;margin:5px 0 0}
.startup-status-area{margin-top:34px;display:flex;flex-direction:column;align-items:center}
#startup-status{font-size:14px;font-weight:400;line-height:1.8;color:#626d7e;letter-spacing:.15px;margin:0;min-height:24px}
.startup-indicator{display:block;width:60px;height:2px;border-radius:2px;background:#e7eaf0;margin-top:14px;position:relative;overflow:hidden}
.startup-indicator i{display:block;width:24px;height:100%;border-radius:2px;background:#8f9bb0;animation:startup-wait 1.7s ease-in-out infinite}
.startup-detail{font-size:13px;line-height:1.8;color:#677286;margin:12px 0 0;max-width:330px;overflow-wrap:anywhere}
.startup-detail:empty,.startup-actions:empty{display:none}
.startup-actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:18px;max-height:28dvh;overflow:auto;width:100%}
.startup-actions p{font-size:13px;margin:0;color:#677286}.startup-actions code{font-size:12px;overflow-wrap:anywhere;color:#38445a}
.startup .connection-action{gap:21px;border-radius:8px;flex:none;color:#fff;background:#3562eb;border-color:#3562eb;transition:background .15s,transform .15s;box-shadow:0 2px 3px #20293808}
.startup .connection-action:hover{background:#294fc5;border-color:#294fc5}.startup .connection-action:active{transform:translateY(1px)}
.startup .connection-action:focus-visible{outline:2px solid #7791ce;outline-offset:4px}
.startup-footer{position:absolute;bottom:56px;left:20px;right:20px;text-align:center;color:#697386;font-size:12px;line-height:1.6;margin:0;transition:opacity .16s}
.startup[data-state=login] .startup-indicator,.startup[data-state=error] .startup-indicator{display:none}
.startup[data-state=login] .startup-status-area,.startup[data-state=error] .startup-status-area{margin-top:27px}
.startup[data-state=error] #startup-status{color:#92604c}
.startup[data-state=error] .mark-arrow{animation:none;opacity:.35}.startup[data-state=error] .mark-m{animation:none;opacity:.75}
.startup[data-state=login] .mark-arrow{animation:none;opacity:1}
.startup[data-state=entering]{pointer-events:none}
.startup[data-state=entering] .startup-surface,.startup[data-state=entering] .startup-copy,.startup[data-state=entering] .startup-footer{opacity:0}
.startup[data-state=entering] .startup-copy{transform:translate(-50%,-6px)}
.startup[data-state=entering] .mark-m,.startup[data-state=entering] .mark-arrow{animation:none}
@keyframes startup-assemble{from{stroke-dasharray:100;stroke-dashoffset:100;opacity:.2}to{stroke-dasharray:100;stroke-dashoffset:0;opacity:1}}
@keyframes startup-arrow{0%,100%{transform:translate(0,0);opacity:.72}45%{transform:translate(.8px,-1.2px);opacity:1}65%{opacity:1}}
@keyframes startup-wait{0%{transform:translateX(-27px) scaleX(.65);opacity:.35}45%{opacity:1;transform:translateX(16px) scaleX(1)}100%{transform:translateX(66px) scaleX(.65);opacity:.35}}
@media(max-width:600px){.startup-mark{left:calc(50% - 40px);top:calc(43% - 91px);width:80px;height:80px}.startup-copy{top:calc(43% + 17px)}.startup-copy h1{font-size:28px}.startup-descriptor{font-size:11px;letter-spacing:2px}.startup-status-area{margin-top:30px}.startup-footer{bottom:32px}}
@media(max-height:580px){.startup{min-height:0}.startup-mark{top:24px;width:64px;height:64px;left:calc(50% - 32px)}.startup-copy{top:104px}.startup-status-area,.startup[data-state=error] .startup-status-area,.startup[data-state=login] .startup-status-area{margin-top:12px}.startup-footer{display:none}}
@media(prefers-reduced-motion:reduce){.startup *{animation:none!important;transition:none!important}.startup-indicator i{transform:translateX(18px)}}
.startup[data-motion=off] *,.no-motion .startup *{animation:none!important;transition:none!important}
.startup[data-motion=off] .startup-indicator i,.no-motion .startup-indicator i{transform:translateX(18px)}
.live-account { position: relative; }
.live-account > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; border-radius: 8px; }
.live-account > summary::-webkit-details-marker { display: none; }
.live-account > summary:focus-visible { outline: 2px solid #3468e8; outline-offset: 3px; }
.live-account-menu { position: absolute; z-index: 70; top: calc(100% + 8px); right: 0; width: 180px; padding: 10px; background: #fff; border: 1px solid #dce3ef; border-radius: 10px; box-shadow: 0 10px 30px #24314a14; }
.live-account-menu strong { display: block; padding: 8px; font-size: 13px; overflow-wrap: anywhere; }
.live-account-menu button { width: 100%; text-align: left; }
.live-account .user-avatar { overflow: hidden; }
.live-account img { width: 100%; height: 100%; object-fit: cover; }
.live-account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.live-account button { min-height: 36px; }
.live-connection { display: flex; align-items: center; gap: 7px; color: #667285; font-size: 12px; line-height: 1.6; }
.live-connection::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #32a579; }
.a-project-nav .live-project-new { margin-top: 7px; color: #697991; font-size: 13px; }
.live-project-empty { padding: 64px 24px; text-align: center; }
.live-project-empty h1 { font-size: 24px; margin: 18px 0 12px; }
.live-project-empty p { color: #6d788c; line-height: 1.8; font-size: 14px; }
.live-project-empty .btn { margin-top: 16px; }
.live-empty-icon { display: inline-flex; padding: 15px; border-radius: 18px; color: #3468e8; background: #edf3ff; }
.live-empty-icon .icon { width: 28px; height: 28px; }
.live-save { max-width: 470px; width: calc(100vw - 48px); box-sizing: border-box; padding: 28px; border: 1px solid #dce3ef; border-radius: 18px; color: #252b36; box-shadow: 0 20px 80px #152c5733; }
.live-save::backdrop { background: #edf1f7aa; backdrop-filter: blur(2px); }
.live-save h2 { margin: 0 0 10px; font-size: 19px; }
.live-save p { color: #647087; line-height: 1.7; font-size: 14px; overflow-wrap: anywhere; }
.live-save small { display: block; color: #7a8496; line-height: 1.6; overflow-wrap: anywhere; }
.live-save-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.live-sync-tray { position: fixed; z-index: 90; right: 20px; bottom: 20px; font-size: 13px; color: #52637c; }
.live-sync-tray > summary { list-style: none; cursor: pointer; border: 1px solid #d9e3f2; border-radius: 20px; padding: 10px 16px; background: #fff; box-shadow: 0 4px 18px #2a43621a; }
.live-sync-tray > summary::-webkit-details-marker { display: none; }
.live-sync-tray > summary:focus-visible { outline: 2px solid #3468e8; outline-offset: 3px; }
.live-sync-panel { position: absolute; bottom: calc(100% + 8px); right: 0; width: 330px; max-height: min(65vh, 520px); overflow: auto; padding: 6px 14px; background: #fff; border: 1px solid #dce3ef; border-radius: 12px; box-shadow: 0 10px 30px #24314a1f; }
.live-sync-panel section { padding: 12px 0; border-bottom: 1px solid #edf0f5; }
.live-sync-panel section:last-child { border-bottom: 0; }
.live-sync-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f5; }
.live-sync-tools span { margin: 0; }
.live-draft-details { margin: 10px 0; }
.live-draft-details summary { cursor: pointer; color: #3e5b87; padding: 6px 0; }
.live-draft-details dl { margin: 8px 0; padding: 8px; background: #f7f9fc; border-radius: 6px; }
.live-draft-details dt { font-weight: 600; color: #303c50; }
.live-draft-details dd { margin: 8px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 160px; overflow: auto; }
.live-draft-details small { display: block; color: #758197; margin-bottom: 4px; }
.live-sync-panel strong { display: block; font-size: 13px; color: #303c50; overflow-wrap: anywhere; }
.live-sync-panel span { display: block; margin-top: 6px; font-size: 12px; }
.live-sync-panel p { margin: 6px 0; color: #9b5c31; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.live-sync-panel section > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.live-sync-panel button, .live-sync-panel a { min-height: 36px; border: 1px solid #d9e3f2; border-radius: 6px; background: #f8faff; padding: 0 9px; font: inherit; font-size: 12px; color: #3e5b87; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.live-row-sync { font-size: 10px; font-weight: 500; line-height: 1.5; color: #6a83a6; border: 1px solid #dce6f3; border-radius: 4px; padding: 1px 4px; white-space: nowrap; flex: 0 0 auto; }
.live-row-sync.failed, .live-row-sync.blocked, .live-row-sync.recovering, .live-row-sync.uncertain, .live-row-sync.upload-unknown { color: #a0642f; border-color: #eed7ba; background: #fffaf1; }
.live-row-sync.applied { color: #398267; border-color: #cfe6dc; }
[data-live="true"] .pool-cell-saved { color: #527bb5; }
[data-live="true"] .pool-cell.is-saved { --success-border: #cbdcf5; --success-soft: #eff5ff; }
@media (max-width: 600px) { .live-sync-tray { right: 12px; bottom: 12px; } .live-sync-tray > summary { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; } .live-sync-panel { width: min(330px, calc(100vw - 56px)); } .live-sync-panel button, .live-sync-panel a { min-height: 44px; } .live-row-sync { font-size: 10px; } }
.live-rejection { position: fixed; z-index: 100; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 14px 18px; background: #fff6ed; border: 1px solid #edc89e; border-radius: 10px; color: #7d4a16; font-size: 14px; max-width: min(650px, calc(100vw - 48px)); box-shadow: 0 6px 20px #0001; }
[data-live="true"] [data-action="undo"], [data-live="true"] [data-action="reset-demo"] { display: none !important; }
@media (max-width: 720px) { .live-account-name { display: none; } .live-account button { min-height: 44px; } .live-save { padding: 22px; } }
@media (max-width: 600px) {
  .a-top .live-account { position: absolute; top: 12px; right: 16px; z-index: 25; }
  .a-top .live-account > summary { width: 36px; justify-content: center; }
  .a-top .live-account .user-avatar { display: grid; }
  .a-top .create-wrap { right: 64px; }
  .a-top .project-activity { right: 116px; }
}
@media (max-width: 380px) { .a-top .project-activity > .btn { font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; } }