:root{
  --sui-background:#f6f8f9;
  --sui-foreground:#101923;
  --sui-card:#ffffff;
  --sui-card-foreground:#172635;
  --sui-popover:#ffffff;
  --sui-muted:#eef3f5;
  --sui-muted-foreground:#667886;
  --sui-border:#dbe5ea;
  --sui-input:#d4e1e7;
  --sui-primary:#0b5f78;
  --sui-primary-foreground:#ffffff;
  --sui-accent:#e8f1f4;
  --sui-accent-foreground:#0d5369;
  --sui-destructive:#9e2a2b;
  --sui-ring:rgba(11,95,120,.34);
  --sui-radius:8px;
  --sui-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --sui-shadow-md:0 8px 22px rgba(15,35,47,.10);
  --sui-shadow-lg:0 22px 60px rgba(8,24,36,.18);
}

:root[data-theme="dark"]{
  --sui-background:#090f15;
  --sui-foreground:#e4edf4;
  --sui-card:#0d1822;
  --sui-card-foreground:#dbe8f1;
  --sui-popover:#0d1822;
  --sui-muted:#122433;
  --sui-muted-foreground:#8ba0b1;
  --sui-border:#223847;
  --sui-input:#294150;
  --sui-primary:#68a9c4;
  --sui-primary-foreground:#061018;
  --sui-accent:#132838;
  --sui-accent-foreground:#d8edf6;
  --sui-destructive:#ff6673;
  --sui-ring:rgba(104,169,196,.38);
  --sui-shadow-sm:0 1px 2px rgba(0,0,0,.24);
  --sui-shadow-md:0 10px 24px rgba(0,0,0,.30);
  --sui-shadow-lg:0 24px 70px rgba(0,0,0,.42);
}

.sui-card{
  min-width:0;
  border:1px solid var(--sui-border);
  border-radius:var(--sui-radius);
  background:var(--sui-card);
  color:var(--sui-card-foreground);
  box-shadow:var(--sui-shadow-sm);
}

.sui-card-elevated{
  border-radius:calc(var(--sui-radius) + 4px);
  box-shadow:var(--sui-shadow-lg);
}

.sui-section-card{
  padding:12px;
}

.sui-topbar{
  border:1px solid var(--sui-border);
  border-radius:calc(var(--sui-radius) + 2px);
  background:color-mix(in srgb,var(--sui-card) 94%,var(--sui-accent));
  box-shadow:var(--sui-shadow-sm);
}

.sui-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.sui-control-group{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  border:1px solid var(--sui-border);
  border-radius:var(--sui-radius);
  background:color-mix(in srgb,var(--sui-card) 82%,var(--sui-muted));
}

.sui-control-label{
  display:inline-flex;
  align-items:center;
  align-self:stretch;
  color:color-mix(in srgb,var(--sui-foreground) 76%,var(--sui-primary));
  font-weight:850;
}

.sui-label{
  color:var(--sui-foreground);
  font-size:12px;
  font-weight:850;
}

.sui-helper-text,
.sui-dialog-description{
  color:var(--sui-muted-foreground);
  font-size:12px;
  line-height:1.5;
}

.sui-input,
.sui-select{
  min-width:0;
  border:1px solid var(--sui-input);
  border-radius:var(--sui-radius);
  background:var(--sui-card);
  color:var(--sui-foreground);
  box-shadow:inset 0 1px 0 rgba(15,23,42,.02);
}

.sui-input::placeholder{
  color:color-mix(in srgb,var(--sui-muted-foreground) 72%,transparent);
}

.sui-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid color-mix(in srgb,var(--sui-primary) 72%,var(--sui-border));
  border-radius:var(--sui-radius);
  background:var(--sui-primary);
  color:var(--sui-primary-foreground);
  font-weight:750;
  white-space:nowrap;
  box-shadow:var(--sui-shadow-sm);
}

