+```
+
+Use `borderLeft: '3px solid
'` to add a status accent stripe on the left edge. Use `var(--shadow-md)` on hover.
+
+---
+
+## Input Pattern
+
+```tsx
+const inputStyle: React.CSSProperties = {
+ background: 'var(--body-bg)',
+ border: '1px solid var(--card-border)',
+ borderRadius: '7px',
+ color: 'var(--text-dark)',
+ padding: '0.6rem 0.75rem',
+ fontSize: '0.9rem',
+ width: '100%',
+ outline: 'none',
+}
+```
+
+On focus, add `border-color: var(--gold)` via CSS or inline `onFocus`.
+
+---
+
+## Button Patterns
+
+**Primary action** (e.g. submit, open, update):
+```tsx
+style={{
+ background: 'var(--gold)', color: 'var(--navy)',
+ border: 'none', borderRadius: '7px',
+ padding: '0.45rem 1rem', fontSize: '0.82rem', fontWeight: 600,
+}}
+```
+
+**Secondary / ghost** (e.g. refresh, cancel):
+```tsx
+style={{
+ background: 'var(--card-bg)', color: 'var(--text-mid)',
+ border: '1px solid var(--card-border)', borderRadius: '7px',
+ padding: '0.35rem 0.9rem', fontSize: '0.8rem',
+}}
+```
+
+**Icon button** (e.g. pin, delete):
+```tsx
+style={{
+ background: 'var(--body-bg)', border: '1px solid var(--card-border)',
+ borderRadius: '6px', padding: '0.3rem',
+ color: 'var(--text-mid)',
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
+}}
+```
+
+---
+
+## Hotel Name
+
+The hotel name is injected at build time via a Vite env var:
+
+```
+VITE_HOTEL_NAME=Number Four at Stow
+```
+
+Set in `/opt//.env` on the server before rebuilding. Reference it in any component with:
+
+```tsx
+{import.meta.env.VITE_HOTEL_NAME}
+```
+
+Each app's `Dockerfile` must declare it as a build arg with the default:
+
+```dockerfile
+ARG VITE_HOTEL_NAME="Number Four at Stow"
+ENV VITE_HOTEL_NAME=$VITE_HOTEL_NAME
+```
+
+And `docker-compose.yml`:
+
+```yaml
+build:
+ context: .
+ args:
+ VITE_HOTEL_NAME: ${VITE_HOTEL_NAME:-Number Four at Stow}
+```
+
+Add `src/vite-env.d.ts` so TypeScript knows about it:
+
+```ts
+///
+interface ImportMetaEnv { readonly VITE_HOTEL_NAME: string }
+interface ImportMeta { readonly env: ImportMetaEnv }
+```
+
+---
+
+## App Checklist (new app)
+
+- [ ] Copy the full `:root` CSS block above into `src/index.css`
+- [ ] Install `lucide-react`, pick an icon, add it to `apps.icon` in auth DB
+- [ ] Add `VITE_HOTEL_NAME` build arg to `Dockerfile` and `docker-compose.yml`
+- [ ] Add `src/vite-env.d.ts`
+- [ ] Set `base: '/your-path/'` in `vite.config.ts`
+- [ ] All API calls use the base path prefix (e.g. `/your-path/api/...`)
+- [ ] Standalone login screen: explicit `background: var(--navy-dark)` on outer container
+- [ ] Content area: `--body-bg` / `--card-bg` / `--card-border` / `--text-dark` / `--text-mid`
+- [ ] No hardcoded colour hex values in component files — variables only