:root {
  color-scheme: light;
  --accent: #2cc6cc;
  --accent-strong: #159da3;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, white);
  --ink: #171920;
  --muted: #727783;
  --line: #e4e6eb;
  --line-strong: #d6d9e0;
  --surface: #fff;
  --surface-soft: #f5f6f8;
  --surface-warm: #faf9f8;
  --studio: #111319;
  --studio-soft: #1a1d25;
  --success: #18a278;
  --warning: #c88a28;
  --danger: #df4d57;
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(18,20,25,.05), 0 5px 18px rgba(18,20,25,.04);
  --shadow-lg: 0 22px 70px rgba(14,16,22,.18);
  --ease: cubic-bezier(.22,.78,.22,1);
  --fast: .16s;
  --normal: .23s;
  --slow: .36s;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; background: var(--surface-soft); }
body { margin: 0; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
a { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 2px;
}

.brand-wordmark { display: block; width: 250px; max-width: 100%; height: auto; }
.brand-appicon { display: block; width: 48px; height: auto; flex: 0 0 48px; }

/* Login und Einrichtung – gleiche Bühne wie Adboy */
.boot {
  min-height: 100vh; color: #fff; background: var(--studio); display: grid;
  place-content: center; justify-items: center; gap: 18px;
}
.boot-brand-lockup { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; animation: boot-pulse 1.8s var(--ease) infinite alternate; }
.boot-brand-lockup .brand-appicon { width: 70px; }
.boot-brand-lockup .brand-wordmark { width: min(270px, calc(100vw - 72px)); margin: -27px 0 0; }
.boot p { margin: 0; color: rgba(255,255,255,.52); font-size: 13px; }
.auth-shell { min-height: 100vh; background: #fff; display: grid; grid-template-columns: minmax(520px,1.18fr) minmax(420px,.82fr); }
.login-brand-stage {
  min-height: 700px; padding: 38px 52px; color: #fff; background:
    radial-gradient(circle at 72% 20%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 36%),
    radial-gradient(circle at 25% 88%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 38%),
    #12141a;
  position: relative; overflow: hidden; isolation: isolate;
}
.login-brand-stage::before, .login-brand-stage::after {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%; transform: rotate(-18deg) scaleY(.42);
}
.login-brand-stage::before { top: 8%; right: -180px; }
.login-brand-stage::after { bottom: -90px; left: -240px; transform: rotate(22deg) scaleY(.36); }
.login-brand-top { display: flex; align-items: center; }
.login-brand-lockup { display: flex; align-items: center; }
.login-brand-lockup .brand-appicon { width: 48px; }
.login-brand-lockup .brand-wordmark { width: 158px; margin-inline: -26px; }
.login-message { max-width: 660px; margin-top: clamp(90px,16vh,160px); }
.login-message > span, .auth-kicker {
  color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800;
}
.login-message h1 { margin: 18px 0; letter-spacing: -.065em; font-size: clamp(48px,5vw,78px); line-height: .98; }
.login-message h1 em { color: var(--accent); font-style: normal; }
.login-message p { max-width: 500px; margin: 0; color: rgba(255,255,255,.56); font-size: 17px; line-height: 1.55; }
.login-matrix { position: absolute; left: 52px; right: 40px; bottom: 44px; display: flex; align-items: end; gap: 10px; }
.login-matrix > div {
  width: 22%; padding: 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px;
  background: rgba(255,255,255,.035); animation: matrix-rise var(--slow) var(--ease) both;
}
.login-matrix > div:nth-child(2) { animation-delay: .05s; }
.login-matrix > div:nth-child(3) { animation-delay: .1s; }
.login-matrix > div:nth-child(4) { width: 15%; animation-delay: .15s; }
.login-matrix > div:first-child { width: 31%; }
.login-matrix i { display: block; height: 104px; border-radius: 7px; background:
  linear-gradient(145deg, rgba(44,198,204,.88), rgba(44,198,204,.15) 48%, rgba(255,255,255,.05));
  position: relative; overflow: hidden;
}
.login-matrix i::after { content: ""; position: absolute; inset: 18% 15%; border: 1px solid rgba(255,255,255,.24); transform: rotate(-8deg); }
.login-matrix > div:nth-child(2) i { height: 92px; filter: saturate(.35); }
.login-matrix > div:nth-child(3) i { height: 110px; background: linear-gradient(145deg,#fff,#8f949d 60%,#2c3038); }
.login-matrix > div:nth-child(4) i { height: 126px; background: linear-gradient(145deg,#242831,#090b0f); }
.login-matrix span { display: block; padding: 6px 3px 2px; color: rgba(255,255,255,.42); font-size: 9px; }
.login-panel { display: grid; place-items: center; padding: 48px; background: #fff; }
.auth-card { width: min(380px,100%); }
.auth-card h1 { margin: 9px 0 0; letter-spacing: -.045em; font-size: 34px; }
.auth-card > p { margin: 10px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.mobile-logo { display: none; margin-bottom: 26px; }
.auth-card footer { display: flex; justify-content: space-between; margin-top: 26px; color: #9a9da6; font-size: 10px; }
.auth-card footer span { display: flex; align-items: center; gap: 6px; }
.secure-dot, .save-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb,var(--success) 12%,transparent); }

/* App-Rahmen */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 210px minmax(0,1fr); background: var(--surface-soft); transition: grid-template-columns var(--normal) var(--ease); }
.app-shell.nav-collapsed { grid-template-columns: 64px minmax(0,1fr); }
.app-shell.has-subnav { grid-template-columns: 210px 188px minmax(0,1fr); grid-template-rows: 70px minmax(calc(100vh - 70px),auto); }
.app-shell.has-subnav.nav-collapsed { grid-template-columns: 64px 188px minmax(0,1fr); }
.app-shell.has-subnav > .sidebar { grid-column: 1; grid-row: 1/3; }
.sidebar {
  position: sticky; top: 0; z-index: 20; height: 100vh; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; color: #fff; background: #15171c; border-right: 1px solid #282b32;
}
.side-brand { flex: none; height: 68px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; }
.side-brand > button { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.brand-wordmark-wrap, .brand-icon-wrap { display: flex; align-items: center; justify-content: center; transition: opacity var(--fast) var(--ease), transform var(--normal) var(--ease); }
.brand-wordmark-wrap { transform: translateX(-5px); }
.brand-wordmark-wrap .brand-appicon { width: 50px; }
.brand-wordmark-wrap .brand-wordmark-white { width: 150px; margin-inline: -29px; }
.brand-icon-wrap { position: absolute; opacity: 0; transform: scale(.86); }
.brand-icon-wrap .brand-appicon { width: 52px; }
.app-shell.nav-collapsed .brand-wordmark-wrap { opacity: 0; transform: translateX(-6px) scale(.95); }
.app-shell.nav-collapsed .brand-icon-wrap { opacity: 1; transform: scale(1); }
.nav { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 11px 8px; }
.nav button, .logout-button {
  position: relative; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; overflow: hidden;
  color: rgba(255,255,255,.52); background: transparent; display: flex; align-items: center; gap: 11px;
  text-align: left; white-space: nowrap; transition: color var(--fast), background var(--fast), transform var(--fast);
}
.nav button:hover, .logout-button:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav button:active, .logout-button:active { transform: scale(.98); }
.nav button.active { color: #fff; background: rgba(255,255,255,.1); }
.nav button.active::before { content: ""; position: absolute; left: -8px; width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav button.platform-nav-item { margin-top: 17px; overflow: visible; }
.nav button.platform-nav-item::after { content: ""; position: absolute; top: -10px; left: 10px; right: 10px; height: 1px; background: rgba(255,255,255,.09); }
.nav-icon, .nav-icon svg, .logout-button > svg { width: 17px; height: 17px; flex: none; }
.nav-icon svg, .logout-button > svg, .icon-button svg, .quick-search svg, .studio-select-trigger svg, .organization-menu-toggle svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav button span, .logout-button span { min-width: 0; font-size: 12px; font-weight: 630; opacity: 1; transition: opacity var(--fast), transform var(--normal); }
.user-card { flex: none; padding: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.account-button { width: 100%; height: 53px; display: flex; align-items: center; gap: 10px; padding: 0 7px; overflow: hidden; white-space: nowrap; }
.account-button > span { flex: none; width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb,var(--accent) 78%,#23565a); color: #07191a; font-size: 9px; font-weight: 850; }
.account-button > .user-avatar { overflow: hidden; }
.account-button > .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-button i { min-width: 0; display: flex; flex-direction: column; text-align: left; font-style: normal; }
.account-button strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.account-button small { display: block; min-width: 0; margin-top: 3px; color: rgba(255,255,255,.44); font-size: 9px; line-height: 1.35; }
.account-button small span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { margin-top: 2px; }
.app-shell.nav-collapsed .nav button, .app-shell.nav-collapsed .logout-button { justify-content: center; gap: 0; padding-inline: 5px; }
.app-shell.nav-collapsed .nav button span, .app-shell.nav-collapsed .logout-button span, .app-shell.nav-collapsed .account-button i { width: 0; flex: 0; opacity: 0; transform: translateX(-8px); pointer-events: none; }
.app-shell.nav-collapsed .account-button { justify-content: center; padding-inline: 0; }
.secondary-sidebar {
  position: sticky; top: 70px; z-index: 14; grid-column: 2; grid-row: 2; align-self: start; height: calc(100vh - 70px); min-width: 0; overflow: hidden;
  color: var(--ink); background: #e5e7ea; border-right: 1px solid #d1d4d9; display: flex; flex-direction: column;
}
.secondary-nav { overflow: hidden; padding-top: 12px; }
.secondary-nav button { color: #717680; }
.secondary-nav button:hover { color: var(--ink); background: rgba(255,255,255,.5); }
.secondary-nav button.active { color: var(--ink); background: rgba(255,255,255,.82); box-shadow: 0 1px 3px rgba(20,22,27,.06); }
.secondary-nav button.active::before { background: var(--accent-strong); }
.main-shell { min-width: 0; }
.app-shell.has-subnav > .main-shell { display: contents; }
.app-shell.has-subnav .app-topbar { grid-column: 2/4; grid-row: 1; }
.app-shell.has-subnav .workspace { grid-column: 3; grid-row: 2; width: min(100%,1480px); }
.app-topbar {
  position: sticky; top: 0; z-index: 15; height: 70px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
}
.app-topbar > div, .top-actions { display: flex; align-items: center; }
.app-topbar > div:first-child { gap: 10px; }
.icon-button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: #5b606b; background: #fff; display: inline-grid; place-items: center; transition: border-color var(--fast), background var(--fast), transform var(--fast); }
.icon-button:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); }
.icon-button:active { transform: scale(.94); }
.icon-button svg { width: 16px; height: 16px; }
.topbar-context { display: flex; align-items: center; line-height: 1.1; }
.topbar-context strong { font-size: 15px; }
.topbar-context span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.top-actions { gap: 16px; }
.organization-cluster { display: flex; align-items: center; gap: 10px; }
.organization-menu { position: relative; flex: none; }
.organization-menu-toggle {
  min-width: 210px; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.organization-menu-toggle:hover, .organization-menu.is-open .organization-menu-toggle { border-color: var(--line-strong); background: var(--surface-soft); box-shadow: var(--shadow-sm); }
.organization-current { min-width: 0; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.organization-current strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 720; }
.organization-current small { color: var(--muted); font-size: 11px; font-weight: 400; }
.organization-menu-toggle > i { width: 15px; height: 15px; color: var(--muted); transition: transform var(--fast); }
.organization-menu-toggle > i svg { width: 15px; height: 15px; }
.organization-menu.is-open .organization-menu-toggle > i { transform: rotate(180deg); }
.organization-menu-popover {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; width: 270px; padding: 7px;
  border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 18px 48px rgba(18,20,25,.16);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px) scale(.98); transform-origin: top right;
  transition: opacity var(--fast), visibility var(--fast), transform var(--fast);
}
.organization-menu.is-open .organization-menu-popover { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.organization-menu-popover > button {
  width: 100%; min-height: 48px; padding: 7px 9px; border: 0; border-radius: 8px; color: var(--ink); background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; transition: background var(--fast);
}
.organization-menu-popover > button:hover, .organization-menu-popover > button.is-active { background: var(--surface-soft); }
.organization-menu-popover > button > span { min-width: 0; display: grid; gap: 2px; }
.organization-menu-popover strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 720; }
.organization-menu-popover small { color: var(--muted); font-size: 10px; font-weight: 400; }
.organization-menu-popover b { color: var(--accent-strong); font-size: 12px; font-weight: 500; opacity: 0; }
.organization-menu-popover .is-active b { opacity: 1; }
.quick-search { height: 30px; padding: 0 7px 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; display: flex; align-items: center; gap: 7px; font-size: 10px; transition: border-color var(--fast), box-shadow var(--fast); }
.quick-search:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.quick-search svg { width: 14px; height: 14px; }
.quick-search kbd { height: 19px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-soft); display: inline-flex; align-items: center; font-size: 8px; }
.save-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.account-menu { position: relative; flex: none; }
.topbar-user-button {
  height: 38px; max-width: 210px; padding: 0 10px 0 7px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); background: #fff; display: flex; align-items: center; gap: 8px; transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.topbar-user-button:hover, .account-menu.is-open .topbar-user-button { border-color: var(--line-strong); background: var(--surface-soft); box-shadow: var(--shadow-sm); }
.topbar-user-button > span:not(.user-avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.topbar-user-button > i { color: var(--muted); font-size: 13px; font-style: normal; line-height: 1; transition: transform var(--fast); }
.account-menu.is-open .topbar-user-button > i { transform: rotate(180deg); }
.topbar-avatar, .account-menu-avatar { flex: none; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb,var(--accent) 78%,#23565a); color: #07191a; font-weight: 850; }
.user-avatar.topbar-avatar { flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 8px; box-shadow: none; font-size: 9px; }
.account-menu-avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 10px; }
.topbar-avatar img, .account-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-menu-popover {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; width: 280px; padding: 10px;
  border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 18px 48px rgba(18,20,25,.16);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px) scale(.98); transform-origin: top right;
  transition: opacity var(--fast), visibility var(--fast), transform var(--fast);
}
.account-menu.is-open .account-menu-popover { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.account-menu-profile { display: flex; align-items: center; gap: 11px; padding: 4px 4px 12px; }
.account-menu-profile > div { min-width: 0; display: grid; gap: 2px; }
.account-menu-profile small, .account-menu-details dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.account-menu-profile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.account-menu-details { margin: 0; padding: 3px 4px 10px; border-top: 1px solid var(--line); }
.account-menu-details > div { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; padding-top: 9px; }
.account-menu-details dt, .account-menu-details dd { margin: 0; }
.account-menu-details dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 12px; font-weight: 680; }
.account-menu-logout {
  width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; color: #9c3440; background: #fff4f5;
  display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 720; transition: background var(--fast), transform var(--fast);
}
.account-menu-logout:hover { background: #ffe9ec; }
.account-menu-logout:active { transform: scale(.985); }
.account-menu-logout svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workspace { min-width: 0; padding: 24px 28px 44px; opacity: 0; transform: translateY(6px); transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease); }
.workspace.is-ready { opacity: 1; transform: none; }

/* Seiten, Controls und Formulare */
.page-head { min-height: 62px; margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.page-actions, .row-actions { display: flex; align-items: center; gap: 8px; }
.eyebrow { color: var(--accent-strong); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
h1, h2, h3 { letter-spacing: -.035em; }
.page-head h1 { margin: 5px 0 0; font-size: 27px; line-height: 1.05; }
.page-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.button {
  min-height: 34px; padding: 0 13px; border: 1px solid var(--ink); border-radius: 8px; color: #fff; background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; font-weight: 730;
  transition: transform var(--fast), background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.button:hover:not(:disabled) { background: #292c34; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(20,22,27,.1); }
.button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.button.accent { background: var(--accent); border-color: var(--accent); color: #092426; }
.button.accent:hover:not(:disabled) { background: color-mix(in srgb,var(--accent) 88%,white); border-color: color-mix(in srgb,var(--accent) 88%,white); }
.button.secondary { color: #535863; background: #fff; border-color: var(--line-strong); box-shadow: none; }
.button.secondary:hover:not(:disabled) { color: var(--ink); background: var(--surface-soft); border-color: #bfc3cb; }
.button.danger { background: var(--danger); border-color: var(--danger); }
.button.small { min-height: 30px; padding-inline: 10px; font-size: 10px; }
.button.full { width: 100%; min-height: 46px; margin-top: 6px; }
.toolbar { display: grid; grid-template-columns: minmax(220px,1fr) repeat(2,minmax(165px,.32fr)) auto; gap: 8px; margin-bottom: 18px; }
.field, .search {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--ink); background: #fff; outline: none; font-size: 13px;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.field:hover, .search:hover { border-color: #c7cad1; }
.field:focus, .search:focus { border-color: color-mix(in srgb,var(--accent) 72%,var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent); }
textarea.field { min-height: 96px; height: auto; padding-block: 11px; resize: vertical; line-height: 1.5; }
input[type="file"].field { height: auto; min-height: 44px; padding: 5px; color: var(--muted); }
input[type="file"]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 11px; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--ink); font-weight: 680; }
.field-label { display: grid; gap: 7px; color: #3c4048; font-size: 12px; font-weight: 700; }
.stack { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .wide { grid-column: 1/-1; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; background: #fff; font-size: 11px; font-weight: 600; transition: border-color var(--fast), background var(--fast); }
.check:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.check input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }

/* Eigene Adboy-artige Dropdowns */
.studio-select { min-width: 0; position: relative; }
.studio-select > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.studio-select-trigger {
  width: 100%; height: 40px; padding: 0 11px 0 13px; border: 1px solid var(--line-strong); border-radius: 9px;
  color: #555a65; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; font-size: 13px; font-weight: 620; transition: border-color var(--fast), box-shadow var(--fast), color var(--fast), background var(--fast);
}
.studio-select-trigger:hover { border-color: #c1c5cc; color: var(--ink); background: color-mix(in srgb,var(--surface-soft) 42%,white); }
.studio-select.is-open .studio-select-trigger { border-color: color-mix(in srgb,var(--accent) 54%,var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent); color: var(--ink); background: #fff; }
.studio-select-trigger > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.studio-select-trigger > i { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--muted); font-style: normal; transition: transform .2s var(--ease); }
.studio-select.is-open .studio-select-trigger > i { transform: rotate(180deg); }
.studio-select-trigger svg { width: 15px; height: 15px; }
.studio-select-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 90; width: max(100%,190px); padding: 6px;
  border: 1px solid color-mix(in srgb,var(--line) 86%,transparent); border-radius: 12px; background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px); box-shadow: 0 18px 42px rgba(20,22,27,.15), 0 3px 10px rgba(20,22,27,.07);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(.975); transform-origin: top;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.studio-select.is-open .studio-select-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.studio-select-menu > button { width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; font-size: 13px; font-weight: 620; transition: color var(--fast), background var(--fast); }
.studio-select-menu > button:hover { color: var(--ink); background: var(--surface-soft); }
.studio-select-menu > button.is-selected { color: var(--ink); font-weight: 740; }
.studio-select-menu > button b { color: var(--accent-strong); opacity: 0; transform: scale(.6) rotate(-12deg); transition: opacity var(--fast), transform var(--fast) var(--ease); }
.studio-select-menu > button.is-selected b { opacity: 1; transform: none; }

/* Logo-Bibliothek */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 16px; }
.logo-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--normal) var(--ease), border-color var(--normal), box-shadow var(--normal); }
.logo-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--accent) 24%,var(--line)); box-shadow: 0 15px 38px rgba(20,22,27,.1); }
.logo-preview { height: 168px; padding: 28px; display: grid; place-items: center; overflow: hidden; background-color: #f2f3f4; background-image: linear-gradient(45deg,#e6e8ea 25%,transparent 25%),linear-gradient(-45deg,#e6e8ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e8ea 75%),linear-gradient(-45deg,transparent 75%,#e6e8ea 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.logo-preview img { display: block; max-width: 100%; max-height: 100%; transition: transform var(--slow) var(--ease); }
.logo-card:hover .logo-preview img { transform: scale(1.035); }
.logo-meta { padding: 15px; }
.logo-meta h3 { margin: 0 0 7px; font-size: 17px; }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.meta-size { margin-top: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); font-size: 10px; font-weight: 650; }
.pill.published { color: #14714d; background: #e7f4ed; }
.pill.draft { color: #8b6415; background: #fff3d8; }
.pill.trash { color: #a33642; background: #fdebed; }
.card-actions { margin-top: 13px; display: flex; gap: 8px; }
.section-block { margin-top: 30px; }
.section-title { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: end; }
.section-title h2, .support-panel h2 { margin: 4px 0 0; font-size: 20px; }
.empty.compact { min-height: 72px; }
.invitation-row { grid-template-columns: minmax(220px,1fr) 180px auto; }
.support-panel { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.support-panel p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.organization-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 14px; }
.organization-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.organization-card h2 { margin: 13px 0 2px; font-size: 20px; }
.organization-card p { margin: 0; color: var(--muted); font-size: 11px; }
.organization-card dl { margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
.organization-card dl div { display: flex; justify-content: space-between; gap: 12px; }
.organization-card dt { color: var(--muted); font-size: 10px; }
.organization-card dd { margin: 0; font-size: 11px; font-weight: 700; }
.organization-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.billing-layout { display: grid; gap: 16px; max-width: 1040px; }
.billing-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.billing-hero h2 { margin: 12px 0 3px; font-size: clamp(24px,3vw,36px); }
.billing-hero p { margin: 0; color: var(--muted); }
.billing-seat { min-width: 150px; padding-left: 24px; border-left: 1px solid var(--line); }
.billing-seat strong { display: block; font-size: 30px; }
.billing-seat span { color: var(--muted); font-size: 11px; }
.billing-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.billing-metrics article { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.billing-metrics small,.billing-metrics strong { display: block; }
.billing-metrics small { margin-bottom: 8px; color: var(--muted); }
.billing-panel { padding: 22px; }
.billing-panel h2 { margin: 5px 0 8px; }
.billing-panel > p { max-width: 680px; color: var(--muted); line-height: 1.55; }
.billing-notice { margin: 0; }
.billing-change-notice { display: flex; align-items: center; gap: 12px; }
.billing-change-notice span { flex: 1; color: var(--muted); }
.billing-tabs { display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.billing-tabs button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: color var(--fast), background var(--fast), box-shadow var(--fast); }
.billing-tabs button:hover { color: var(--ink); background: var(--surface-soft); }
.billing-tabs button.active { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent); }
.billing-tabs button span { width: 15px; height: 15px; display: inline-grid; place-items: center; }
.billing-tabs button span svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.billing-tab-panel { display: none; }
.billing-tab-panel.active { display: grid; gap: 16px; }
.billing-overview-panel .button { margin-top: 10px; }
.billing-payment-panel { min-height: 210px; }
.billing-cycle-switch { display: inline-flex; overflow: hidden; margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; }
.billing-cycle-switch button { min-width: 105px; height: 34px; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 11px; font-weight: 700; }
.billing-cycle-switch button + button { border-left: 1px solid var(--line); }
.billing-cycle-switch button.active { color: var(--accent-ink); background: var(--accent-soft); }
.change-preview dl { display: grid; gap: 8px; margin: 0; }
.change-preview dl div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.change-preview dt { color: var(--muted); }
.change-preview dd { margin: 0; font-weight: 700; text-align: right; }
.billing-admin-summary { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.billing-admin-summary span { color: var(--muted); }
.billing-legal { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.plan-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 174px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.plan-card.current { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: var(--accent-soft); }
.plan-card.unavailable { opacity: .58; }
.plan-card small { color: var(--muted); font-size: 10px; }
.plan-card strong { margin: 8px 0 4px; font-size: 15px; }
.plan-card > span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.plan-card b, .plan-card em { margin-top: auto; padding-top: 13px; color: var(--accent-ink); font-size: 10px; font-style: normal; }
.plan-card .button { width: 100%; margin-top: auto; }
@media (max-width: 760px) {
  .billing-hero { align-items: flex-start; flex-direction: column; }
  .billing-seat { width: 100%; padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .billing-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .billing-tabs { overflow-x: auto; }
  .billing-tabs button { flex: 1 0 auto; padding: 0 12px; }
  .plan-grid { grid-template-columns: 1fr; }
}
.card-more { width: 30px; height: 30px; font-size: 13px; letter-spacing: 1px; }
.card-inline-edit { display: none; padding: 15px; border-top: 1px solid var(--line); background: #fff; }
.logo-card.is-editing { position: relative; z-index: 3; overflow: visible; transform: none; border-color: color-mix(in srgb,var(--accent) 46%,var(--line)); box-shadow: 0 16px 42px rgba(20,22,27,.14); }
.logo-card.is-editing .logo-summary { display: none; }
.logo-card.is-editing .card-inline-edit { display: grid; gap: 12px; }
.card-edit-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 2px; }
.card-inline-edit .studio-select-menu { width: 100%; }
.empty { grid-column: 1/-1; min-height: 170px; padding: 45px 24px; border: 1px dashed #c9ccd2; border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,.45); display: grid; place-items: center; text-align: center; font-size: 12px; }

/* Listen, Panels und Modale */
.data-list { display: grid; gap: 9px; }
.spaced-list { margin-top: 16px; }
.data-row { min-height: 58px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; grid-template-columns: minmax(160px,1fr) minmax(150px,.6fr) auto; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast); }
.data-row:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20,22,27,.07); }
.data-row strong, .data-row small { display: block; }
.data-row strong { font-size: 12px; }
.data-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.user-row { grid-template-columns: minmax(210px,1fr) minmax(180px,.8fr) auto auto; }
.user-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.user-identity > div { min-width: 0; }
.user-identity strong, .user-identity small, .user-details strong, .user-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-details { min-width: 0; }
.user-access { display: grid; justify-items: start; gap: 2px; }
.user-access small { margin: 0; }
.user-avatar { flex: 0 0 auto; width: 36px; height: 36px; overflow: hidden; border-radius: 10px; color: #0b3032; background: var(--accent-soft); display: inline-grid; place-items: center; font-size: 10px; font-weight: 850; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-editor { margin-bottom: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); display: flex; align-items: center; gap: 14px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 14px; font-size: 22px; }
.avatar-field { min-width: 0; flex: 1; }
.avatar-field small { color: var(--muted); font-size: 9px; font-weight: 500; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.panel h2 { margin: 0 0 18px; font-size: 18px; }
.inline-form { display: flex; gap: 8px; }
.link-button { padding: 0; border: 0; color: var(--accent-strong); background: none; font-size: 11px; font-weight: 700; }
.link-button:hover { text-decoration: underline; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 24px; overflow: auto; display: flex; align-items: flex-start; justify-content: center; background: rgba(15,16,20,.56); backdrop-filter: blur(5px); opacity: 0; transition: opacity .16s var(--ease); }
.modal-backdrop.is-visible { opacity: 1; }
.modal { width: min(720px,100%); margin: auto 0; overflow: visible; padding: 25px; border: 1px solid rgba(255,255,255,.7); border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.975); transition: transform var(--normal) var(--ease); }
.modal-backdrop.is-visible .modal { transform: none; }
.modal-head { margin-bottom: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.modal-head h2 { margin: 4px 0 0; font-size: 22px; }
.modal-head .icon-button { flex: none; font-size: 18px; }
.modal-actions { margin-top: 22px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.detail-preview { height: 210px; margin-bottom: 18px; border-radius: 10px; }
.variant-block { margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.variant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.variant-head small { margin-top: 4px; display: block; color: var(--muted); font-size: 10px; }
.versions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.version { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.notice { margin-bottom: 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--accent) 24%,white); border-radius: 10px; background: var(--accent-soft); color: #166569; font-size: 12px; }
.notice.error { border-color: color-mix(in srgb,var(--danger) 20%,white); background: color-mix(in srgb,var(--danger) 7%,white); color: #aa3842; }
.device-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 160; display: grid; gap: 8px; }
.toast { min-width: 270px; max-width: 380px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #fff; background: #22252b; box-shadow: var(--shadow-lg); font-size: 12px; animation: toast-in var(--normal) var(--ease) both; transition: opacity var(--normal), transform var(--normal); }
.toast::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.toast.error::before { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb,var(--danger) 16%,transparent); }
.toast.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); }

@keyframes matrix-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes boot-pulse { from { transform: scale(.985); opacity: .82; } to { transform: scale(1); opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr 430px; }
  .login-brand-stage { padding-inline: 36px; }
  .login-matrix { left: 36px; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar .search { grid-column: 1/-1; }
}

@media (max-width: 760px) {
  .auth-shell { display: block; background: #fff; }
  .login-brand-stage { display: none; }
  .login-panel { min-height: 100vh; padding: 32px 24px; }
  .mobile-logo { display: block; }
  .mobile-logo .brand-wordmark { width: 170px; }
  .app-shell, .app-shell.nav-collapsed { grid-template-columns: 64px minmax(0,1fr); }
  .app-shell.has-subnav, .app-shell.has-subnav.nav-collapsed { grid-template-columns: 64px 60px minmax(0,1fr); }
  .brand-wordmark-wrap { opacity: 0; }
  .brand-icon-wrap { opacity: 1; transform: scale(1); }
  .nav button, .logout-button { justify-content: center; gap: 0; padding-inline: 5px; }
  .nav button span, .logout-button span, .account-button i { display: none; }
  .secondary-nav { padding-inline: 7px; }
  .secondary-nav button { justify-content: center; gap: 0; padding-inline: 5px; }
  .account-button { justify-content: center; padding-inline: 0; }
  .quick-search span, .quick-search kbd, .save-state { display: none; }
  .topbar-user-button { width: 38px; padding: 0; justify-content: center; }
  .topbar-user-button > span:not(.user-avatar), .topbar-user-button > i { display: none; }
  .workspace { padding: 22px 16px 38px; }
  .split { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: minmax(180px,1fr) auto; }
  .user-row .user-details, .user-row .user-access { display: none; }
}

@media (max-width: 560px) {
  .organization-menu-toggle { min-width: 0; max-width: 155px; }
  .organization-current small { display: none; }
  .organization-menu-popover { width: min(270px,calc(100vw - 88px)); }
  .page-head { align-items: flex-start; flex-direction: column; }
  .toolbar, .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide, .toolbar .search { grid-column: auto; }
  .data-row { grid-template-columns: 1fr auto; }
  .data-row > :nth-child(2) { display: none; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100vh - 20px); padding: 20px; }
  .device-banner { align-items: flex-start; flex-direction: column; }
  .profile-editor { align-items: flex-start; flex-wrap: wrap; }
  .profile-editor .avatar-field { flex-basis: calc(100% - 90px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* UI refinement 1.22.2 --------------------------------------------------- */
body { font-size: 14px; line-height: 1.45; }
.workspace { width: min(100%, 1480px); margin-inline: auto; padding: 32px clamp(22px,3.2vw,52px) 56px; }
.page-head { min-height: 72px; margin-bottom: 24px; align-items: center; }
.page-head h1 { margin-top: 6px; font-size: clamp(30px,3.2vw,42px); line-height: 1; }
.page-head p { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.eyebrow { font-size: 11px; }
.topbar-context strong { font-size: 15px; }
.topbar-context span { font-size: 10px; }
.nav button span { font-size: 13px; }
.account-button strong { font-size: 12px; }
.account-button small { font-size: 10px; line-height: 1.5; }

.button { min-height: 38px; padding-inline: 15px; border-radius: 9px; font-size: 12px; }
.button.small { min-height: 32px; padding-inline: 11px; font-size: 11px; }
.button:hover:not(:disabled) { box-shadow: 0 7px 18px rgba(20,22,27,.1); }
.field-label { font-size: 13px; }
.toolbar { gap: 10px; margin-bottom: 22px; }
.field, .search, .studio-select-trigger { height: 44px; font-size: 14px; }
.studio-select-menu > button { min-height: 41px; font-size: 13px; }

.logo-grid { grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 18px; }
.logo-card { border-radius: 15px; box-shadow: 0 2px 4px rgba(18,20,25,.04),0 10px 28px rgba(18,20,25,.035); }
.logo-preview { height: 174px; }
.logo-meta { padding: 17px; }
.logo-meta h3 { font-size: 18px; line-height: 1.25; }
.meta-line { font-size: 12px; }
.pill { min-height: 24px; padding-inline: 9px; font-size: 11px; }

.panel, .support-panel, .billing-hero, .billing-metrics article, .organization-card, .data-row {
  border-color: color-mix(in srgb,var(--line) 92%,transparent);
  box-shadow: 0 2px 4px rgba(18,20,25,.035),0 10px 28px rgba(18,20,25,.025);
}
.panel { padding: 22px; border-radius: 15px; }
.panel h2 { font-size: 20px; }
.data-list { gap: 10px; }
.data-row { min-height: 66px; padding: 12px 15px; border-radius: 12px; }
.data-row strong { font-size: 13px; }
.data-row small { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.user-avatar { width: 40px; height: 40px; border-radius: 11px; font-size: 11px; }
.user-row { grid-template-columns: minmax(220px,1fr) minmax(190px,.8fr) auto auto; }
.section-block { margin-top: 36px; }
.section-title { margin-bottom: 15px; }
.section-title h2, .support-panel h2 { font-size: 22px; }
.support-panel { margin-top: 26px; padding: 22px; border-radius: 15px; }
.support-panel p { font-size: 13px; line-height: 1.5; }
.organization-card { padding: 22px; border-radius: 15px; }
.organization-card h2 { font-size: 22px; }
.organization-card p, .organization-card dd { font-size: 12px; }
.organization-card dt { font-size: 11px; }

.billing-layout { max-width: none; gap: 18px; }
.billing-hero { padding: 28px; border-radius: 16px; }
.billing-seat strong { font-size: 34px; }
.billing-seat span, .billing-metrics small, .plan-card > span, .billing-legal { font-size: 12px; }
.billing-metrics article { padding: 19px; border-radius: 14px; }
.billing-metrics strong { font-size: 18px; }
.billing-panel { padding: 26px; }
.billing-panel > p { font-size: 14px; }
.billing-tabs button { min-height: 43px; font-size: 12px; }
.plan-card { min-height: 190px; padding: 19px; border-radius: 13px; }
.plan-card small, .plan-card b, .plan-card em { font-size: 11px; }
.plan-card strong { font-size: 18px; }

/* Verfügbare Plätze direkt dort zeigen, wo Einladungen entstehen. */
.seat-overview {
  position: relative; isolation: isolate; overflow: hidden; margin-bottom: 22px; padding: 24px;
  border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius: 17px;
  background: linear-gradient(135deg,#fff 0%,color-mix(in srgb,var(--accent-soft) 68%,#fff) 100%);
  box-shadow: 0 2px 4px rgba(18,20,25,.03),0 16px 40px rgba(18,20,25,.055);
  display: grid; grid-template-columns: minmax(240px,.78fr) minmax(320px,1.22fr); align-items: center; gap: 42px;
}
.seat-overview::after {
  content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -85px; top: -120px;
  border: 1px solid color-mix(in srgb,var(--accent) 26%,transparent); border-radius: 50%;
  box-shadow: 0 0 0 28px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 58px color-mix(in srgb,var(--accent) 3%,transparent);
}
.seat-overview-value { margin-top: 7px; display: flex; align-items: baseline; gap: 10px; }
.seat-overview-value strong { font-size: clamp(38px,5vw,58px); line-height: .9; letter-spacing: -.055em; }
.seat-overview-value span { font-size: 17px; font-weight: 760; }
.seat-overview-copy p { max-width: 390px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.seat-overview-usage { min-width: 0; }
.seat-progress-head { margin-bottom: 10px; display: flex; justify-content: space-between; gap: 18px; font-size: 12px; }
.seat-progress-head span { color: var(--muted); }
.seat-progress { height: 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--line) 74%,white); }
.seat-progress i { display: block; width: var(--seat-usage); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent-strong),var(--accent)); transform-origin: left; animation: seat-progress-in .65s var(--ease) both; }
.seat-breakdown { margin-top: 13px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.seat-breakdown span { min-width: 0; padding: 10px 11px; border: 1px solid color-mix(in srgb,var(--line) 78%,transparent); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.6); font-size: 11px; }
.seat-breakdown b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 16px; }

/* Ruhige, funktionale Mikroanimationen. */
.workspace.is-ready .logo-card, .workspace.is-ready .data-row, .workspace.is-ready .panel,
.workspace.is-ready .organization-card, .workspace.is-ready .billing-hero, .workspace.is-ready .seat-overview {
  animation: surface-in .38s var(--ease) both;
}
.workspace.is-ready .logo-card:nth-child(2), .workspace.is-ready .data-row:nth-child(2), .workspace.is-ready .organization-card:nth-child(2) { animation-delay: .035s; }
.workspace.is-ready .logo-card:nth-child(3), .workspace.is-ready .data-row:nth-child(3), .workspace.is-ready .organization-card:nth-child(3) { animation-delay: .07s; }
.workspace.is-ready .logo-card:nth-child(4), .workspace.is-ready .data-row:nth-child(4), .workspace.is-ready .organization-card:nth-child(4) { animation-delay: .105s; }
.nav button.active::before { animation: nav-marker-in .28s var(--ease) both; }
.modal-backdrop { transition-duration: .2s; }
.modal { transform: translateY(18px) scale(.97); }
@keyframes surface-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes seat-progress-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nav-marker-in { from { opacity: 0; transform: scaleY(.4); } to { opacity: 1; transform: scaleY(1); } }

@media (max-width: 980px) {
  .workspace { padding-inline: 22px; }
  .seat-overview { grid-template-columns: 1fr; gap: 22px; }
  .user-row { grid-template-columns: minmax(190px,1fr) auto auto; }
  .user-row .user-details { display: none; }
}
@media (max-width: 760px) {
  .workspace { padding: 24px 16px 42px; }
  .page-head { align-items: flex-start; }
  .seat-overview { padding: 20px; }
  .seat-overview-value strong { font-size: 42px; }
  .seat-breakdown { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .page-actions { width: 100%; }
  .page-actions .button { flex: 1; }
  .seat-breakdown { grid-template-columns: 1fr; }
  .seat-breakdown span { display: flex; align-items: baseline; gap: 7px; }
  .seat-breakdown b { display: inline; }
  .support-panel { align-items: flex-start; flex-direction: column; }
}

/* Firmenübersicht 1.22.3 */
.organization-grid { grid-template-columns: repeat(auto-fill,minmax(350px,1fr)); gap: 18px; }
.organization-card {
  position: relative; overflow: hidden; min-height: 342px; padding: 24px; border-radius: 17px;
  display: flex; flex-direction: column; transition: transform var(--normal) var(--ease),border-color var(--normal),box-shadow var(--normal);
}
.organization-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--accent) 24%,var(--line)); box-shadow: 0 17px 42px rgba(20,22,27,.09); }
.organization-card-head { min-height: 82px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.organization-card h2 { margin-top: 15px; font-size: 24px; line-height: 1.05; }
.organization-card p { margin-top: 5px; }
.organization-pills { min-height: 24px; }
.super-admin-card { border-color: color-mix(in srgb,var(--accent) 34%,var(--line)); background: linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--accent-soft) 58%,#fff) 100%); }
.super-admin-card::after { content: ""; position: absolute; z-index: 0; right: -62px; top: -76px; width: 190px; height: 190px; border: 1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius: 50%; box-shadow: 0 0 0 26px color-mix(in srgb,var(--accent) 3%,transparent); pointer-events: none; }
.super-admin-card > * { position: relative; z-index: 1; }
.super-admin-pill { color: #0b5e62; background: color-mix(in srgb,var(--accent) 20%,white); }
.super-admin-mark { width: 44px; height: 44px; flex: none; border-radius: 13px; color: #07383b; background: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 8px 18px color-mix(in srgb,var(--accent) 22%,transparent); }
.organization-metrics { display: grid; grid-template-columns: 1.25fr .9fr .9fr; gap: 8px; margin-top: 18px; }
.organization-metrics > div { min-width: 0; min-height: 70px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb,var(--surface-soft) 72%,#fff); display: flex; flex-direction: column; justify-content: center; }
.organization-metrics span { color: var(--muted); font-size: 10px; font-weight: 650; }
.organization-metrics strong { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.organization-metrics small { margin-top: 2px; color: var(--accent-strong); font-size: 10px; font-weight: 700; }
.organization-seat-progress { height: 6px; margin: 11px 2px 1px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--line) 76%,white); }
.organization-seat-progress i { display: block; width: var(--organization-seat-usage); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent-strong),var(--accent)); transform-origin: left; animation: seat-progress-in .65s var(--ease) both; }
.organization-card dl { margin-top: 16px; }
.organization-card dl div { align-items: center; }
.organization-card .card-actions { margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.organization-card .card-actions .button { flex: 1 1 auto; }
@media (max-width: 720px) {
  .organization-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .organization-card { min-height: 0; padding: 20px; }
  .organization-metrics { grid-template-columns: 1fr 1fr; }
  .organization-metrics > div:first-child { grid-column: 1/-1; }
}

/* Nutzer- und Gerätekacheln 1.22.4 */
.user-tile-grid, .device-tile-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: 18px; }
.user-tile, .device-tile {
  min-width: 0; min-height: 300px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
  box-shadow: 0 2px 4px rgba(18,20,25,.035),0 10px 28px rgba(18,20,25,.035); display: flex; flex-direction: column;
  transition: transform var(--normal) var(--ease),border-color var(--normal),box-shadow var(--normal);
}
.user-tile:hover, .device-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--accent) 24%,var(--line)); box-shadow: 0 16px 40px rgba(20,22,27,.09); }
.user-tile-head, .device-tile-head { min-height: 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.user-tile-profile { margin-top: 15px; display: flex; align-items: center; gap: 14px; }
.user-tile-profile > div { min-width: 0; }
.user-tile-profile .tile-avatar { width: 62px; height: 62px; border-radius: 16px; font-size: 17px; }
.user-tile-profile h2 { margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 1.15; }
.user-tile-profile a { overflow: hidden; color: var(--muted); display: block; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-size: 12px; }
.user-tile-profile a:hover { color: var(--accent-strong); text-decoration: underline; }
.user-tile-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.user-tile-facts > div { min-width: 0; min-height: 58px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); display: flex; flex-direction: column; justify-content: center; }
.user-tile-facts > div.wide { grid-column: 1/-1; }
.user-tile-facts span, .device-tile-meta span { color: var(--muted); font-size: 10px; font-weight: 650; }
.user-tile-facts strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.user-tile-actions, .device-tile-actions { margin-top: auto; padding-top: 18px; }
.user-tile-actions .button, .device-tile-actions .button { width: 100%; }

.device-tile { min-height: 282px; }
.device-icon { width: 48px; height: 48px; border-radius: 13px; color: #0a575b; background: var(--accent-soft); display: grid; place-items: center; }
.device-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.device-tile-main { margin-top: 21px; }
.device-tile-main h2 { margin: 7px 0 4px; font-size: 22px; line-height: 1.15; }
.device-tile-main p { margin: 0; color: var(--muted); font-size: 12px; }
.device-tile-meta { margin-top: 20px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.device-tile-meta span, .device-tile-meta strong { display: block; }
.device-tile-meta strong { margin-top: 5px; font-size: 12px; }
.device-tile.is-revoked { background: color-mix(in srgb,var(--surface-soft) 72%,#fff); }
.device-tile.is-revoked .device-icon { color: var(--muted); background: var(--line); }
.device-revoked-note { min-height: 38px; color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.workspace.is-ready .user-tile, .workspace.is-ready .device-tile { animation: surface-in .38s var(--ease) both; }
.workspace.is-ready .user-tile:nth-child(2), .workspace.is-ready .device-tile:nth-child(2) { animation-delay: .04s; }
.workspace.is-ready .user-tile:nth-child(3), .workspace.is-ready .device-tile:nth-child(3) { animation-delay: .08s; }
.workspace.is-ready .user-tile:nth-child(4), .workspace.is-ready .device-tile:nth-child(4) { animation-delay: .12s; }
@media (min-width: 1380px) {
  .user-tile-grid, .device-tile-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .user-tile-grid, .device-tile-grid { grid-template-columns: 1fr; }
  .user-tile, .device-tile { min-height: 0; }
}

/* Freie Nutzerplätze 1.22.5 */
.user-seat-placeholder {
  min-height: 300px; padding: 9px; border: 1px dashed color-mix(in srgb,var(--accent) 38%,var(--line));
  background: linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 30%,#fff),#fff 70%); box-shadow: none;
}

/* Dialoge und Dropdowns 1.22.6 */
.modal .studio-select { z-index: 1; }
.modal .studio-select.is-open { z-index: 20; }
.modal .studio-select-menu { max-height: min(320px,calc(100vh - 120px)); overflow-y: auto; overscroll-behavior: contain; }

/* Nutzer-Unternavigation 1.22.10 */
.user-tab-panel { animation: surface-in .34s var(--ease) both; }
.invitation-list { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.invitation-list .data-row { border: 0; border-radius: 0; box-shadow: none; }
.invitation-list .data-row + .data-row { border-top: 1px solid var(--line); }
@media (max-width: 680px) {
  .user-tab-panel + .button { width: 100%; }
}
.user-seat-placeholder:hover { border-style: solid; background: color-mix(in srgb,var(--accent-soft) 36%,#fff); }
.user-seat-placeholder > button {
  width: 100%; min-height: 100%; padding: 24px; border: 0; border-radius: 11px; color: var(--text); background: transparent;
  display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer;
}
.seat-add-symbol {
  width: 54px; height: 54px; margin-bottom: 14px; border: 1px solid color-mix(in srgb,var(--accent) 54%,var(--line)); border-radius: 50%;
  color: #07585c; background: var(--accent-soft); display: grid; place-items: center; font-size: 30px; font-weight: 350; line-height: 1;
  transition: transform var(--normal) var(--ease),background var(--normal),box-shadow var(--normal);
}
.user-seat-placeholder strong { font-size: 14px; letter-spacing: .11em; }
.user-seat-placeholder small { margin-top: 7px; color: var(--muted); font-size: 11px; }
.user-seat-placeholder > button:hover .seat-add-symbol,
.user-seat-placeholder > button:focus-visible .seat-add-symbol { transform: scale(1.08) rotate(90deg); background: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb,var(--accent) 24%,transparent); }
.user-seat-placeholder > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 560px) {
  .user-seat-placeholder { min-height: 190px; }
}

/* Informationsarchitektur und Self-Service 1.23.0 */
.account-menu-self, .account-menu-logout {
  width: 100%; min-height: 38px; padding: 9px 10px; border: 0; border-radius: 9px; color: var(--text); background: transparent;
  display: flex; align-items: center; gap: 9px; font: inherit; font-size: 12px; cursor: pointer; transition: background var(--fast),transform var(--fast);
}
.account-menu-self { margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; }
.account-menu-self:hover { background: var(--surface-soft); }
.account-menu-self:active { transform: scale(.985); }
.account-menu-self svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-stack { display: grid; gap: 22px; }
.settings-panel { max-width: 940px; padding: 28px; }
.settings-panel .section-title { margin-bottom: 24px; }
.settings-panel .section-title h2 { margin-bottom: 0; }
.account-profile-editor { margin-bottom: 24px; }
.settings-form-separated { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.field[readonly] { color: var(--muted); background: var(--surface-soft); cursor: not-allowed; }
@media (max-width: 680px) {
  .settings-panel { padding: 20px; }
  .account-profile-editor { align-items: flex-start; }
}

/* Dashboard und Plugin-Download 1.24.0 */
.dashboard-head {
  min-height: 168px; margin-bottom: 22px; padding: 34px 36px; border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 87% 12%,rgba(44,198,204,.32),transparent 31%),linear-gradient(135deg,#15171c,#22262e);
  box-shadow: 0 18px 48px rgba(18,20,25,.13); display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.dashboard-head .eyebrow { color: var(--accent); }
.dashboard-head h1 { margin: 8px 0 0; font-size: clamp(36px,4.2vw,58px); line-height: .96; letter-spacing: -.055em; }
.dashboard-head p { margin: 13px 0 0; color: rgba(255,255,255,.6); font-size: 14px; }
.dashboard-head .button { flex: none; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.dashboard-metrics article { min-height: 126px; padding: 21px 23px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.dashboard-metrics span { color: var(--muted); font-size: 11px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-metrics strong { margin-top: auto; font-size: 34px; line-height: 1; letter-spacing: -.045em; }
.dashboard-metrics strong.dashboard-role { font-size: clamp(22px,2.4vw,30px); }
.dashboard-metrics small { margin-top: 6px; color: var(--muted); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 18px; }
.dashboard-grid .panel { min-height: 310px; }
.dashboard-plugin {
  position: relative; isolation: isolate; overflow: hidden; padding: 30px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 28px;
  background: linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--accent-soft) 62%,#fff) 100%);
}
.dashboard-plugin::after { content: ""; position: absolute; z-index: -1; right: -80px; bottom: -110px; width: 260px; height: 260px; border: 1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius: 50%; box-shadow: 0 0 0 34px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 72px color-mix(in srgb,var(--accent) 3%,transparent); }
.dashboard-plugin-copy { max-width: 570px; }
.dashboard-plugin-copy h2, .dashboard-actions h2 { margin: 8px 0 0; font-size: clamp(24px,2.5vw,34px); line-height: 1.05; }
.dashboard-plugin-copy p { max-width: 540px; margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.dashboard-plugin-release { min-width: 215px; padding: 13px; border: 1px solid color-mix(in srgb,var(--accent) 23%,var(--line)); border-radius: 13px; background: rgba(255,255,255,.72); display: flex; align-items: center; gap: 12px; }
.dashboard-plugin-release > div { min-width: 0; display: flex; flex-direction: column-reverse; gap: 3px; }
.dashboard-plugin-release strong { font-size: 13px; }
.dashboard-plugin-release small { color: var(--muted); font-size: 10px; }
.plugin-mark { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px; color: #e56f83; background: #32151c; display: grid; place-items: center; font-size: 18px; font-weight: 760; letter-spacing: -.04em; }
.dashboard-plugin-actions { grid-column: 1/-1; align-self: end; display: flex; align-items: center; gap: 14px; }
.dashboard-plugin-actions .button { text-decoration: none; }
.dashboard-plugin-actions small, .dashboard-plugin-error { color: var(--muted); font-size: 11px; }
.dashboard-actions { padding: 28px; }
.dashboard-action-list { margin-top: 20px; display: grid; gap: 7px; }
.dashboard-action-list button { width: 100%; min-height: 53px; padding: 8px 10px; border: 0; border-radius: 11px; color: var(--ink); background: var(--surface-soft); display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 11px; text-align: left; transition: background var(--fast),transform var(--fast); }
.dashboard-action-list button:hover { background: color-mix(in srgb,var(--accent-soft) 70%,#fff); transform: translateX(2px); }
.dashboard-action-list button > i { width: 31px; height: 31px; border-radius: 8px; color: var(--accent-strong); background: #fff; display: grid; place-items: center; font-style: normal; }
.dashboard-action-list svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-action-list button > span { min-width: 0; display: grid; gap: 2px; }
.dashboard-action-list strong { font-size: 12px; }
.dashboard-action-list small { color: var(--muted); font-size: 10px; }
.dashboard-action-list button > b { color: var(--muted); font-weight: 500; }
.workspace.is-ready .dashboard-head, .workspace.is-ready .dashboard-metrics article, .workspace.is-ready .dashboard-grid .panel { animation: surface-in .38s var(--ease) both; }
.workspace.is-ready .dashboard-metrics article:nth-child(2) { animation-delay: .04s; }
.workspace.is-ready .dashboard-metrics article:nth-child(3) { animation-delay: .08s; }
.workspace.is-ready .dashboard-grid .panel { animation-delay: .1s; }
@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid .panel { min-height: 0; }
}
@media (max-width: 720px) {
  .dashboard-head { min-height: 0; padding: 27px; align-items: flex-start; flex-direction: column; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-metrics article { min-height: 104px; }
  .dashboard-plugin { grid-template-columns: 1fr; padding: 24px; }
  .dashboard-plugin-actions { grid-column: 1; align-items: flex-start; flex-direction: column; }
}

/* LogoDock: compact administration */
:root { --shadow-sm: none; --radius: 10px; }
.workspace { max-width: 1200px; }
.sidebar { display: flex; flex-direction: column; }
.help-nav { margin-top: auto; padding-bottom: 18px; }
.content-tabs { border-bottom: 1px solid var(--line); padding: 0 32px; background: #fff; }
.section-tabs { display: flex; gap: 20px; overflow-x: auto; }
.section-tabs button { flex: none; display: flex; align-items: center; gap: 7px; padding: 16px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: #555a65; font-size: 13px; }
.section-tabs button.active { color: #087d7b; border-bottom-color: #087d7b; }
.section-tabs .nav-icon { width: 16px; height: 16px; }
.overview-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 20px 0; }
.overview-status .panel { padding: 24px; }
.dashboard-plugin { display: block; padding: 28px; background: #fff; border: 1px solid var(--line); box-shadow: none; }
.dashboard-plugin::before, .dashboard-plugin::after, .billing-hero::before, .billing-hero::after { display: none; }
.dashboard-plugin h2 { font-size: 24px; margin: 0 0 10px; }
.dashboard-plugin-release { margin: 24px 0; }
.release-facts { display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 0; }
.release-facts dt { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.release-facts dd { margin: 0; font-weight: 650; }
.dashboard-plugin details { margin-top: 18px; }
summary { cursor: pointer; font-weight: 600; }
.release-notes { white-space: pre-wrap; }
.team-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 18px 0 24px; }
.team-summary span { color: var(--muted); }
.team-summary progress { width: 120px; height: 8px; accent-color: #087d7b; }
.team-summary button { margin-left: auto; }
.team-list .data-row { display: grid; grid-template-columns: minmax(180px,1fr) 130px 110px minmax(140px,auto); gap: 16px; align-items: center; padding: 18px; }
.team-list .data-row > div { min-width: 0; overflow-wrap: anywhere; }
.billing-hero { background: #fff; box-shadow: none; border: 1px solid var(--line); padding: 24px; color: var(--ink); }
.billing-address { padding: 22px 0; border-bottom: 1px solid var(--line); }
.billing-address p { line-height: 1.8; }
.panel, .logo-card, .plan-card { box-shadow: none; }
.logo-card:hover { transform: none; box-shadow: none; }
.logo-preview { background-color: #c4c9cd; background-image: none; height: 190px; padding: 22px; }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.show-transparency .logo-preview { background-image: conic-gradient(#d9dcdf 25%,#b8bec3 0 50%,#d9dcdf 0 75%,#b8bec3 0); background-size: 16px 16px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #087d7b; outline-offset: 3px; }
@media (max-width: 700px) {
  .workspace { padding: 20px 14px; }
  .content-tabs { padding: 0 14px; }
  .section-tabs { gap: 16px; }
  .section-tabs .nav-icon { display: none; }
  .overview-status { grid-template-columns: 1fr; }
  .dashboard-plugin { padding: 20px; }
  .team-list .data-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px; }
  .team-list .row-actions { grid-column: 1/-1; flex-wrap: wrap; }
  .team-summary button { margin-left: 0; }
  .release-facts { gap: 18px; }
  .toolbar { flex-wrap: wrap; }
  .topbar-user-button > span { display: none; }
}
/* Keep administrative content stable while data arrives. */
.app-shell, .workspace, .workspace > *, .workspace.is-ready .panel, .workspace.is-ready .data-row, .workspace.is-ready .billing-hero, .workspace.is-ready .logo-card { animation: none; transition: none; }
.team-list { gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.team-list .data-row { border: 0; border-radius: 0; box-shadow: none; }
.team-list .data-row + .data-row { border-top: 1px solid var(--line); }
.team-list .data-row:hover { transform: none; box-shadow: none; }
.dashboard-plugin-release { padding: 0; border: 0; background: transparent; }
@media (max-width: 700px) {
  .topbar-user-button > .user-avatar { display: grid; }
  .team-list .data-row > :nth-child(2) { display: block; font-size: 12px; }
  .team-list .data-row > div:first-child { grid-column: 1/-1; }
}

.overview-status #overview-team { order: -1; }

/* 2.0.1 — shared content axis and compact dashboard */
:root {
  --content-max: 1240px;
  --content-inset: 56px;
  --content-gap: 16px;
  --preview-light: #f3f4f5;
  --preview-dark: #e4e7e9;
  --preview-cell: 12px;
}
.workspace { width: 100%; max-width: var(--content-max); margin-inline: 0; padding: 28px var(--content-inset) 40px; }
.content-tabs { padding-inline: var(--content-inset); }
.page-head { min-height: 0; margin-bottom: 22px; }
.app-shell, .modal { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"], .copyable, .release-notes, .data-row small, .billing-address p { -webkit-user-select: text; user-select: text; }
.dashboard-welcome { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; margin-bottom: 24px; }
.dashboard-welcome > div { min-width: 0; }
.dashboard-welcome h1 { margin: 6px 0 0; font-size: clamp(32px,3vw,44px); line-height: 1.1; letter-spacing: -.045em; overflow-wrap: anywhere; }
.dashboard-welcome .dashboard-context { margin-top: 7px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.dashboard-context span { padding-inline: 3px; }
.dashboard-plugin { min-height: 280px; display: grid; grid-template-columns: 176px minmax(0,1fr); gap: 28px; align-items: start; padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(115deg,var(--accent-soft),var(--surface) 60%); border-color: color-mix(in srgb,var(--accent) 15%,var(--line)); }
.plugin-visual { min-height: 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: color-mix(in srgb,var(--accent) 9%,var(--surface)); border: 1px solid color-mix(in srgb,var(--accent) 16%,var(--line)); border-radius: var(--radius-lg); }
.plugin-visual .brand-appicon { width: 88px; height: 88px; flex-basis: 88px; }
.plugin-visual > span { font-size: 11px; color: #46646a; font-weight: 650; }
.plugin-content { min-width: 0; }
.dashboard-plugin h2 { margin: 0; font-size: clamp(24px,2.2vw,30px); line-height: 1.15; letter-spacing: -.035em; }
.plugin-content > p { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.dashboard-plugin-release { min-width: 0; margin: 17px 0; display: block; }
.dashboard-plugin-release > div { display: block; }
.release-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.release-facts > div { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: rgba(255,255,255,.7); }
.release-facts dt { margin: 0; font-size: 11px; }
.release-facts dd { font-size: 11px; font-weight: 650; }
.dashboard-plugin-actions { margin: 0; display: flex; }
.dashboard-plugin-actions .button { min-height: 46px; height: auto; padding: 12px 18px; gap: 10px; font-size: 14px; }
.dashboard-plugin-actions svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plugin-help { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 22px; margin-top: 14px; }
.plugin-help details { margin: 0; min-width: 0; font-size: 12px; color: #535c67; }
.plugin-help summary { font-weight: 600; }
.plugin-help details[open] { flex-basis: 100%; }
.plugin-help p { line-height: 1.55; max-width: 65ch; }
.overview-status { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--content-gap); margin: var(--content-gap) 0 24px; }
.overview-status #overview-team { order: initial; }
.overview-status .status-card { min-width: 0; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border-radius: var(--radius); }
.status-card h2 { margin: 0; font-size: 14px; color: var(--muted); font-weight: 650; }
.status-copy { min-width: 0; }
.status-value { display: block; font-size: 26px; line-height: 1.2; letter-spacing: -.035em; }
.status-value > span { font-size: 15px; font-weight: 500; letter-spacing: normal; }
.status-value.status-plan { font-size: 20px; overflow-wrap: anywhere; }
.status-copy p { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.status-card .button { margin-top: auto; min-height: 34px; height: auto; padding: 8px 12px; font-size: 12px; }
.status-card > small { font-size: 12px; color: var(--muted); }
.recent-logos .section-title { margin-bottom: 12px; }
.recent-logos h2 { font-size: 17px; margin: 0; }
.recent-logo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.recent-logo { min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); text-align: left; }
.recent-logo .logo-preview { height: 100px; padding: 18px; }
.recent-logo-name { display: block; padding: 10px 12px; font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toolbar { grid-template-columns: minmax(180px,1fr) minmax(150px,.65fr) auto auto; align-items: center; gap: 10px; margin-bottom: var(--content-gap); }
.toolbar .search { grid-column: auto; min-width: 0; }
.logo-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.logo-meta { padding: 14px; border-top: 1px solid var(--line); }
.logo-preview, .show-transparency .logo-preview { background-color: var(--preview-light); background-image: conic-gradient(var(--preview-dark) 25%,var(--preview-light) 0 50%,var(--preview-dark) 0 75%,var(--preview-light) 0); background-size: var(--preview-cell) var(--preview-cell); background-position: 0 0; }
.hide-transparency .logo-preview { background-image: none; background-color: #c4c9cd; }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-card:hover .logo-preview img { transform: none; }
.preview-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #535c67; font-size: 12px; white-space: nowrap; cursor: pointer; }
.preview-switch input { position: absolute; z-index: 1; left: 0; scroll-margin-block: 100px; width: 34px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { pointer-events: none; width: 34px; height: 20px; flex: none; padding: 2px; border: 1px solid #9ca4ac; border-radius: 20px; background: #d7dce0; transition: background var(--fast); }
.switch-track::after { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 2px #0002; transition: transform var(--fast); }
.preview-switch input:checked + .switch-track { background: #087d7b; border-color: #087d7b; }
.preview-switch input:checked + .switch-track::after { transform: translateX(14px); }
.preview-switch input:focus-visible + .switch-track { outline: 3px solid #087d7b; outline-offset: 3px; }
@media (max-width: 1200px) {
  :root { --content-inset: 32px; }
  .logo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .toolbar { grid-template-columns: minmax(170px,1fr) minmax(150px,.8fr) auto; }
  .preview-switch { grid-column: 1/-1; min-height: 26px; justify-self: end; }
  .dashboard-plugin { grid-template-columns: 140px minmax(0,1fr); gap: 22px; padding: 24px; }
  .plugin-visual { min-height: 160px; }
}
@media (max-width: 1000px) {
  :root { --content-inset: 24px; }
  .overview-status { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .logo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-welcome { gap: 14px; }
  .dashboard-welcome h1 { font-size: 34px; }
}
@media (max-width: 700px) {
  :root { --content-inset: 16px; }
  .workspace { padding-block: 24px 32px; }
  .dashboard-welcome { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .dashboard-welcome h1 { font-size: 30px; }
  .dashboard-welcome .dashboard-context { font-size: 12px; }
  .dashboard-plugin { grid-template-columns: minmax(0,1fr); gap: 18px; min-height: 0; padding: 20px; }
  .plugin-visual { min-height: 0; padding: 10px 14px; flex-direction: row; justify-content: flex-start; gap: 12px; border-radius: var(--radius-sm); }
  .plugin-visual .brand-appicon { width: 40px; height: 40px; flex-basis: 40px; }
  .plugin-help { gap: 12px 18px; }
  .dashboard-plugin-actions .button { width: 100%; justify-content: center; }
  .overview-status { grid-template-columns: minmax(0,1fr); }
  .overview-status .status-card { padding: 18px; gap: 10px; }
  .recent-logo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .toolbar .search { grid-column: 1/-1; }
  .preview-switch { justify-self: start; }
  .page-head:not(.dashboard-welcome) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .page-head #add-logo { margin-left: auto; }
}
@media (max-width: 480px) {
  .logo-grid { grid-template-columns: minmax(0,1fr); }
  .toolbar { grid-template-columns: minmax(0,1fr); }
  .preview-switch { grid-column: auto; }
  .dashboard-welcome { flex-wrap: wrap; }
  .dashboard-welcome > div { flex: 1 1 170px; }
}
@media (max-width: 700px) {
  .app-topbar { padding-inline: 12px; gap: 12px; }
  .app-topbar > div:first-child, .topbar-context { min-width: 0; }
  .topbar-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { flex-shrink: 0; gap: 8px; }
  .organization-menu-toggle { max-width: 110px; }
  .release-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .release-facts > div { min-width: 0; flex-direction: column; gap: 3px; align-items: flex-start; }
  .release-facts dd { overflow-wrap: anywhere; }
}

.app-shell img, .modal img { -webkit-user-drag: none; }

/* Launch polish: one composed entrance, with feedback tied to user actions. */
:root {
  --surface-soft: #f7f9fa;
  --ink: #17242b;
  --muted: #61717a;
  --line: #dce5e8;
  --line-strong: #b8c8ce;
  --content-gap: 20px;
}
.sidebar { background: #17252c; border-right-color: #263a42; }
.nav button.active { background: #2a4149; }
.nav button.active::before { left: 0; }
.app-topbar { background: rgba(255,255,255,.94); }
.workspace { padding-top: 38px; padding-bottom: 64px; }
.dashboard-welcome { margin-bottom: 30px; }
.dashboard-welcome h1 { font-size: clamp(34px,3.3vw,50px); line-height: 1.08; }
.dashboard-welcome .dashboard-context { margin-top: 11px; font-size: 13px; }
.dashboard-plugin {
  min-height: 300px; grid-template-columns: 204px minmax(0,1fr); gap: 38px;
  padding: 34px; border: 1px solid #c9e4e5; border-radius: 22px;
  background: linear-gradient(115deg,#f0fbfa 0%,#fff 58%);
  box-shadow: 0 16px 38px rgba(24,69,72,.055);
}
.dashboard-plugin::after { display: none; }
.plugin-visual {
  position: relative; isolation: isolate; min-height: 204px; overflow: hidden;
  color: #fff; background: #1b363e; border: 0; border-radius: 16px;
}
.plugin-visual::before, .plugin-visual::after {
  content: ""; position: absolute; z-index: -1; width: 132px; height: 148px;
  border: 1px solid rgba(180,247,241,.27); border-radius: 10px;
  background: rgba(90,188,185,.10); box-shadow: 0 12px 25px rgba(0,0,0,.08);
}
.plugin-visual::before { transform: translate(13px,2px) rotate(12deg); }
.plugin-visual::after { transform: translate(-13px,-3px) rotate(-10deg); background: rgba(150,232,224,.08); }
.plugin-visual .brand-appicon { position: relative; z-index: 1; filter: drop-shadow(0 10px 16px rgba(0,0,0,.18)); }
.plugin-visual > span { position: relative; z-index: 1; color: #d5f5f0; font-size: 12px; }
.dashboard-plugin h2 { font-size: clamp(27px,2.5vw,34px); }
.plugin-content > p { max-width: 56ch; font-size: 15px; }
.release-facts { gap: 8px; }
.release-facts > div { background: #fff; border-color: #d7e7e8; padding: 7px 10px; }
.dashboard-plugin-actions .button { border-radius: 11px; }
.plugin-help { margin-top: 17px; }
.plugin-help summary { cursor: pointer; }
.overview-status .status-card {
  min-height: 175px; padding: 22px 24px; border-color: var(--line);
  border-radius: 16px; box-shadow: 0 8px 25px rgba(31,61,66,.035);
}
.status-card h2 { color: #52676e; font-size: 13px; }
.status-value { font-size: 30px; }
.status-card .button { margin-top: auto; }
.text-action { margin-top: 8px; padding: 0; border: 0; background: none; color: #087d7b; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.recent-logos { margin-top: 34px; }
.recent-logos h2 { font-size: 20px; }
.recent-logo { border-radius: 14px; transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast); }
.recent-logo:hover { border-color: #8fc7c6; box-shadow: 0 12px 25px rgba(31,61,66,.08); transform: translateY(-2px); }
.recent-logo:focus-visible { outline: 3px solid #087d7b; outline-offset: 3px; }
.workspace.is-ready > .dashboard-welcome { animation: dashboard-enter .46s var(--ease) both; }
.workspace.is-ready > .dashboard-plugin { animation: dashboard-enter .52s var(--ease) .07s both; }
.workspace.is-ready > .overview-status { animation: dashboard-enter .52s var(--ease) .14s both; }
.workspace.is-ready > .recent-logos:not([hidden]) { animation: dashboard-enter .52s var(--ease) .21s both; }
.workspace.is-ready .plugin-visual::before { animation: stack-back .7s var(--ease) .17s both; }
.workspace.is-ready .plugin-visual::after { animation: stack-front .7s var(--ease) .22s both; }
@keyframes dashboard-enter { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@keyframes stack-back { from { opacity: 0; transform: translate(27px,21px) rotate(18deg); } to { opacity: 1; transform: translate(13px,2px) rotate(12deg); } }
@keyframes stack-front { from { opacity: 0; transform: translate(-27px,21px) rotate(-18deg); } to { opacity: 1; transform: translate(-13px,-3px) rotate(-10deg); } }
@media (max-width: 1200px) { .dashboard-plugin { grid-template-columns: 170px minmax(0,1fr); gap: 26px; } .plugin-visual { min-height: 185px; } }
@media (max-width: 700px) {
  .workspace { padding-top: 25px; padding-bottom: 40px; }
  .dashboard-welcome { margin-bottom: 23px; }
  .dashboard-plugin { grid-template-columns: minmax(0,1fr); gap: 22px; padding: 21px; min-height: 0; }
  .plugin-visual { min-height: 88px; flex-direction: row; gap: 16px; justify-content: flex-start; padding-inline: 21px; }
  .plugin-visual::before, .plugin-visual::after { width: 58px; height: 65px; right: 20px; }
  .plugin-visual .brand-appicon { width: 48px; height: 48px; flex-basis: 48px; }
  .overview-status .status-card { min-height: 150px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace.is-ready > .dashboard-welcome, .workspace.is-ready > .dashboard-plugin,
  .workspace.is-ready > .overview-status, .workspace.is-ready > .recent-logos:not([hidden]),
  .workspace.is-ready .plugin-visual::before, .workspace.is-ready .plugin-visual::after { animation: none; }
  .recent-logo:hover { transform: none; }
}

/* Account dock and a clearer workspace frame. */
.sidebar { overflow: visible; }
.sidebar > .nav:not(.help-nav) { flex: 1 1 auto; padding-top: 20px; }
.nav button { height: 43px; }
.nav button.active { background: #304a52; }
.help-nav { flex: 0 0 auto; margin-top: auto; padding-block: 6px 10px; }
.sidebar-account { flex: 0 0 auto; padding: 11px 9px 14px; border-top: 1px solid rgba(255,255,255,.11); }
.sidebar-account .account-menu { width: 100%; }
.sidebar-account-button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px;
  padding: 7px; border: 1px solid transparent; border-radius: 11px;
  color: #f1f7f7; background: transparent; text-align: left;
  transition: background var(--fast), border-color var(--fast);
}
.sidebar-account-button:hover, .account-menu.is-open .sidebar-account-button, .sidebar-account-button.is-current {
  background: #304a52; border-color: rgba(114,205,200,.14);
}
.sidebar-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #9de4dd; color: #143338; font-size: 11px; }
.sidebar-account-label { display: grid; min-width: 0; flex: 1; gap: 2px; }
.sidebar-account-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.sidebar-account-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a8bdc1; font-size: 10px; }
.sidebar-account-chevron { flex: 0 0 13px; width: 13px; height: 13px; color: #a8bdc1; transition: transform var(--fast); }
.sidebar-account-chevron svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.account-menu.is-open .sidebar-account-chevron { transform: rotate(-90deg); }
.sidebar-account .account-menu-popover {
  top: auto; right: auto; bottom: 0; left: calc(100% + 13px);
  width: min(290px, calc(100vw - 90px)); max-height: calc(100vh - 16px); overflow-y: auto;
  border-radius: 15px; box-shadow: 0 20px 48px rgba(12,29,35,.2);
  transform: translateX(-7px) scale(.98); transform-origin: bottom left;
}
.sidebar-account .account-menu.is-open .account-menu-popover { transform: none; }
.app-shell.nav-collapsed .sidebar-account { padding-inline: 7px; }
.app-shell.nav-collapsed .sidebar-account-button { justify-content: center; padding: 7px 0; }
.app-shell.nav-collapsed .sidebar-account-label, .app-shell.nav-collapsed .sidebar-account-chevron { display: none; }
.organization-identity { min-width: 0; max-width: 290px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: #42565e; background: #f8fbfb; display: flex; align-items: center; gap: 8px; }
.organization-identity .nav-icon { color: #188f91; }
.organization-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.content-tabs { border-bottom-color: #dce5e8; background: #fcfefe; }
.section-tabs button { min-height: 52px; }
.workspace > .page-head { margin-bottom: 27px; }
.workspace .panel:not(.dashboard-plugin) { border-radius: 16px; box-shadow: 0 8px 28px rgba(28,65,70,.035); }
.workspace .field:not(:disabled), .workspace .search { border-color: #cbd8dc; }
.workspace .field:focus, .workspace .search:focus { border-color: #188f91; }
@media (max-width: 760px) {
  .sidebar-account { padding-inline: 7px; }
  .sidebar-account-button { justify-content: center; padding: 7px 0; }
  .sidebar-account-label, .sidebar-account-chevron { display: none; }
}
@media (max-width: 560px) {
  .organization-identity { max-width: min(120px, 27vw); padding-inline: 8px; }
  .organization-identity .nav-icon { display: none; }
}
@media (max-width: 360px) {
  .plugin-visual > span { display: none; }
  .plugin-visual { justify-content: center; }
  .release-facts { grid-template-columns: minmax(0,1fr); }
  .release-facts > div { min-height: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-account-button, .sidebar-account-chevron, .sidebar-account .account-menu-popover { transition: none; }
}

/* LogoDock identity: navy surfaces, cyan wayfinding, and an unframed mark. */
.auth-link { justify-self: end; margin: -2px 0 2px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.auth-link:hover { color: var(--accent-strong); }
.auth-success { display: grid; text-align: center; }
.auth-success > span { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; color: #fff; background: var(--success); font-size: 25px; }
.auth-success p { margin: 12px 0 26px; color: var(--muted); font-size: 14px; line-height: 1.55; }
:root {
  --accent: #1cc9d2;
  --accent-strong: #087f8d;
  --ink: #142135;
  --muted: #647487;
  --line: #dce6e9;
  --surface-soft: #f4f7f9;
  --studio: #142135;
}
.sidebar { background: #142135; border-right-color: #203b50; }
.nav button { color: #a9bbc9; }
.nav button:hover, .help-nav button:hover { color: #fff; background: #20384c; }
.nav button.active { color: #fff; background: #234056; }
.nav button.active .nav-icon, .nav button:hover .nav-icon { color: #1cc9d2; }
.nav button.active::before { background: #1cc9d2; }
.side-brand { height: 70px; padding: 0; justify-content: center; }
.side-brand > button { display: flex; align-items: center; justify-content: center; }
.brand-wordmark-wrap { width: 100%; transform: translateX(-2px); }
.brand-wordmark-wrap .brand-wordmark-white { width: 152px; max-width: calc(100% - 20px); margin: 0; }
.brand-icon-wrap { inset: 0; }
.brand-icon-wrap .brand-appicon { width: 38px; height: 38px; }
.login-brand-stage { background: radial-gradient(circle at 70% 20%,#225467 0%,transparent 42%),#142135; }
.login-brand-lockup .brand-wordmark-white { width: 180px; margin: 0; }
.boot-brand-lockup .brand-wordmark-white { width: min(280px,calc(100vw - 72px)); margin: 0; }
.login-matrix i { background: linear-gradient(145deg,#1cc9d2,rgba(28,201,210,.15) 48%,rgba(255,255,255,.05)); }
.dashboard-plugin { border-color: #c7e2e6; background: linear-gradient(115deg,#edfafa 0%,#fff 60%); }
.plugin-visual { background: #142135; border: 0; }
.plugin-visual::before, .plugin-visual::after { display: none; }
.plugin-visual .brand-appicon { width: 128px; height: 128px; flex-basis: 128px; filter: none; }
@media (max-width: 700px) {
  .plugin-visual { min-height: 128px; justify-content: center; padding: 8px; }
  .plugin-visual .brand-appicon { width: 88px; height: 88px; flex-basis: 88px; }
}