.sui-button:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--sui-primary) 82%,var(--sui-foreground));
  background:color-mix(in srgb,var(--sui-primary) 88%,var(--sui-foreground));
}

.sui-button-secondary{
  border-color:var(--sui-border);
  background:var(--sui-card);
  color:var(--sui-foreground);
}

.sui-button-secondary:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--sui-primary) 34%,var(--sui-border));
  background:var(--sui-accent);
  color:var(--sui-accent-foreground);
}

.sui-button-danger{
  border-color:color-mix(in srgb,var(--sui-destructive) 82%,var(--sui-border));
  background:var(--sui-destructive);
  color:#fff;
}

.sui-button-danger:hover:not(:disabled){
  background:color-mix(in srgb,var(--sui-destructive) 86%,#111827);
}

.sui-dialog{
  border:1px solid var(--sui-border);
  border-radius:calc(var(--sui-radius) + 4px);
  background:var(--sui-popover);
  color:var(--sui-foreground);
  box-shadow:var(--sui-shadow-lg);
}

.sui-dialog-head{
  border-bottom:1px solid var(--sui-border);
  background:color-mix(in srgb,var(--sui-card) 86%,var(--sui-muted));
}

.sui-dialog-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  border-bottom:1px solid var(--sui-border);
  background:color-mix(in srgb,var(--sui-card) 92%,var(--sui-muted));
}

.sui-dialog-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 11px;
  border:1px solid transparent;
  border-radius:var(--sui-radius);
  background:transparent;
  color:var(--sui-muted-foreground);
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}

.sui-dialog-title,
.sui-section-title{
  color:var(--sui-foreground);
  font-weight:900;
}

.sui-form-grid{
  display:grid;
  gap:8px;
}

.sui-check{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--sui-muted-foreground);
  font-size:12px;
  font-weight:700;
}

.sui-check input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--sui-primary);
}

.sui-tabs{
  border:1px solid var(--sui-border);
  border-radius:calc(var(--sui-radius) + 2px);
  background:color-mix(in srgb,var(--sui-card) 90%,var(--sui-muted));
  box-shadow:var(--sui-shadow-sm);
}

.sui-tab-group{
  display:flex;
  align-items:center;
  gap:6px;
}

.sui-tab-label{
  color:color-mix(in srgb,var(--sui-foreground) 76%,var(--sui-primary));
  font-weight:900;
  white-space:nowrap;
}

.sui-tab{
  border:1px solid transparent;
  border-radius:var(--sui-radius);
  background:transparent;
  color:var(--sui-muted-foreground);
  font-weight:800;
}

.sui-tab:hover{
  border-color:var(--sui-border);
  background:var(--sui-accent);
  color:var(--sui-accent-foreground);
}

.sui-tab.active{
  border-color:color-mix(in srgb,var(--sui-primary) 72%,var(--sui-border));
  background:var(--sui-primary);
  color:var(--sui-primary-foreground);
}

.sui-backdrop{
  background:rgba(7,18,28,.34);
}

.sui-input:focus-visible,
.sui-select:focus-visible,
.sui-button:focus-visible,
.sui-tab:focus-visible{
  outline:2px solid var(--sui-ring);
  outline-offset:2px;
}

.login-page{
  background:var(--sui-background);
}

.login-shell{
  width:min(432px,100%);
}

.login-card{
  gap:12px;
  padding:26px;
  border-color:var(--sui-border);
  border-radius:calc(var(--sui-radius) + 4px);
  background:var(--sui-card);
  color:var(--sui-card-foreground);
  box-shadow:var(--sui-shadow-lg);
}

.login-card-head{
  gap:12px;
  margin-bottom:8px;
}

.login-logo{
  width:44px;
  height:44px;
  border-color:var(--sui-border);
  border-radius:calc(var(--sui-radius) + 2px);
  background:var(--sui-muted);
}

.login-card h2{
  color:var(--sui-foreground);
  font-size:20px;
  font-weight:850;
}

