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

src/app/admin/applications/page.tsx

@@ -72,7 +72,7 @@ export default async function AdminApplications() {
         {applications.length === 0 ? (
           <div className="admin-empty">{t("noApplications")}</div>
         ) : (
-          <div className="grid cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {applications.map((a) => {
               const username = userMap.get(a.userId);
               return (

src/app/admin/calendar/[id]/page.tsx

@@ -137,7 +137,7 @@ export default async function AdminCalendarCampaign({
           </thead>
           <tbody>
             {rewards.map((r) => (
-              <tr key={r.id} className="border-t border-[var(--border)]">
+              <tr key={r.id} className="border-t border-[var(--border-subtle)]">
                 <td>{r.id}</td>
                 <td>{r.productName || <span className="text-sm text-gray-500 dark:text-gray-400">—</span>}</td>
                 <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{r.itemId > 0 ? r.itemId : "—"}</td>

src/app/admin/calendar/page.tsx

@@ -83,7 +83,7 @@ export default async function AdminCalendar() {
       {campaigns.length === 0 ? (
         <div className="admin-empty">{t("noCampaigns")}</div>
       ) : (
-        <div className="grid cols-3">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
           {campaigns.map((c) => {
             const enabled = c.enabled === "1";
             const count = rewardCounts.get(c.id) ?? 0;

src/app/admin/catalog/[id]/page.tsx

@@ -122,7 +122,7 @@ export default async function AdminCatalogPage({
           </thead>
           <tbody>
             {items.map((it) => (
-              <tr key={it.id} style={{ borderTop: "1px solid var(--border)" }}>
+              <tr key={it.id} style={{ borderTop: "1px solid var(--border-subtle)" }}>
                 <td>{it.id}</td>
                 <td>
                   {it.catalogName}

src/app/admin/commandocentrum/page.tsx

@@ -141,7 +141,7 @@ export default async function CommandoCentrum() {
       </section>
 
       {/* ── Server info + diagnostics ──────────────────────────── */}
-      <div className="grid cols-2">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <section className="admin-card p-5">
           <h2 className="admin-section-title">{t("serverInfo")}</h2>
           <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">

src/app/admin/favicon/favicon-form.tsx

@@ -73,7 +73,7 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
               <img
                 src={preview}
                 alt="Favicon preview"
-                className="w-16 h-16 rounded-lg border-2 border-[var(--border)] object-contain bg-white"
+                className="w-16 h-16 rounded-lg border-2 border-[var(--border-subtle)] object-contain bg-white"
               />
               <div className="text-xs text-[var(--color-text-muted)] break-all">{preview}</div>
             </div>

src/app/admin/favicon/favicon-generator.tsx

@@ -85,7 +85,7 @@ export function FaviconGenerator({ onSave }: Props) {
           ref={canvasRef}
           width={SIZE}
           height={SIZE}
-          className="border-2 border-[var(--border)] rounded-xl shadow-lg"
+          className="border-2 border-[var(--border-subtle)] rounded-xl shadow-lg"
           style={{ width: 128, height: 128, imageRendering: "pixelated" }}
         />
       </div>
@@ -114,7 +114,7 @@ export function FaviconGenerator({ onSave }: Props) {
               type="color"
               value={bgColor}
               onChange={(e) => setBgColor(e.target.value)}
-              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border)]"
+              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border-subtle)]"
             />
             <span className="text-xs text-[var(--color-text-muted)] font-mono">{bgColor}</span>
           </div>
@@ -142,7 +142,7 @@ export function FaviconGenerator({ onSave }: Props) {
               type="color"
               value={textColor}
               onChange={(e) => setTextColor(e.target.value)}
-              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border)]"
+              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border-subtle)]"
             />
             <span className="text-xs text-[var(--color-text-muted)] font-mono">{textColor}</span>
           </div>

src/app/admin/ip/page.tsx

@@ -72,7 +72,7 @@ export default async function AdminIp() {
         />
       </div>
 
-      <div className="grid cols-2">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         {/* ── Whitelist ──────────────────── */}
         <section className="mt-6">
           <h2 className="admin-section-title">{t("whitelist")}</h2>

src/app/admin/layout.tsx

@@ -163,10 +163,10 @@ 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)] rounded-2xl px-5 py-3 mb-5 shadow-card">
+    <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">
       <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)]" />
+        <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)]">
           {t("hotelManagementPanel")}
         </span>

src/app/admin/page.tsx

@@ -103,7 +103,7 @@ export default async function AdminDashboard() {
           ) : (
             <div className="space-y-0">
               {activity.map((a, i) => (
-                <div key={String(a.id)} className={`flex items-center gap-3 py-2.5 ${i > 0 ? "border-t border-[var(--border)]" : ""}`}>
+                <div key={String(a.id)} className={`flex items-center gap-3 py-2.5 ${i > 0 ? "border-t border-[var(--border-subtle)]" : ""}`}>
                   <div className="w-7 h-7 rounded-full bg-[var(--color-primary)]/10 grid place-items-center flex-none">
                     <Activity size={12} className="text-[var(--color-primary)]" />
                   </div>

src/app/admin/photos/page.tsx

@@ -44,7 +44,7 @@ export default async function AdminPhotos() {
         {photos.length === 0 ? (
           <div className="admin-empty">{t("noPhotos")}</div>
         ) : (
-          <div className="grid cols-3">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
             {photos.map((p) => (
               <div key={String(p.id)} className="admin-card" style={{ padding: 0, overflow: "hidden" }}>
                 {/* eslint-disable-next-line @next/next/no-img-element */}

src/app/admin/radio/api-keys/page.tsx

@@ -119,7 +119,7 @@ export default async function AdminRadioApiKeysPage() {
           {t("apiKeysForm.generateHint")}
         </p>
         <form action={createApiKey} className="admin-card">
-          <div className="grid cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
               <label htmlFor="new_name" style={{ display: "block", fontWeight: 700 }}>
                 {t("apiKeysForm.name")}

src/app/admin/radio/autodj/page.tsx

@@ -118,7 +118,7 @@ export default async function AdminRadioAutoDjPage() {
       <section className="mt-6">
         <h2 className="admin-section-title">{t("autoDjForm.addTrack")}</h2>
         <form action={createTrack} className="admin-card">
-          <div className="grid cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
               <label htmlFor="new_title" style={{ display: 'block', fontWeight: 700 }}>
                 {t("autoDjForm.title")}

src/app/admin/radio/banners/page.tsx

@@ -101,7 +101,7 @@ export default async function AdminRadioBannersPage() {
       <section className="mt-6">
         <h2 className="admin-section-title">{t("banners.addBanner")}</h2>
         <form action={createRadioBanner} className="admin-card">
-          <div className="grid cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
               <label htmlFor="new_imagePath" style={{ display: 'block', fontWeight: 700 }}>
                 {t("banners.form.imagePath")}
@@ -185,7 +185,7 @@ export default async function AdminRadioBannersPage() {
 
                 <form action={updateRadioBanner}>
                   <input type="hidden" name="id" value={String(b.id)} />
-                  <div className="grid cols-2">
+                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                     <div>
                       <label
                         htmlFor={`img_${b.id}`}

src/app/admin/radio/points/page.tsx

@@ -108,7 +108,7 @@ export default async function AdminRadioPointsPage({
       <section className="mt-6">
         <h2 className="admin-section-title">{t("pointsForm.settings")}</h2>
         <form action={savePoints}>
-          <div className="grid cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
               <label htmlFor="radio_points_enabled" style={{ display: "block", fontWeight: 700 }}>
                 {t("pointsForm.pointsEnabled")}

src/app/admin/radio/ranks/page.tsx

@@ -84,7 +84,7 @@ export default async function AdminRadioRanksPage() {
       <section className="mt-6">
         <h2 className="admin-section-title">{t("ranksForm.addRank")}</h2>
         <form action={createRadioRank} className="admin-card">
-          <div className="grid cols-3">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
             <div>
               <label htmlFor="new_name" style={{ display: 'block', fontWeight: 700 }}>
                 {t("ranksForm.name")}

src/app/admin/radio/settings/page.tsx

@@ -279,7 +279,7 @@ export default async function AdminRadioSettingsPage() {
         {groups.map((group) => (
           <section key={group.title} className="admin-card" style={{ marginBottom: '1.25rem' }}>
             <h2 style={{ marginTop: 0 }}>{group.title}</h2>
-            <div className="grid cols-2">
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               {group.fields.map((field) => (
                 <div key={field.key}>
                   <label

src/app/admin/tags/page.tsx

@@ -83,7 +83,7 @@ export default async function AdminTagsPage() {
 
       <form action={createTag} className="admin-card mb-6">
         <h3 style={{ marginTop: 0 }}>{t("addTag")}</h3>
-        <div className="grid cols-2">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div>
             <label htmlFor="new_name" style={{ display: 'block', fontWeight: 700 }}>
               {t("name")}

src/app/admin/teams/page.tsx

@@ -62,7 +62,7 @@ export default async function AdminTeams() {
       <div className="admin-card" style={{ marginBottom: "1.5rem" }}>
         <h3 style={{ marginTop: 0 }}>{t("newTeamRank")}</h3>
         <form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}>
-          <div className="grid cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <label style={{ display: "grid", gap: "0.25rem" }}>
               <span className="text-sm text-gray-500 dark:text-gray-400">{t("rankName")}</span>
               <input name="rankName" placeholder={t("rankNamePlaceholder")} required />

src/app/admin/users/[id]/edit/page.tsx

@@ -96,7 +96,7 @@ export default async function AdminUserEdit({
       <form action={updateUser} className="admin-card">
         <input type="hidden" name="id" value={user.id} />
 
-        <div className="grid cols-2">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <label>
             {t("email")}
             <input name="mail" type="email" defaultValue={user.mail ?? ""} maxLength={500} />

src/app/admin/users/[id]/page.tsx

@@ -79,7 +79,7 @@ export default async function AdminUserDetail({
 
       <section className="mt-6">
         <h2 className="admin-section-title">{t("detail.actions")}</h2>
-        <div className="grid cols-2">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <form action={giveCurrency} className="admin-card">
             <input type="hidden" name="userId" value={user.id} />
             <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.giveCurrency")}</h3>

src/app/admin/vouchers/page.tsx

@@ -92,7 +92,7 @@ export default async function AdminVouchers() {
 
       <form action={createVoucher} className="admin-card mb-6">
         <h3 style={{ marginTop: 0 }}>{t("newVoucher")}</h3>
-        <div className="grid cols-2" style={{ marginBottom: "0.75rem" }}>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2" style={{ marginBottom: "0.75rem" }}>
           <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.code")}</span>
             <input name="code" placeholder={t("form.codePlaceholder")} maxLength={255} required />

src/app/admin/vpn/page.tsx

@@ -80,7 +80,7 @@ export default async function AdminVpn({
             </label>
           </div>
 
-          <div className="grid cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
               <label
                 htmlFor="vpn_provider"

src/app/admin/writeable-boxes/page.tsx

@@ -47,7 +47,7 @@ export default async function AdminWriteableBoxes() {
 
       <section className="mt-6">
         <h2 className="admin-section-title">{t("newBox")}</h2>
-        <form action={createBox} className="grid cols-2">
+        <form action={createBox} className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div>
             <label htmlFor="new_title" style={{ display: "block", fontWeight: 700 }}>
               {t("form.name")}
@@ -127,7 +127,7 @@ export default async function AdminWriteableBoxes() {
                   </span>
                 </div>
 
-                <form action={updateBox} className="grid cols-2">
+                <form action={updateBox} className="grid grid-cols-1 gap-4 md:grid-cols-2">
                   <input type="hidden" name="id" value={String(box.id)} />
                   <div>
                     <label

src/app/developers/page.tsx

@@ -334,7 +334,7 @@ function EndpointRow({ endpoint }: { endpoint: Endpoint }) {
         alignItems: "center",
         gap: "0.5rem 0.75rem",
         padding: "0.7rem 0",
-        borderTop: "1px solid var(--border)",
+        borderTop: "1px solid var(--border-subtle)",
       }}
     >
       <code
@@ -346,7 +346,7 @@ function EndpointRow({ endpoint }: { endpoint: Endpoint }) {
             "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
           fontSize: "0.85rem",
           background: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-          border: "1px solid var(--border)",
+          border: "1px solid var(--border-subtle)",
           borderRadius: "var(--radius-sm)",
           padding: "0.3rem 0.55rem",
           whiteSpace: "nowrap",
@@ -396,7 +396,7 @@ export default function DevelopersPage() {
                 "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
               fontSize: "0.85rem",
               background: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-              border: "1px solid var(--border)",
+              border: "1px solid var(--border-subtle)",
               borderRadius: "var(--radius-sm)",
               padding: "0.6rem 0.75rem",
               whiteSpace: "pre-wrap",

src/app/globals.css

@@ -66,7 +66,7 @@
   --input-focus-color: #eeb425;
   --navbar-height: 56px;
   --muted: var(--color-text-muted);
-  --border: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
+  --border-subtle: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
 }
 
 /* Dark mode (toggled by html.dark; wins over :root + ThemeVars via specificity). */
@@ -250,22 +250,6 @@ a:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-card-hover);
 }
-.grid {
-  display: grid;
-  gap: 1rem;
-}
-.grid.cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-.grid.cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-@media (max-width: 720px) {
-  .grid.cols-2,
-  .grid.cols-3 {
-    grid-template-columns: 1fr;
-  }
-}
 .article-img {
   width: 100%;
   height: 140px;
@@ -408,7 +392,7 @@ tbody tr:hover {
 .admin-card {
   background: var(--color-navbar);
   color: var(--color-navbar-text);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-subtle);
   border-radius: 16px;
   box-shadow: var(--shadow-card);
   padding: 1.25rem;
@@ -452,7 +436,7 @@ tbody tr:hover {
 .admin-page table {
   width: 100%;
   background: var(--color-navbar);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-subtle);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-card);
@@ -462,7 +446,7 @@ tbody tr:hover {
 .admin-page thead th {
   background: color-mix(in srgb, var(--color-primary) 8%, var(--color-navbar));
   color: var(--color-text-muted);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-subtle);
   white-space: nowrap;
   font-size: 0.68rem;
   font-weight: 700;