.app-frame { --shell-bg: #171a1d; --shell-border: #30363b; --shell-text: #f1f1f1; --shell-muted: #a4adb5; --shell-accent: #9bd1ff; min-height: 100dvh; }
.app-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; box-sizing: border-box; padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid var(--shell-border); color: var(--shell-text); background: var(--shell-bg); }
.app-heading { display: grid; gap: .2rem; min-width: 0; }
.app-brand { color: var(--shell-muted); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.app-title { font-size: 1.1rem; font-weight: 650; }
.account-menu { position: relative; flex-shrink: 0; }
.account-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box; padding: 0; border: 1px solid var(--shell-border); border-radius: 50%; background: #29333b; color: var(--shell-accent); cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu svg { display: block; width: 24px; height: 24px; }
.project-switcher { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; max-width: 24rem; margin: 0; }
.project-switcher select, .project-switcher button { min-height: 44px; padding: .45rem .65rem; border: 1px solid var(--shell-border); border-radius: .5rem; background: #20252a; color: var(--shell-text); font: inherit; }
.project-switcher select { width: 100%; min-width: 0; cursor: pointer; }
.project-switcher button { cursor: pointer; }
.account-panel { position: absolute; top: calc(100% + .75rem); right: 0; display: grid; gap: .45rem; width: min(17rem, calc(100vw - 2rem)); box-sizing: border-box; padding: 1rem; border: 1px solid var(--shell-border); border-radius: .85rem; background: var(--shell-bg); box-shadow: 0 12px 32px #0005; }
.account-panel > span { color: var(--shell-muted); font-size: .8rem; }
.account-panel strong { overflow-wrap: anywhere; }
.account-panel > a { display: flex; align-items: center; min-height: 44px; margin-top: .5rem; color: var(--shell-text); }
.account-panel form { display: grid; margin-top: .5rem; }
.account-panel button { width: 100%; min-height: 44px; padding: .6rem; border: 1px solid var(--shell-border); border-radius: .5rem; background: #29333b; color: var(--shell-text); font: inherit; cursor: pointer; }
.account-panel [role="alert"] { color: #ffaaaa; font-size: .85rem; }
.skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 30; transform: translateY(-200%); padding: .75rem; background: var(--shell-bg); color: var(--shell-accent); }
.skip-link:focus { transform: none; }
.app-frame :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 3px; border-radius: .35rem; }
.app-navigation { position: fixed; z-index: 10; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(30rem, calc(100% - 1.5rem)); box-sizing: border-box; padding: .4rem; border: 1px solid var(--shell-border); border-radius: 1.2rem; background: var(--shell-bg); box-shadow: 0 .5rem 2rem #0005; }
.app-navigation a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 60px; border-radius: .75rem; color: var(--shell-muted); text-decoration: none; font-size: .75rem; font-weight: 600; }
.app-navigation-icon { display: grid; place-items: center; width: 3rem; height: 2rem; border-radius: .65rem; }
.app-navigation a[aria-current="page"] { color: var(--shell-accent); background: #263640; }
.app-navigation a:hover { background: #29333b; color: var(--shell-text); }
.project-navigation { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(3.2rem, 1fr); overflow-x: auto; }
.project-navigation a { min-width: 0; font-size: .65rem; }
.project-navigation a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.app-frame button:disabled { opacity: .55; cursor: wait; }
.app-frame main { scroll-margin-top: 90px; }
@media (min-width: 64rem) {
  .app-frame[data-admin="true"] { padding-left: 220px; }
  .app-header { min-height: 76px; padding-inline: 2rem; }
  .app-heading { display: flex; align-items: center; gap: 1.5rem; }
  .app-brand { font-size: .75rem; }
  .app-navigation { inset: 0 auto 0 0; transform: none; width: 220px; grid-template-columns: 1fr; align-content: start; gap: .4rem; padding: 6.5rem .85rem 1rem; border: 0; border-right: 1px solid var(--shell-border); border-radius: 0; box-shadow: none; }
	.project-navigation { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .app-navigation::before { content: "WORKSPACE"; margin: 0 .9rem .75rem; color: var(--shell-muted); font-size: .65rem; font-weight: 650; letter-spacing: .12em; }
  .app-navigation a { flex-direction: row; justify-content: flex-start; gap: .65rem; padding-inline: .65rem; min-height: 48px; font-size: .9rem; }
  .app-navigation-icon { width: 2rem; }
  .app-frame .admin-app { width: min(86rem, calc(100% - 4rem)); margin: 2rem auto; padding-bottom: 2rem; }
}
@media (max-width: 42rem) {
	.app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
	.project-switcher { width: 100%; max-width: none; }
	.project-switcher select { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .app-frame :is(button, a, summary) { transition: background-color .15s, border-color .15s, box-shadow .15s; }
  .account-panel { animation: panel-in .12s ease-out; }
  #reviewer-workspace { transition: opacity .15s; }
  #reviewer-workspace.htmx-swapping { opacity: .4; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

.user-preview-banner { position: sticky; top: 0; z-index: 25; background: var(--shell-bg); color: var(--shell-text); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--shell-accent); border-radius: .75rem; }
.user-preview-banner div { display: grid; gap: .25rem; }
.user-preview-content { border: 0; padding: 0; margin: 0; min-width: 0; }

.user-preview-banner button { min-height: 44px; padding: .6rem; font: inherit; cursor: pointer; }
.user-preview-content button:disabled { cursor: not-allowed; }