/* Layout composition only; controls and colors belong to @01.software/ui. */
:root{font-size:16px;color-scheme:light;--font-sans:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--foreground);font:12px/1.45 var(--font-sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
@layer base{a{color:inherit}}
button,input,select{font-family:inherit}
button:disabled{cursor:not-allowed}
.service-shell{min-height:100dvh}
.shell-body{display:flex;flex-direction:column;min-width:0;min-height:100dvh}
/* Adapted from official Recipes/Menu Bar at f27ede2216f398e324078c70b5b6c282a50d4188.
   Keep the recipe's translucent 28px row and transparent primitive wrapper. */
.ui-recipe{color:var(--foreground);font-family:inherit;font-size:.75rem;line-height:1.45}
/* Menu bar: one translucent row; menus wrap before status items are clipped. */
.ui-recipe-menu-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  min-height: 28px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.ui-recipe-menu-bar .ui-recipe-menu-bar-menus {
  gap: 0;
  padding: 0;
  background: transparent;
}
.ui-recipe-menu-bar .ui-recipe-menu-bar-app {
  padding-inline: 8px;
  font-weight: 600;
}
.ui-recipe-menu-bar-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-left: auto;
  padding-inline: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.shell-topbar{position:sticky;top:0;z-index:20}
.shell-current-page{color:var(--muted-foreground)}
.shell-account-name{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-account-short{display:none}
.shell-account-label,.shell-account-email{max-width:min(280px,calc(100vw - 48px));overflow-wrap:anywhere;white-space:normal}
.shell-content{width:100%;max-width:1280px;padding:44px 40px 48px;margin:0 auto;flex:1;outline:none;min-width:0;scroll-margin-top:64px}
.shell-page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.shell-page-heading h1{font-size:18px;font-weight:600;line-height:1.3;margin:0}
.shell-page-heading p{font-size:12px;color:var(--muted-foreground);margin:8px 0 0}
.shell-page-action{flex:none}
.shell-footer{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted-foreground);padding:20px max(40px,calc((100% - 1200px)/2));border-top:1px solid var(--border)}
.shell-footer a{display:flex;align-items:center;gap:4px;text-decoration:none}
.shell-footer svg{width:12px;height:12px}
.shell-skip{position:fixed;top:-60px;left:12px;background:var(--paper);border:1px solid var(--border);padding:8px 16px;border-radius:4px;z-index:100}
.shell-skip:focus{top:8px}
@media(min-width:1700px){.shell-content{padding-top:56px}}
@media(max-width:960px){.shell-current-page{display:none}.shell-content{padding:32px 28px 40px}.shell-footer{padding:20px 28px}}
@media(max-width:620px){.shell-account-name{display:none}.shell-account-short{display:inline}.shell-content{padding:28px 20px 36px}.shell-page-heading{align-items:flex-start;gap:12px;margin-bottom:24px}.shell-page-heading h1{font-size:18px}.shell-page-heading p{font-size:11px}.shell-footer{padding:16px 20px;font-size:9px}}
@media(max-width:450px){.shell-content{padding:24px 16px 32px}.shell-page-heading{flex-wrap:wrap}.shell-page-action{margin-left:auto}.shell-footer{padding:16px;flex-wrap:wrap}}
.shell-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}