nodewarden/webapp/src/styles/shell.css

.app-page {
  @apply relative min-h-full bg-transparent;
}

.app-shell {
  @apply relative flex flex-col;
  height: 100vh;
  background: var(--bg-accent);
}

.topbar {
  @apply flex h-[58px] items-center justify-between border-b px-[18px] text-slate-900 transition;
  border-color: var(--line-soft);
  background: rgba(244, 248, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand {
  @apply inline-flex items-center gap-2 text-[34px] font-extrabold text-ink;
}

.brand-wordmark {
  @apply block max-w-full;
  width: clamp(168px, 17vw, 224px);
  aspect-ratio: 862 / 102;
  background: #116ff9;
  mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
  -webkit-mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
}

.mobile-page-title {
  @apply hidden min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[19px] font-extrabold leading-tight text-slate-900;
  max-width: min(58vw, 240px);
}

.brand-logo {
  @apply h-[42px] w-[53px] object-contain;
  filter: drop-shadow(0 10px 22px rgba(43, 102, 217, 0.22));
}

.topbar-actions {
  @apply flex items-center gap-2.5;
}

.network-status-badge {
  @apply inline-flex h-[30px] shrink-0 select-none items-center gap-1.5 rounded-full border px-2.5 text-xs font-bold leading-none;
  letter-spacing: 0;
}

.network-status-badge svg {
  @apply shrink-0;
}

.network-status-badge.online {
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  color: color-mix(in srgb, var(--success) 78%, var(--text));
}

.network-status-badge.offline {
  background: color-mix(in srgb, var(--warning) 13%, var(--panel));
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  color: color-mix(in srgb, var(--warning) 82%, var(--text));
}

.topbar-actions > .network-status-badge {
  @apply h-[34px] px-3;
}

.mobile-tabbar {
  @apply hidden;
}

.mobile-sidebar-toggle {
  @apply hidden;
}

.mobile-lock-btn {
  @apply hidden;
}

.mobile-theme-btn {
  @apply hidden;
}

.theme-switch-wrap {
  @apply inline-flex items-center justify-center;
}

.theme-switch {
  @apply relative inline-block h-8 w-14;
}

.theme-switch-input {
  @apply h-0 w-0 opacity-0;
}

.theme-switch-slider {
  @apply absolute inset-0 cursor-pointer rounded-full border transition;
  background: #dbeafe;
  border-color: #9dbbec;
}

.theme-switch-slider::before {
  @apply absolute h-[23px] w-[26px] rounded-full;
  content: '';
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff, #edf4ff);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  transition:
    transform var(--dur-medium) var(--ease-out-strong),
    box-shadow var(--dur-fast) var(--ease-out-soft),
    background var(--dur-fast) var(--ease-smooth);
}

.theme-switch .sun svg {
  @apply absolute h-[18px] w-[18px];
  top: 5px;
  left: 29px;
  z-index: 1;
  opacity: 0.95;
  transition: transform var(--dur-medium) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
}

.theme-switch .moon svg {
  fill: #5b86d6;
  @apply absolute h-4 w-4;
  top: 7px;
  left: 7px;
  z-index: 1;
  opacity: 0.88;
  transition: transform var(--dur-medium) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
}

.theme-switch-input:checked + .theme-switch-slider {
  background: linear-gradient(180deg, #173150, #122742);
  border-color: #35527a;
}

.theme-switch-input:focus + .theme-switch-slider {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
}

.theme-switch-input:checked + .theme-switch-slider::before {
  transform: translateX(24px);
}

.theme-switch:hover .theme-switch-slider {
  transform: none;
}

.theme-switch:hover .sun svg,
.theme-switch:hover .moon svg {
  transform: scale(1.08);
}

.topbar-actions .btn {
  @apply h-[34px] rounded-xl px-3 text-[13px] font-semibold;
  transition-duration: 220ms;
}

.topbar-actions .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.user-chip {
  @apply inline-flex h-[34px] items-center gap-1.5 rounded-full border px-3 text-sm font-semibold text-muted-strong transition;
  background: rgba(249, 251, 255, 0.94);
  border-color: rgba(148, 163, 184, 0.30);
  box-shadow: 0 8px 16px rgba(13, 31, 68, 0.04);
}

.user-chip:hover {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.app-main {
  @apply grid min-h-0 flex-1;
  grid-template-columns: 200px 1fr;
}

.app-side {
  @apply flex flex-col gap-2 border-r px-3 py-4;
  border-color: var(--line-soft);
}

.side-nav-main {
  @apply flex min-h-0 flex-1 flex-col gap-2;
}

.side-link {
  @apply flex items-center rounded-xl border border-transparent px-3 py-2.5 no-underline transition;
  gap: var(--space-2);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--muted-strong);
}

.side-link span,
.side-group-trigger span,
.side-sub-link span {
  @apply min-w-0 flex-1 truncate;
}

.side-link svg,
.side-group-trigger svg,
.side-sub-link svg {
  @apply shrink-0;
}

.side-nav-group {
  @apply grid gap-1;
}

.side-group-trigger {
  @apply flex w-full cursor-pointer items-center rounded-xl border border-transparent px-3 py-2.5 text-left transition;
  gap: var(--space-2);
  background: transparent;
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--muted-strong);
}

.side-link:hover,
.side-group-trigger:hover {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border-color: rgba(128, 152, 192, 0.20);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateX(2px);
}

.side-link.active,
.side-group-trigger.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
  border-color: rgba(37, 99, 235, 0.32);
  color: var(--primary-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 8px rgba(37, 99, 235, 0.15);
}

.side-group-chevron {
  @apply shrink-0;
  transition: transform 190ms var(--ease-out-soft);
}

.side-nav-group.open .side-group-chevron {
  transform: rotate(180deg);
}

.side-subnav {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 220ms var(--ease-smooth),
    opacity 170ms var(--ease-smooth),
    transform 220ms var(--ease-out-soft);
}

.side-subnav.open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.side-subnav-inner {
  @apply grid gap-1 overflow-hidden pl-4 pr-1;
}

.side-sub-link {
  @apply flex items-center rounded-lg border border-transparent px-2.5 py-2 no-underline transition;
  gap: var(--space-2);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--muted);
}

.side-sub-link:hover {
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
}

.side-sub-link.active {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.18);
  color: var(--primary-strong);
}