.login-card label,
.account-card-title,
.rollback-field,
.about-section-title{
  color:var(--sui-foreground);
}

.login-status,
.account-panel-meta,
.account-user-meta,
.account-ai-status,
.about-panel-subtitle{
  color:var(--sui-muted-foreground);
}

.header{
  border-color:var(--sui-border);
  border-radius:calc(var(--sui-radius) + 2px);
  background:color-mix(in srgb,var(--sui-card) 94%,var(--sui-accent));
  box-shadow:var(--sui-shadow-sm);
}

.sidebar-brand{
  border-color:var(--sui-border);
  border-radius:calc(var(--sui-radius) + 2px);
  background:var(--sui-card);
  box-shadow:var(--sui-shadow-sm);
}

.sidebar-toggle{
  border:1px solid color-mix(in srgb,var(--sui-primary) 18%,var(--sui-border));
  border-radius:var(--sui-radius);
  background:var(--sui-accent);
  color:var(--sui-accent-foreground);
  font-weight:750;
}

.sidebar-toggle:hover{
  background:color-mix(in srgb,var(--sui-primary) 14%,var(--sui-accent));
  color:var(--sui-accent-foreground);
}

.control-group{
  border-color:var(--sui-border);
  border-radius:var(--sui-radius);
  background:color-mix(in srgb,var(--sui-card) 82%,var(--sui-muted));
}

.control-group-label,
.nav-group-label{
  color:color-mix(in srgb,var(--sui-foreground) 76%,var(--sui-primary));
}

.control-group-label{
  border-right-color:var(--sui-border);
}

.tabs.workspace-nav{
  border-color:var(--sui-border);
  border-radius:var(--sui-radius);
  background:color-mix(in srgb,var(--sui-card) 78%,var(--sui-muted));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 68%,transparent),var(--sui-shadow-sm);
}

.tabs.workspace-nav .nav-group{
  gap:2px;
  min-height:32px;
  padding:2px;
  border-color:color-mix(in srgb,var(--sui-border) 86%,transparent);
  border-radius:calc(var(--sui-radius) - 2px);
  background:color-mix(in srgb,var(--sui-card) 72%,var(--sui-muted));
}

.tabs.workspace-nav .nav-group-label{
  height:28px;
  padding:0 7px 0 5px;
  color:var(--sui-muted-foreground);
  font-size:10.5px;
  font-weight:850;
}

.workspace-nav .tab-btn{
  position:relative;
  min-height:28px;
  border:1px solid transparent;
  border-radius:calc(var(--sui-radius) - 3px);
  background:transparent;
  color:color-mix(in srgb,var(--sui-foreground) 82%,var(--sui-muted-foreground));
  font-weight:760;
  box-shadow:none;
}

.workspace-nav .tab-btn:hover{
  border-color:color-mix(in srgb,var(--sui-primary) 26%,var(--sui-border));
  background:color-mix(in srgb,var(--sui-accent) 74%,var(--sui-card));
  color:var(--sui-accent-foreground);
  box-shadow:none;
}

.workspace-nav .tab-btn.active{
  border-color:color-mix(in srgb,var(--sui-primary) 44%,var(--sui-border));
  background:color-mix(in srgb,var(--sui-primary) 12%,var(--sui-card));
  color:var(--sui-accent-foreground);
  box-shadow:inset 0 -2px 0 var(--sui-primary);
}

.workspace-nav .tab-btn.active::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  width:3px;
  height:14px;
  transform:translateY(-50%);
  border-radius:999px;
  background:var(--sui-primary);
}

.workspace-nav .control-group-refresh{
  background:transparent;
}

.utility-modal,
.about-panel{
  border-color:var(--sui-border);
  border-radius:calc(var(--sui-radius) + 4px);
  background:var(--sui-popover);
  box-shadow:var(--sui-shadow-lg);
}

