@view-transition{navigation:auto}
html{scroll-behavior:smooth}
.sidebar{view-transition-name:app-sidebar}
.topbar{view-transition-name:app-topbar}
.workspace-main{view-transition-name:app-main}

dialog{
  border:0;padding:0;background:transparent;
}
dialog::backdrop{
  background:rgba(6,22,45,.42);
  backdrop-filter:blur(7px) saturate(.95);
}
.install-dialog{
  position:relative;width:min(440px,calc(100vw - 32px));
  padding:26px;border:1px solid rgba(212,224,237,.92);
  border-radius:var(--x-radius-2xl);
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 34px 90px rgba(6,26,56,.24);
}
.install-dialog::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 92% 0%,rgba(47,123,232,.10),transparent 13rem);
}
.dialog-close{
  position:absolute;right:14px;top:14px;z-index:2;
  width:34px;height:34px;border:1px solid var(--x-line);border-radius:11px;
  background:#f7f9fc;color:var(--x-ink-500);
}
.dialog-close:hover{background:#fff;color:var(--x-ink-800)}
.dialog-icon{
  position:relative;z-index:1;width:54px;height:54px;display:grid;place-items:center;
  border-radius:16px;background:linear-gradient(145deg,var(--x-navy-800),var(--x-cobalt-500));
  color:#fff;font-size:22px;font-weight:900;box-shadow:0 12px 24px rgba(31,103,216,.19);
}
.install-dialog h2{
  position:relative;z-index:1;margin:18px 0 8px;
  color:var(--x-ink-950);font-size:23px;letter-spacing:-.55px;
}
.install-dialog p{
  position:relative;z-index:1;margin:0;color:var(--x-ink-650);font-size:12px;line-height:1.65;
}
.install-dialog-actions{position:relative;z-index:1;display:flex;gap:8px;margin-top:20px}
.install-dialog-actions button{min-height:40px;padding:0 14px}
.profile-menu-popover{
  transform-origin:top right;
  animation:popover-in var(--x-duration-base) var(--x-ease-emphasized);
}
@keyframes popover-in{
  from{opacity:0;transform:translateY(-5px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.profile-menu-popover a,.profile-menu-popover button{
  border-radius:10px!important;
  transition:background var(--x-duration-fast) var(--x-ease-standard),color var(--x-duration-fast) var(--x-ease-standard),transform var(--x-duration-fast) var(--x-ease-standard);
}
.profile-menu-popover a:hover,.profile-menu-popover button:hover{transform:translateX(1px)}

.success,.error{
  position:relative;overflow:hidden;margin-bottom:var(--x-space-150);padding:12px 14px 12px 40px;
  border-radius:var(--x-radius-md);font-size:9px;font-weight:750;line-height:1.45;
  box-shadow:var(--x-shadow-xs);
}
.success{border:1px solid #cfeadf;background:var(--x-success-soft);color:var(--x-success)}
.error{border:1px solid #f0cece;background:var(--x-danger-soft);color:var(--x-danger)}
.success::before,.error::before{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;display:grid;place-items:center;border-radius:50%;font-size:10px;
}
.success::before{content:"✓";background:#d7f0e5}
.error::before{content:"!";background:#f5dada}
details>summary{
  cursor:pointer;list-style:none;
}
details>summary::-webkit-details-marker{display:none}
details>summary::after{
  content:"+";
  float:right;color:var(--x-cobalt-600);font-size:15px;font-weight:700;
  transition:transform var(--x-duration-base) var(--x-ease-standard);
}
details[open]>summary::after{transform:rotate(45deg)}
details[open]>*:not(summary){animation:details-in var(--x-duration-slow) var(--x-ease-standard)}
@keyframes details-in{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}

select{
  background-image:
    linear-gradient(45deg,transparent 50%,#7d8ea3 50%),
    linear-gradient(135deg,#7d8ea3 50%,transparent 50%);
  background-position:
    calc(100% - 15px) 50%,
    calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:28px!important;
  appearance:none;
}
.empty-state,.people-empty,.org-empty-branch{
  border-radius:var(--x-radius-md);
  color:var(--x-ink-500);
}
.install-ready{
  box-shadow:0 0 0 3px rgba(47,123,232,.10),var(--x-shadow-xs)!important;
}
.install-installed{opacity:.68}
button:disabled{cursor:not-allowed}
button:active:not(:disabled),.primary-button:active,.secondary-button:active{transform:translateY(0) scale(.99)!important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .profile-menu-popover,details[open]>*:not(summary){animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

.action-confirm-dialog{
  position:relative;
  width:min(500px,calc(100vw - 32px));
  padding:28px;
  border:1px solid rgba(212,224,237,.94);
  border-radius:var(--x-radius-2xl);
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 34px 90px rgba(6,26,56,.26);
  overflow:hidden;
}
.action-confirm-dialog::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 94% 0%,rgba(189,53,53,.10),transparent 14rem);
}
.action-confirm-icon{
  position:relative;z-index:1;
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:18px;
  background:var(--x-danger-soft);
  color:var(--x-danger);
  font-size:24px;font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(189,53,53,.12);
}

.action-confirm-dialog h2{
  position:relative;z-index:1;
  margin:18px 0 8px;
  color:var(--x-ink-950);
  font-size:24px;
  letter-spacing:-.6px;
}
.action-confirm-dialog p{
  position:relative;z-index:1;
  margin:0;
  color:var(--x-ink-650);
  font-size:13px;
  line-height:1.65;
}
.action-confirm-actions{
  position:relative;z-index:1;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
}
.action-confirm-actions button{min-height:42px;padding:0 18px}
.confirm-proceed{
  border:1px solid transparent;
  background:var(--x-cobalt-600);
  color:#fff;
  box-shadow:0 9px 20px rgba(31,103,216,.18);
}
.action-confirm-dialog[data-tone="danger"] .confirm-proceed{
  background:linear-gradient(180deg,#ca4a4a,#ad3030);
  box-shadow:0 9px 20px rgba(173,48,48,.20);
}

.action-confirm-dialog[data-tone="warning"]::before{
  background:radial-gradient(circle at 94% 0%,rgba(184,110,8,.12),transparent 14rem);
}
.action-confirm-dialog[data-tone="warning"] .action-confirm-icon{
  background:var(--x-warning-soft);
  color:var(--x-warning);
  box-shadow:inset 0 0 0 1px rgba(184,110,8,.14);
}
.action-confirm-dialog[data-tone="warning"] .confirm-proceed{
  background:linear-gradient(180deg,#c6811a,#a96406);
  box-shadow:0 9px 20px rgba(169,100,6,.18);
}
@media(max-width:560px){
  .action-confirm-dialog{padding:24px 20px}
  .action-confirm-actions{flex-direction:column-reverse}
  .action-confirm-actions button{width:100%}
}