Fix theme consistency, i18n completeness, CSS variable naming, and hardcoded strings

src/components/admin/dashboard.tsx

@@ -28,7 +28,7 @@ export function StatusCard({
   icon?: ReactNode;
 }) {
   return (
-    <div className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
+    <div className="bg-[var(--color-surface)] border border-[var(--border-subtle)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
       <div className="flex items-center justify-between gap-3 mb-3">
         <span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">{label}</span>
         {icon ? (
@@ -62,7 +62,7 @@ export function DiagnosticRow({
     "bg-[var(--color-primary)]/18";
 
   return (
-    <div className="flex items-center gap-2.5 py-2 px-0.5 border-t border-[var(--border)] first:border-t-0">
+    <div className="flex items-center gap-2.5 py-2 px-0.5 border-t border-[var(--border-subtle)] first:border-t-0">
       <span className={`flex-none w-[9px] h-[9px] rounded-full ${dotColor}`} aria-hidden />
       <span className="font-bold text-sm">{label}</span>
       <span className="flex-1 text-[0.82rem] text-[var(--color-text-muted)]">{detail}</span>
@@ -102,7 +102,7 @@ export function OnlineUsersWidget({
   };
 
   return (
-    <div className="bg-[var(--color-surface)] rounded-xl border border-[var(--border)] p-6">
+    <div className="bg-[var(--color-surface)] rounded-xl border border-[var(--border-subtle)] p-6">
       <div className="flex justify-between items-center mb-4">
         <h3 className="m-0 text-lg font-semibold text-[var(--color-text)]">Online Now</h3>
         <span className="text-sm text-[var(--color-text-muted)] bg-[var(--color-primary)]/10 px-3 py-1 rounded-full">
@@ -125,7 +125,7 @@ export function OnlineUsersWidget({
                 <img
                   src={`https://www.habbo.com/habbo-imaging/avatarimage?width=50&height=62&direction=2&headonly=1&crop=face&action=wav&gender=m&look=${encodeURIComponent(user.look)}`}
                   alt={user.username}
-                  className="w-full h-full rounded object-cover border border-[var(--border)]"
+                  className="w-full h-full rounded object-cover border border-[var(--border-subtle)]"
                   loading="lazy"
                 />
                 {user.roomId && user.roomName && (

src/components/home/guest-view.tsx

@@ -68,8 +68,8 @@ export default async function GuestView() {
             <img src="/assets/images/EnterHubbly.png" alt="Register" className="block" />
           </div>
           <span
-            className="pointer-events-none absolute inset-0 flex items-center text-4xl font-extrabold text-white"
-            style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)", marginLeft: "15px" }}
+            className="pointer-events-none absolute inset-0 flex items-center text-4xl font-extrabold text-white text-shadow"
+            style={{ marginLeft: "15px" }}
           >
             REGISTER NOW
           </span>
@@ -77,8 +77,8 @@ export default async function GuestView() {
 
         {recentUsers.length > 0 && (
           <div
-            className="overflow-hidden rounded-lg border bg-white dark:bg-gray-800"
-            style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}
+            className="overflow-hidden rounded-lg border"
+            style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)", backgroundColor: "var(--color-surface)" }}
           >
             <div
               className="flex h-12 w-full items-center justify-center bg-repeat"
@@ -93,8 +93,8 @@ export default async function GuestView() {
               {recentUsers.map((u) => (
                 <div
                   key={u.username}
-                  className="relative overflow-visible rounded-md bg-white p-0 shadow-lg dark:bg-gray-800"
-                  style={{ width: "50px", height: "50px", justifySelf: "center" }}
+                  className="relative overflow-visible rounded-md p-0 shadow-lg"
+                  style={{ width: "50px", height: "50px", justifySelf: "center", backgroundColor: "var(--color-surface)" }}
                 >
                   <img
                     src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 3 })}
@@ -121,8 +121,8 @@ export default async function GuestView() {
 
       <div className="flex w-full flex-col gap-4 md:w-2/3">
         <div
-          className="overflow-hidden rounded-lg border bg-white dark:bg-gray-800"
-          style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}
+          className="overflow-hidden rounded-lg border"
+          style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)", backgroundColor: "var(--color-surface)" }}
         >
           <div
             className="flex h-12 w-full items-center justify-center"
@@ -135,7 +135,7 @@ export default async function GuestView() {
           </div>
           <div className="p-4">
             {articles.length === 0 ? (
-              <p className="py-8 text-center text-gray-500 dark:text-gray-400">No articles available</p>
+              <p className="py-8 text-center" style={{ color: "var(--color-text-muted)" }}>{t("noArticles")}</p>
             ) : (
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 {articles.map((a) => (

src/components/home/user-view.tsx

@@ -124,7 +124,7 @@ export default async function UserView({ userId, username, look }: UserViewProps
           </div>
           <div className="flex items-center gap-3 px-3">
             {onlineFriends.length === 0 ? (
-              <p className="mb-3 block w-full text-center text-xs font-medium text-gray-500 dark:text-white md:mb-0 md:text-left">
+              <p className="mb-3 block w-full text-center text-xs font-medium md:mb-0 md:text-left" style={{ color: "var(--color-text-muted)" }}>
                 {t("noFriendsOnline")}
               </p>
             ) : (
@@ -178,7 +178,7 @@ export default async function UserView({ userId, username, look }: UserViewProps
               <div className="p-3">
                 <h3 className="text-sm font-semibold">{latestArticle.title}</h3>
                 {latestArticle.shortStory && (
-                  <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  <p className="mt-1 text-xs" style={{ color: "var(--color-text-muted)" }}>
                     {excerpt(latestArticle.shortStory, 100)}
                   </p>
                 )}

src/components/navigation.tsx

@@ -20,8 +20,7 @@ export async function Navigation() {
         <div className="flex items-center gap-x-1 md:gap-x-1 flex-1 md:flex-none">
           <Link href="/" className="nav-item shrink-0">
             <img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
-            <span className="hidden sm:inline">{t("home")}</span>
-            <span className="sm:hidden">{t("home")}</span>
+            <span>{t("home")}</span>
           </Link>
         </div>
 

src/components/site-header.tsx

@@ -20,7 +20,7 @@ export async function SiteHeader() {
     online = 0;
   }
 
-  const bannerUrl = header && header !== "/assets/images/background.png" ? header : "/assets/images/mybobba_banner.png";
+  const bannerUrl = header && header !== "/assets/images/background.png" ? header : "/assets/images/banner.png";
 
   return (
     <div className="site-header relative w-full overflow-hidden" style={{ minHeight: "18rem" }}>