.account-panel-head,
.about-panel-head{
  border-bottom-color:var(--sui-border);
  background:color-mix(in srgb,var(--sui-card) 86%,var(--sui-muted));
}

.account-panel-title,
.about-panel-title,
.about-version-item strong,
.about-feature-card strong,
.about-release-title,
.about-note strong,
.account-user-name{
  color:var(--sui-foreground);
}

.account-card,
.account-user-row,
.about-version-item,
.about-feature-card,
.about-release,
.about-note{
  border-color:var(--sui-border);
  border-radius:var(--sui-radius);
  background:var(--sui-card);
  box-shadow:var(--sui-shadow-sm);
}

.account-user-row.active{
  border-color:color-mix(in srgb,var(--sui-primary) 70%,var(--sui-border));
  background:color-mix(in srgb,var(--sui-primary) 8%,var(--sui-card));
}

.account-card-actions{
  border-top-color:var(--sui-border);
}

.account-source-group{
  border-color:var(--sui-border);
  background:color-mix(in srgb,var(--sui-card) 92%,var(--sui-muted));
}

.account-source-badge{
  border-color:var(--sui-border);
  background:var(--sui-card);
}

.account-source-badge.configured,
.account-source-auto .account-source-badge{
  border-color:color-mix(in srgb,var(--sui-primary) 42%,var(--sui-border));
  background:color-mix(in srgb,var(--sui-primary) 9%,var(--sui-card));
  color:var(--sui-primary);
}

.account-source-config-row{
  border-color:var(--sui-border);
  background:color-mix(in srgb,var(--sui-card) 94%,var(--sui-muted));
}

.account-source-config-meta em.configured{
  color:var(--sui-primary);
}

.rollback-body{
  background:var(--sui-popover);
}

.utility-backdrop,
.about-backdrop{
  background:rgba(7,18,28,.34);
}

.login-card input:not([type="checkbox"]),
.login-card select,
.workspace-controls input:not([type="checkbox"]),
.workspace-controls select,
.workspace-nav input:not([type="checkbox"]),
.workspace-nav select,
.utility-modal input:not([type="checkbox"]),
.utility-modal select,
.about-panel input:not([type="checkbox"]),
.about-panel select{
  border:1px solid var(--sui-input);
  border-radius:var(--sui-radius);
  background:var(--sui-card);
  color:var(--sui-foreground);
  box-shadow:inset 0 1px 0 rgba(15,23,42,.02);
}

.login-card input:not([type="checkbox"])::placeholder,
.utility-modal input:not([type="checkbox"])::placeholder{
  color:color-mix(in srgb,var(--sui-muted-foreground) 72%,transparent);
}

.login-card button,
.workspace-controls button,
.workspace-nav button,
.utility-modal button,
.about-panel button{
  border:1px solid color-mix(in srgb,var(--sui-primary) 72%,var(--sui-border));
  border-radius:var(--sui-radius);
  background:var(--sui-primary);
  color:var(--sui-primary-foreground);
  font-weight:750;
  box-shadow:var(--sui-shadow-sm);
}

.login-card button:hover:not(:disabled),
.workspace-controls button:hover:not(:disabled),
.workspace-nav button:hover:not(:disabled),
.utility-modal button:hover:not(:disabled),
.about-panel button:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--sui-primary) 82%,var(--sui-foreground));
  background:color-mix(in srgb,var(--sui-primary) 88%,var(--sui-foreground));
}

.workspace-controls button.secondary,
.workspace-nav button.secondary,
.utility-modal button.secondary,
.about-panel button.secondary{
  border-color:var(--sui-border);
  background:var(--sui-card);
  color:var(--sui-foreground);
}

.workspace-controls button.secondary:hover:not(:disabled),
.workspace-nav button.secondary:hover:not(:disabled),
.utility-modal button.secondary:hover:not(:disabled),
.about-panel button.secondary:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--sui-primary) 34%,var(--sui-border));
  background:var(--sui-accent);
  color:var(--sui-accent-foreground);
}

