html{background:var(--x-canvas)}
body{
  font-family:var(--x-font-sans);
  color:var(--x-ink-950);
  background:
    radial-gradient(circle at 86% -8%,rgba(57,123,214,.08),transparent 34rem),
    linear-gradient(180deg,#f7f9fc 0%,var(--x-canvas) 38%,#eef3f8 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.app-authenticated{overflow-x:hidden}
::selection{background:rgba(47,123,232,.18);color:var(--x-navy-950)}
:focus-visible{outline:0;box-shadow:var(--x-shadow-focus)}

.app-layout{min-height:100vh}
.sidebar{
  width:var(--x-sidebar-width);
  padding:18px 14px 14px;
  background:
    radial-gradient(circle at 18% 4%,rgba(94,154,242,.22),transparent 18rem),
    linear-gradient(180deg,var(--x-navy-900) 0%,var(--x-navy-950) 52%,var(--x-navy-1000) 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:18px 0 48px rgba(9,31,61,.12);
}
.workspace{
  margin-left:var(--x-sidebar-width);
  width:calc(100% - var(--x-sidebar-width));
}
.sidebar-brand{
  min-height:74px;
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--x-radius-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.12);
}
.sidebar-brand:hover{
  transform:translateY(-1px);
  border-color:rgba(144,190,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 16px 32px rgba(0,0,0,.16);
}
.sidebar-wordmark{max-width:194px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.20))}
.side-nav{gap:3px;padding:4px 2px 6px}
.side-link{
  min-height:43px;
  gap:11px;
  padding:9px 10px;
  border-radius:var(--x-radius-md);
  color:rgba(223,234,249,.78);
  font-weight:650;
  letter-spacing:.005em;
  transition:
    background var(--x-duration-base) var(--x-ease-standard),
    color var(--x-duration-base) var(--x-ease-standard),
    transform var(--x-duration-base) var(--x-ease-standard);
}
.side-link:hover{
  color:#fff;
  background:rgba(255,255,255,.075);
  transform:translateX(2px);
}
.side-link.active{
  color:#fff;
  background:
    linear-gradient(90deg,rgba(55,126,227,.95),rgba(47,123,232,.78));
  box-shadow:0 10px 24px rgba(14,77,166,.28),inset 0 1px 0 rgba(255,255,255,.20);
}
.nav-icon{
  width:28px;height:28px;
  display:grid;place-items:center;
  flex:0 0 28px;
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:rgba(225,237,252,.92);
  font-size:14px;
}
.side-link.active .nav-icon{background:rgba(255,255,255,.15);color:#fff}
.side-link.disabled{opacity:.42}
.side-nav::-webkit-scrollbar{width:4px}
.side-nav::-webkit-scrollbar-thumb{background:rgba(180,205,238,.24);border-radius:999px}

.install-side-card{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--x-radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:none;
}
.sidebar-logout{margin-top:8px}
.logout-link{color:rgba(205,221,243,.68)}
.topbar{
  height:var(--x-topbar-height);
  padding:0 26px;
  gap:16px;
  background:rgba(248,250,253,.88);
  border-bottom:1px solid rgba(204,216,230,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.7);
}
@supports(backdrop-filter:blur(1px)){
  .topbar{backdrop-filter:blur(18px) saturate(1.08)}
}
.global-search{
  max-width:760px;
  height:44px;
  gap:10px;
  padding:0 12px;
  border:1px solid var(--x-line);
  border-radius:var(--x-radius-md);
  background:rgba(255,255,255,.82);
  box-shadow:var(--x-shadow-xs);
  transition:border-color var(--x-duration-base) var(--x-ease-standard),box-shadow var(--x-duration-base) var(--x-ease-standard),background var(--x-duration-base) var(--x-ease-standard);
}
.global-search:focus-within{
  background:#fff;
  border-color:rgba(47,123,232,.48);
  box-shadow:var(--x-shadow-focus),var(--x-shadow-xs);
}
.global-search input{color:var(--x-ink-950);font-size:13px}
.global-search input::placeholder{color:var(--x-ink-500)}
.global-search kbd{
  border:1px solid var(--x-line);
  border-bottom-color:var(--x-line-strong);
  border-radius:7px;
  background:#f6f8fb;
  color:var(--x-ink-500);
  box-shadow:inset 0 -1px 0 rgba(91,111,137,.08);
}
.topbar-actions{gap:8px}
.icon-button,.top-install-button{
  min-height:40px;
  border:1px solid var(--x-line);
  border-radius:var(--x-radius-md);
  background:rgba(255,255,255,.84);
  color:var(--x-ink-650);
  box-shadow:var(--x-shadow-xs);
  transition:transform var(--x-duration-fast) var(--x-ease-standard),border-color var(--x-duration-base) var(--x-ease-standard),background var(--x-duration-base) var(--x-ease-standard);
}
.icon-button:hover,.top-install-button:hover{
  transform:translateY(-1px);
  border-color:#bfd3eb;
  background:#fff;
}
.profile-chip{
  min-height:44px;
  padding:4px 8px 4px 4px;
  border:1px solid var(--x-line);
  border-radius:var(--x-radius-lg);
  background:rgba(255,255,255,.90);
  box-shadow:var(--x-shadow-xs);
}
.profile-avatar{
  width:36px;height:36px;
  border-radius:11px;
  background:linear-gradient(145deg,var(--x-navy-800),var(--x-cobalt-600));
  color:#fff;
  box-shadow:0 6px 14px rgba(23,83,163,.18);
}
.profile-copy strong{color:var(--x-ink-950);font-size:12px}
.profile-copy small{color:var(--x-ink-500);font-size:9px}
.profile-menu-popover{
  top:calc(100% + 10px);
  width:236px;
  padding:8px;
  border:1px solid var(--x-line);
  border-radius:var(--x-radius-lg);
  box-shadow:var(--x-shadow-lg);
}
.workspace-main{
  max-width:var(--x-content-max);
  margin:0 auto;
  padding:28px 30px 48px;
  container-type:inline-size;
  container-name:workspace;
}
.panel,.security-card,.org-section-panel,.people-list-card,.backup-action-card,.backup-list-card,.backup-policy-card{
  border-color:var(--x-line)!important;
  box-shadow:var(--x-shadow-sm)!important;
}
button,.primary-button,.secondary-button{
  border-radius:var(--x-radius-md);
  transition:
    transform var(--x-duration-fast) var(--x-ease-standard),
    box-shadow var(--x-duration-base) var(--x-ease-standard),
    border-color var(--x-duration-base) var(--x-ease-standard),
    background var(--x-duration-base) var(--x-ease-standard);
}
button:not(:disabled):hover,.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}
input,select,textarea{
  border-radius:var(--x-radius-md)!important;
  border-color:var(--x-line-strong)!important;
  background:#fff;
  color:var(--x-ink-950);
  transition:border-color var(--x-duration-base) var(--x-ease-standard),box-shadow var(--x-duration-base) var(--x-ease-standard);
}
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:rgba(47,123,232,.56)!important;
  box-shadow:var(--x-shadow-focus);
}
.design-preview-badge{
  display:inline-flex;align-items:center;gap:6px;
  min-height:28px;padding:0 9px;
  border:1px solid #cddcf0;border-radius:var(--x-radius-pill);
  background:linear-gradient(180deg,#fff,#f3f7fd);
  color:var(--x-navy-800);
  font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--x-shadow-xs);
}
.design-preview-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--x-cobalt-500);
  box-shadow:0 0 0 3px rgba(47,123,232,.12);
}
.mobile-menu{border-radius:var(--x-radius-md)}
@container workspace (max-width:980px){
  .profile-copy{display:none}
}
@media(max-width:900px){
  .sidebar{width:var(--x-sidebar-width)}
  .workspace{margin-left:0;width:100%}
  .topbar{padding:0 16px}
  .workspace-main{padding:22px 16px 40px}
}
@media(max-width:650px){
  .workspace-main{padding:16px 12px 32px}
  .design-preview-badge{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}