fix: isolate shared admin styling

src/app/admin/layout.tsx

@@ -158,7 +158,7 @@ export default async function AdminLayout({ children }: { children: ReactNode })
   }
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--color-background)]">
+    <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--admin-canvas)]">
       <Sidebar staff={staff} />
       <div className="flex flex-col min-w-0 p-5 lg:p-6">
         <Topbar staff={staff} />
@@ -175,9 +175,9 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
 
   return (
     <aside className="sticky top-0 self-start h-screen bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
-      <div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--border-subtle)]">
+      <div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
         <span
-          className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--color-primary)] shadow-lg shadow-[var(--color-primary)]/20"
+          className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--admin-accent)] shadow-lg shadow-[var(--admin-accent)]/20"
           aria-hidden
         >
           {initial}
@@ -208,10 +208,10 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
         ))}
       </nav>
 
-      <div className="px-3 py-3 border-t border-[var(--border-subtle)]">
+      <div className="px-3 py-3 border-t border-[var(--admin-border)]">
         <Link
           href="/"
-          className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[var(--admin-sidebar-muted-readable)] text-xs font-medium hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--color-primary)]/10 transition-all duration-150 no-underline"
+          className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[var(--admin-sidebar-muted-readable)] text-xs font-medium hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 transition-all duration-150 no-underline"
         >
           <LogOut size={14} />
           <span>{t("backToSite")}</span>