.utility-modal button.danger{
  border-color:color-mix(in srgb,var(--sui-destructive) 82%,var(--sui-border));
  background:var(--sui-destructive);
  color:#fff;
}

.utility-modal button.danger:hover:not(:disabled){
  background:color-mix(in srgb,var(--sui-destructive) 86%,#111827);
}

.utility-modal .sui-dialog-tab{
  border-color:transparent;
  background:transparent;
  color:var(--sui-muted-foreground);
  box-shadow:none;
}

.utility-modal .sui-dialog-tab:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--sui-primary) 28%,var(--sui-border));
  background:var(--sui-accent);
  color:var(--sui-accent-foreground);
}

.utility-modal .sui-dialog-tab.active,
.utility-modal .sui-dialog-tab[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--sui-primary) 68%,var(--sui-border));
  background:var(--sui-primary);
  color:var(--sui-primary-foreground);
  box-shadow:0 1px 2px rgba(11,95,120,.16);
}

.login-card :is(input,select,button):focus-visible,
.workspace-controls :is(input,select,button):focus-visible,
.workspace-nav :is(input,select,button):focus-visible,
.utility-modal :is(input,select,button):focus-visible,
.about-panel :is(input,select,button):focus-visible,
.sidebar-toggle:focus-visible{
  outline:2px solid var(--sui-ring);
  outline-offset:2px;
}

.account-check{
  color:var(--sui-muted-foreground);
}

.account-check input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--sui-primary);
}

:root[data-theme="dark"] .utility-backdrop,
:root[data-theme="dark"] .about-backdrop{
  background:rgba(0,0,0,.58);
}

:root[data-theme="dark"] .header{
  background:color-mix(in srgb,var(--sui-card) 92%,var(--sui-muted));
}

:root[data-theme="dark"] .login-card input:not([type="checkbox"]),
:root[data-theme="dark"] .login-card select,
:root[data-theme="dark"] .workspace-controls input:not([type="checkbox"]),
:root[data-theme="dark"] .workspace-controls select,
:root[data-theme="dark"] .workspace-nav input:not([type="checkbox"]),
:root[data-theme="dark"] .workspace-nav select,
:root[data-theme="dark"] .utility-modal input:not([type="checkbox"]),
:root[data-theme="dark"] .utility-modal select,
:root[data-theme="dark"] .about-panel input:not([type="checkbox"]),
:root[data-theme="dark"] .about-panel select{
  background:#0f1b25;
  color:var(--sui-foreground);
}

@media (max-width:800px){
  .login-page{
    padding:14px;
  }

  .login-card{
    padding:22px;
    border-radius:calc(var(--sui-radius) + 2px);
  }

  .workspace-controls{
    gap:6px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .workspace-controls::-webkit-scrollbar,
  .tabs.workspace-nav::-webkit-scrollbar{
    display:none;
  }

  .workspace-controls .control-group{
    flex:0 0 auto;
    min-height:38px;
    flex-wrap:nowrap;
  }

  .workspace-controls .control-group button,
  .workspace-controls .control-group select,
  .workspace-controls .control-group input{
    min-height:34px;
    min-width:max-content;
    white-space:nowrap;
  }

  .tabs.workspace-nav{
    gap:8px;
    padding:6px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
  }

  .workspace-nav .tab-btn{
    flex:0 0 auto;
  }

  .utility-modal,
  .about-panel{
    border-radius:calc(var(--sui-radius) + 2px);
  }

  .account-panel-head,
  .about-panel-head{
    padding:12px;
  }

  .account-panel-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:8px;
  }

  .account-panel-tabs .sui-dialog-tab{
    width:100%;
  }

  .account-card,
  .about-version-item,
  .about-feature-card,
  .about-release,
  .about-note{
    box-shadow:none;
  }
}