.nav-layout-control {
  @apply relative mt-auto pt-1;
}

.nav-layout-trigger {
  @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border p-0 transition;
  border-color: rgba(128, 152, 192, 0.18);
  background: rgba(255, 255, 255, 0.46);
  color: var(--muted-strong);
}

.nav-layout-trigger:hover,
.nav-layout-trigger.active {
  border-color: rgba(37, 99, 235, 0.20);
  background: #fff;
  color: var(--primary-strong);
}

.nav-layout-menu {
  @apply absolute bottom-[calc(100%+8px)] left-0 right-0 z-40 grid gap-1 rounded-2xl border p-1.5;
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  transform-origin: bottom center;
  animation: menu-in 190ms var(--ease-out-strong) both;
}

.nav-layout-option {
  @apply flex w-full cursor-pointer items-center gap-2.5 rounded-xl border border-transparent bg-transparent px-3 py-2.5 text-left transition;
  color: var(--text);
}

.nav-layout-option:hover,
.nav-layout-option.active {
  background: color-mix(in srgb, var(--primary) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
}

.nav-layout-option-text {
  @apply min-w-0 flex-1;
}

.nav-layout-option-text strong {
  @apply overflow-hidden text-ellipsis whitespace-nowrap text-sm;
}

.nav-layout-check {
  @apply shrink-0;
  color: var(--primary-strong);
}

.content {
  @apply min-h-0 overflow-hidden p-3.5;
}

.route-stage {
  @apply h-full min-h-0 overflow-auto;
}

.route-stage-fixed {
  overflow: hidden;
}

.route-stage-log-fixed {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.mobile-sidebar-mask {
  @apply pointer-events-none invisible fixed inset-0 opacity-0;
  background: rgba(15, 23, 42, 0.36);
  z-index: 54;
  transition:
    opacity 220ms var(--ease-smooth),
    visibility 220ms var(--ease-smooth);
}

.mobile-sidebar-mask.open {
  @apply pointer-events-auto visible opacity-100;
}

.mobile-sidebar-head {
  @apply hidden;
}

.auth-request-details {
  display: grid;
  gap: 12px;
  margin: 12px 0 4px;
}

.auth-request-device {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
}

.auth-request-device svg {
  color: var(--primary-strong);
  flex: 0 0 auto;
}

.auth-request-device div,
.account-passkey-main {
  min-width: 0;
}

.auth-request-device strong,
.auth-request-device small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-request-device small {
  color: var(--muted);
}

.auth-request-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--font-sm);
}

.auth-request-kv span,
.auth-request-fingerprint span {
  color: var(--muted);
}

.auth-request-kv strong {
  color: var(--text);
  text-align: right;
}

.auth-request-fingerprint {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
}

.auth-request-fingerprint strong,
.auth-request-fingerprint-inline {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-sm);
  line-height: 1.45;
}

.auth-request-row {
  align-items: start;
}

.auth-request-fingerprint-inline {
  color: var(--muted-strong);
  max-width: 260px;
}