@@ -225,19 +225,19 @@ async function Topbar({ staff }: { staff: { id: number; username: string; rank:
   const t = await getTranslations("pages.admin.nav");
 
   return (
-    <header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border-subtle)] rounded-2xl px-5 py-3 mb-5 shadow-card">
+    <header className="flex items-center justify-between gap-4 bg-[var(--admin-surface)] border border-[var(--admin-border)] rounded-2xl px-5 py-3 mb-5 shadow-card">
       <div className="flex items-center gap-3">
-        <h2 className="m-0 text-base font-extrabold text-[var(--color-text)]">{t("housekeeping")}</h2>
-        <span className="hidden sm:inline-block w-px h-5 bg-[var(--border-subtle)]" />
-        <span className="hidden sm:inline text-xs text-[var(--color-text-muted)]">
+        <h2 className="m-0 text-base font-extrabold text-[var(--admin-text)]">{t("housekeeping")}</h2>
+        <span className="hidden sm:inline-block w-px h-5 bg-[var(--admin-border)]" />
+        <span className="hidden sm:inline text-xs text-[var(--admin-text-muted)]">
           {t("hotelManagementPanel")}
         </span>
       </div>
       <div className="flex items-center gap-3">
-        <span className="text-xs text-[var(--color-text-muted)]">
-          <strong className="text-[var(--color-text)]">{staff.username}</strong>
+        <span className="text-xs text-[var(--admin-text-muted)]">
+          <strong className="text-[var(--admin-text)]">{staff.username}</strong>
         </span>
-        <span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[var(--color-primary-foreground-readable)] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
+        <span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[var(--color-primary-foreground-readable)] bg-[var(--admin-accent)] rounded-full px-2.5 py-1">
           {t("rankLabel", { rank: staff.rank })}
         </span>
       </div>

src/components/admin/admin-nav-link.tsx

@@ -27,8 +27,8 @@ export function AdminNavLink({
       href={href}
       className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
         active
-          ? "bg-[var(--color-primary)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--color-primary)]"
-          : "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--color-primary)]/10 hover:no-underline"
+          ? "bg-[var(--admin-accent)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--admin-accent)]"
+          : "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
       }`}
     >
       {icon ? (

src/components/admin/catalog-manager/inline-editor.tsx

@@ -287,7 +287,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
               {isDirty && (
                 <Badge
                   variant="outline"
-              className="h-4 px-1.5 text-[9px] text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]"
+              className="h-4 px-1.5 text-[9px] text-[var(--admin-warning)] border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]"
                 >
                   <AlertCircle className="h-2.5 w-2.5 mr-0.5" />
                   unsaved
@@ -310,7 +310,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
 
       {/* Dirty banner */}
       {isDirty && (
-        <div className="flex items-center gap-2 px-4 py-1.5 bg-[var(--color-warning-subtle)] border-b border-[var(--color-warning-border)] text-xs text-[var(--color-warning-text-readable)] shrink-0">
+        <div className="flex items-center gap-2 px-4 py-1.5 bg-[var(--admin-warning-subtle)] border-b border-[var(--admin-warning-border)] text-xs text-[var(--admin-warning)] shrink-0">
           <AlertCircle className="h-3.5 w-3.5 shrink-0" />
           <span className="flex-1">
             Unsaved changes — press{' '}
@@ -340,7 +340,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
           <TabsTrigger value="settings" className="gap-1.5 text-xs">
             <Settings className="h-3.5 w-3.5" />
             Settings
-                {isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--color-warning)]" />}
+                {isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--admin-warning)]" />}
           </TabsTrigger>
           <TabsTrigger value="items" className="gap-1.5 text-xs">
             <Package className="h-3.5 w-3.5" />
@@ -359,7 +359,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
                 const furniSet = new Set(itemsData.furniDataIdList)
                 const missing = itemsData.baseItems.filter((b) => !furniSet.has(b.id)).length
                 return missing > 0 ? (
-              <span className="ml-0.5 rounded-full bg-[var(--color-warning)] text-[var(--color-warning-foreground-readable)] text-[9px] px-1 py-0.5 leading-none font-medium">
+              <span className="ml-0.5 rounded-full bg-[var(--admin-warning)] text-[var(--admin-warning-foreground)] text-[9px] px-1 py-0.5 leading-none font-medium">
                     {missing}
                   </span>
                 ) : null

src/components/admin/catalog-manager/tree-item.tsx

@@ -127,7 +127,7 @@ export const TreeItemContent = React.memo(
           !sortMode && 'cursor-pointer',
           isSelected && !isDragging && 'bg-primary/10 ring-1 ring-primary/30',
           isMultiSelected && !isSelected && !isDragging && 'bg-primary/5 ring-1 ring-primary/15',
-          isFocused && !isSelected && !isMultiSelected && 'ring-2 ring-blue-500/40',
+          isFocused && !isSelected && !isMultiSelected && 'ring-2 ring-[var(--admin-focus-ring)]/40',
           !isSelected && !isMultiSelected && !isFocused && !isDragging && 'hover:bg-accent/60',
           isAncestorOfSelected &&
             !isSelected &&

src/components/admin/catalog-tree.tsx

@@ -109,17 +109,17 @@ export function CatalogIcon({ iconImage, size = 20 }: { iconImage: number; size?
 /* ─── Layout label helper ────────────────────────────────── */
 
 export const LAYOUT_COLORS: Record<string, string> = {
-  default_3x3: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
-  frontpage: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
-  spaces_new: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
-  pets: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
-  pets2: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
-  pets3: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
-  marketplace: 'bg-purple-500/15 text-purple-600 dark:text-purple-400',
-  recycler: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
-  club_buy: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
-  single_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
-  room_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
+  default_3x3: 'bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]',
+  frontpage: 'bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] dark:text-[var(--admin-warning)]',
+  spaces_new: 'bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]',
+  pets: 'bg-[var(--admin-error)]/15 text-[var(--admin-error)]',
+  pets2: 'bg-[var(--admin-error)]/15 text-[var(--admin-error)]',
+  pets3: 'bg-[var(--admin-error)]/15 text-[var(--admin-error)]',
+  marketplace: 'bg-[var(--admin-accent)]/15 text-[var(--admin-accent-text)]',
+  recycler: 'bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]',
+  club_buy: 'bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] dark:text-[var(--admin-warning)]',
+  single_bundle: 'bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]',
+  room_bundle: 'bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]',
 }
 
 /* ─── Highlight matched text ─────────────────────────────── */
@@ -131,7 +131,7 @@ function HighlightText({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, idx)}
-          <mark className="bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] rounded-sm px-0.5">
+          <mark className="bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] rounded-sm px-0.5">
         {text.slice(idx, idx + query.length)}
       </mark>
       {text.slice(idx + query.length)}
@@ -325,7 +325,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
                       className={cn(
                         'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
                         filterMode === 'enabled'
-                          ? 'bg-background shadow-sm text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]'
+                          ? 'bg-background shadow-sm text-[var(--admin-success)] dark:text-[var(--admin-success)]'
                           : 'text-muted-foreground hover:text-foreground',
                       )}
                     >
@@ -345,7 +345,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
                       className={cn(
                         'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
                         filterMode === 'disabled'
-                          ? 'bg-background shadow-sm text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)]'
+                          ? 'bg-background shadow-sm text-[var(--admin-error)] dark:text-[var(--admin-error)]'
                           : 'text-muted-foreground hover:text-foreground',
                       )}
                     >
@@ -643,8 +643,8 @@ function TreeItem({
                       className={cn(
                         'flex items-center justify-center h-5 w-5 shrink-0 rounded opacity-0 group-hover:opacity-100 transition-opacity',
                         isDisabled
-                          ? 'hover:bg-[var(--color-success-subtle)] text-muted-foreground hover:text-[var(--color-success-text-readable)]'
-                          : 'hover:bg-[var(--color-error-subtle)] text-muted-foreground hover:text-[var(--color-error-text-readable)]',
+                          ? 'hover:bg-[var(--admin-success-subtle)] text-muted-foreground hover:text-[var(--admin-success)]'
+                          : 'hover:bg-[var(--admin-error-subtle)] text-muted-foreground hover:text-[var(--admin-error)]',
                       )}
                     >
                       {isDisabled ? (

src/components/admin/catalog/bulk-import-items.tsx

@@ -189,7 +189,7 @@ export function BulkImportItems({ pageId, onImported }: BulkImportItemsProps) {
                         <td className="px-2 py-0.5 font-mono">{row.pointsType ?? '—'}</td>
                         <td className="px-2 py-0.5">
                           {row.ok ? (
-                            <span className="text-[var(--color-success-text-readable)]">OK</span>
+                            <span className="text-[var(--admin-success)]">OK</span>
                           ) : (
                             <span className="text-destructive">{row.error}</span>
                           )}

src/components/admin/catalog/items-shop-preview.tsx

@@ -75,7 +75,7 @@ export function ItemsShopPreview({
                 {/* Badges overlay */}
                 <div className="absolute right-1 top-1 flex flex-col gap-0.5">
                   {isClub && (
-                    <Badge className="h-4 gap-0.5 border-0 bg-[var(--color-warning-subtle)] px-1 text-[8px] text-white">
+                    <Badge className="h-4 gap-0.5 border-0 bg-[var(--admin-warning-subtle)] px-1 text-[8px] text-white">
                       <Crown className="h-2.5 w-2.5" />
                       HC
                     </Badge>
@@ -110,7 +110,7 @@ export function ItemsShopPreview({
                 </p>
                 <div className="mt-0.5 flex items-center gap-1.5 text-[10px] font-mono">
                   {item.costCredits > 0 && (
-                    <span className="text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]">
+                    <span className="text-[var(--admin-warning)] dark:text-[var(--admin-warning)]">
                       {item.costCredits}c
                     </span>
                   )}

src/components/admin/emulator-settings-form.tsx

@@ -292,7 +292,7 @@ export function EmulatorSettingsForm({
               <div
                 key={setting.key}
                 className={`flex items-center gap-3 px-3 py-1.5 border-l-4 ${borderColor} ${
-                  isChanged ? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]' : ''
+                  isChanged ? 'bg-[var(--admin-warning-subtle)] dark:bg-[var(--admin-warning-subtle)]' : ''
                 }`}
               >
                 <code
@@ -305,7 +305,7 @@ export function EmulatorSettingsForm({
                   value={display}
                   onChange={(e) => updateValue(setting.key, e.target.value)}
                   className={`flex-1 h-8 text-xs font-mono ${
-                    isChanged ? 'border-[var(--color-warning-border)]' : ''
+                    isChanged ? 'border-[var(--admin-warning-border)]' : ''
                   }`}
                 />
                 {isChanged && (

src/components/admin/media-grid.tsx

@@ -93,9 +93,9 @@ export function AdminMediaGrid() {
               {progress.current} / {progress.total}
             </span>
           </div>
-          <div className="h-2 w-full bg-[var(--color-primary)]/10 rounded-full overflow-hidden">
+          <div className="h-2 w-full bg-[var(--admin-accent)]/10 rounded-full overflow-hidden">
             <div
-              className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-300"
+              className="h-full bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent)] transition-all duration-300"
               style={{ width: `${(progress.current / progress.total) * 100}%` }}
             />
           </div>
@@ -111,12 +111,12 @@ export function AdminMediaGrid() {
           {files.map((f) => (
             <div
               key={f.name}
-              className="border border-[var(--color-text-muted)]/14 rounded-[10px] overflow-hidden bg-[var(--color-background)]"
+              className="border border-[var(--admin-text-muted)]/14 rounded-[10px] overflow-hidden bg-[var(--admin-canvas)]"
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={validImageUrl(f.url)} alt={f.name} className="w-full h-[120px] object-cover block" />
               <div className="p-2">
-                <p className="text-xs text-[var(--color-text-muted)] m-0 mb-1 overflow-hidden text-ellipsis whitespace-nowrap">
+                <p className="text-xs text-[var(--admin-text-muted)] m-0 mb-1 overflow-hidden text-ellipsis whitespace-nowrap">
                   {f.name}
                 </p>
                 <button

src/components/admin/media-picker.tsx

@@ -70,7 +70,7 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
           <span
             style={{
               fontSize: "0.78rem",
-              color: "var(--color-text-muted)",
+              color: "var(--admin-text-muted)",
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap",
@@ -89,9 +89,9 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
         >
           <div
             onClick={(e) => e.stopPropagation()}
-            className="bg-[var(--color-surface)] text-[var(--color-text)] rounded-2xl w-[min(90vw,680px)] max-h-[80vh] flex flex-col shadow-xl"
+            className="bg-[var(--admin-surface)] text-[var(--admin-text)] rounded-2xl w-[min(90vw,680px)] max-h-[80vh] flex flex-col shadow-xl"
           >
-            <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-text-muted)]/14">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--admin-text-muted)]/14">
               <strong className="text-base">Media Library</strong>
               <div className="flex gap-2 items-center">
                 <label className="btn btn-primary text-sm cursor-pointer">
@@ -112,9 +112,9 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
             </div>
             <div className="flex-1 overflow-auto p-3">
               {loading ? (
-                <p className="text-xs text-[var(--color-text-muted)] text-center py-8">Loading…</p>
+                <p className="text-xs text-[var(--admin-text-muted)] text-center py-8">Loading…</p>
               ) : files.length === 0 ? (
-                <p className="text-xs text-[var(--color-text-muted)] text-center py-8">
+                <p className="text-xs text-[var(--admin-text-muted)] text-center py-8">
                   No images yet. Upload one above.
                 </p>
               ) : (
@@ -127,12 +127,12 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
                         onSelect(f.url);
                         setOpen(false);
                       }}
-                      className="border-2 border-transparent rounded-xl overflow-hidden cursor-pointer bg-[var(--color-background)] p-0 flex flex-col transition-all duration-150"
-                      style={{ borderColor: f.url === current ? "var(--color-primary)" : "transparent" }}
+                      className="border-2 border-transparent rounded-xl overflow-hidden cursor-pointer bg-[var(--admin-canvas)] p-0 flex flex-col transition-all duration-150"
+                      style={{ borderColor: f.url === current ? "var(--admin-accent)" : "transparent" }}
                       onMouseEnter={(e) => {
                         if (f.url !== current)
                           e.currentTarget.style.borderColor =
-                            "color-mix(in srgb, var(--color-primary) 40%, transparent)";
+                            "color-mix(in srgb, var(--admin-accent) 40%, transparent)";
                       }}
                       onMouseLeave={(e) => {
                         if (f.url !== current) e.currentTarget.style.borderColor = "transparent";

src/components/admin/page-header.tsx

@@ -9,12 +9,12 @@ interface AdminPageHeaderProps {
 export function AdminPageHeader({ icon: Icon, title, subtitle }: AdminPageHeaderProps) {
   return (
     <div className="flex items-center gap-3 mb-6">
-      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
-        <Icon size={20} className="text-[var(--color-primary)]" />
+      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
+        <Icon size={20} className="text-[var(--admin-accent)]" />
       </div>
       <div>
-        <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{title}</h1>
-        <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{subtitle}</p>
+        <h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{title}</h1>
+        <p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{subtitle}</p>
       </div>
     </div>
   );

src/components/theme-vars.test.ts

@@ -23,6 +23,8 @@ describe("themePaletteCss", () => {
       "--admin-accent", "--admin-accent-foreground", "--admin-overlay",
       "--admin-focus-ring", "--admin-success", "--admin-warning",
       "--admin-error", "--admin-info",
+      "--admin-success-subtle", "--admin-warning-subtle",
+      "--admin-error-border", "--admin-info-foreground",
     ]) expect(css).toContain(variable);
   });
 });

src/lib/theme-css.ts

@@ -65,6 +65,11 @@ export function themePaletteCss(selector: string, palette: ThemePalette): string
     `--admin-sidebar-text:${admin.sidebarText};`,
     `--admin-overlay:${admin.overlay};`,
     `--admin-focus-ring:${admin.focusRing};`,
+    ...(["success", "warning", "error", "info"] as const).flatMap((status) => [
+      `--admin-${status}-foreground:${readableColor("#ffffff", [admin[status]])};`,
+      `--admin-${status}-subtle:color-mix(in srgb, ${admin[status]} 14%, ${admin.surface});`,
+      `--admin-${status}-border:color-mix(in srgb, ${admin[status]} 38%, transparent);`,
+    ]),
     ...(["success", "warning", "error", "info"] as const).flatMap((status) => [
       `--color-${status}-text-readable:${semantic.byName[`${status}-text`]};`,
       `--color-${status}-foreground-readable:${semantic.byName[`${status}-solid`]};`,