From 1ca34fa3d1a51a899a243c2acb760a357c0599c1 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Mon, 2 Feb 2026 01:49:04 +0300
Subject: [PATCH] style: align AdminTariffCreate with other admin create pages

Added gap-3 to footer for consistency with AdminCampaignCreate
and AdminBroadcastCreate pages
---
 src/pages/AdminTariffCreate.tsx | 1032 +++++++++++++++----------------
 1 file changed, 489 insertions(+), 543 deletions(-)

diff --git a/src/pages/AdminTariffCreate.tsx b/src/pages/AdminTariffCreate.tsx
index a048359..a326b91 100644
--- a/src/pages/AdminTariffCreate.tsx
+++ b/src/pages/AdminTariffCreate.tsx
@@ -46,7 +46,7 @@ const InfinityIcon = () => (
 );
 
 const CalendarIcon = () => (
-  <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -56,7 +56,7 @@ const CalendarIcon = () => (
 );
 
 const SunIcon = () => (
-  <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -65,6 +65,22 @@ const SunIcon = () => (
   </svg>
 );
 
+const RefreshIcon = () => (
+  <svg
+    className="h-4 w-4 animate-spin"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
+  </svg>
+);
+
 type TariffType = 'period' | 'daily' | null;
 
 export default function AdminTariffCreate() {
@@ -131,7 +147,6 @@ export default function AdminTariffCreate() {
     refetchOnMount: true,
     refetchOnWindowFocus: false,
     select: useCallback((data: TariffDetail) => {
-      // Set form values from tariff
       setTariffType(data.is_daily ? 'daily' : 'period');
       setName(data.name);
       setDescription(data.description || '');
@@ -199,7 +214,6 @@ export default function AdminTariffCreate() {
       traffic_reset_mode: trafficResetMode,
     };
 
-    // Add period tariff specific fields
     if (!isDaily) {
       data.custom_days_enabled = customDaysEnabled;
       data.price_per_day_kopeks = pricePerDayKopeks;
@@ -268,11 +282,11 @@ export default function AdminTariffCreate() {
   // Type selection step (only for creation)
   if (!isEdit && tariffType === null) {
     return (
-      <div className="animate-fade-in">
-        <div className="mb-6 flex items-center gap-3">
+      <div className="space-y-6">
+        <div className="flex items-center gap-3">
           <AdminBackButton />
           <div>
-            <h1 className="text-xl font-semibold text-dark-100">{t('admin.tariffs.selectType')}</h1>
+            <h1 className="text-xl font-bold text-dark-100">{t('admin.tariffs.selectType')}</h1>
             <p className="text-sm text-dark-400">{t('admin.tariffs.selectTypeDesc')}</p>
           </div>
         </div>
@@ -280,7 +294,7 @@ export default function AdminTariffCreate() {
         <div className="grid gap-4 sm:grid-cols-2">
           <button
             onClick={() => setTariffType('period')}
-            className="group rounded-xl bg-dark-800 p-6 text-left transition-colors hover:bg-dark-700"
+            className="card group p-6 text-left transition-colors hover:border-accent-500/50"
           >
             <div className="flex items-center gap-4">
               <div className="rounded-lg bg-accent-500/20 p-3 text-accent-400 group-hover:bg-accent-500/30">
@@ -294,7 +308,7 @@ export default function AdminTariffCreate() {
           </button>
           <button
             onClick={() => setTariffType('daily')}
-            className="group rounded-xl bg-dark-800 p-6 text-left transition-colors hover:bg-dark-700"
+            className="card group p-6 text-left transition-colors hover:border-warning-500/50"
           >
             <div className="flex items-center gap-4">
               <div className="rounded-lg bg-warning-500/20 p-3 text-warning-400 group-hover:bg-warning-500/30">
@@ -315,23 +329,23 @@ export default function AdminTariffCreate() {
   const accentColor = isDaily ? 'warning' : 'accent';
 
   return (
-    <div className="animate-fade-in">
+    <div className="space-y-6">
       {/* Header */}
-      <div className="mb-6 flex items-center gap-3">
+      <div className="flex items-center gap-3">
         <AdminBackButton />
         <div className="flex items-center gap-3">
           <div className={`rounded-lg bg-${accentColor}-500/20 p-2 text-${accentColor}-400`}>
             {isDaily ? <SunIcon /> : <CalendarIcon />}
           </div>
           <div>
-            <h1 className="text-xl font-semibold text-dark-100">
+            <h1 className="text-xl font-bold text-dark-100">
               {isEdit
                 ? t('admin.tariffs.editTitle')
                 : isDaily
                   ? t('admin.tariffs.newDailyTitle')
                   : t('admin.tariffs.newPeriodTitle')}
             </h1>
-            <p className="text-xs text-dark-500">
+            <p className="text-sm text-dark-400">
               {isDaily ? t('admin.tariffs.dailyDeduction') : t('admin.tariffs.periodPayment')}
             </p>
           </div>
@@ -340,7 +354,7 @@ export default function AdminTariffCreate() {
 
       {/* Tabs */}
       <div
-        className="scrollbar-hide -mx-4 mb-6 flex gap-2 overflow-x-auto px-4 py-1"
+        className="scrollbar-hide -mx-4 flex gap-2 overflow-x-auto px-4 py-1"
         style={{ WebkitOverflowScrolling: 'touch' }}
       >
         {(isDaily
@@ -353,7 +367,7 @@ export default function AdminTariffCreate() {
             className={`shrink-0 whitespace-nowrap rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
               activeTab === tab
                 ? `bg-${accentColor}-500/15 text-${accentColor}-400 ring-1 ring-${accentColor}-500/30`
-                : 'bg-dark-800/50 text-dark-400 active:bg-dark-700'
+                : 'bg-dark-800/50 text-dark-400 hover:bg-dark-700'
             }`}
           >
             {tab === 'basic' && t('admin.tariffs.tabBasic')}
@@ -365,608 +379,540 @@ export default function AdminTariffCreate() {
       </div>
 
       {/* Content */}
-      <div className="space-y-6">
-        {activeTab === 'basic' && (
-          <div className="space-y-4">
-            {/* Name */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.tariffs.nameLabel')}
-              </label>
-              <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                placeholder={
-                  isDaily
-                    ? t('admin.tariffs.nameExampleDaily')
-                    : t('admin.tariffs.nameExamplePeriod')
-                }
-              />
-            </div>
+      {activeTab === 'basic' && (
+        <div className="card space-y-4">
+          {/* Name */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-300">
+              {t('admin.tariffs.nameLabel')}
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="input"
+              placeholder={
+                isDaily ? t('admin.tariffs.nameExampleDaily') : t('admin.tariffs.nameExamplePeriod')
+              }
+            />
+          </div>
 
-            {/* Description */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.tariffs.descriptionLabel')}
-              </label>
-              <textarea
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="w-full resize-none rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                rows={2}
-                placeholder={t('admin.tariffs.descriptionPlaceholder')}
-              />
-            </div>
+          {/* Description */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-300">
+              {t('admin.tariffs.descriptionLabel')}
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="input min-h-[80px] resize-none"
+              placeholder={t('admin.tariffs.descriptionPlaceholder')}
+            />
+          </div>
 
-            {/* Daily Price (only for daily tariff) */}
-            {isDaily && (
-              <div className="rounded-xl border border-warning-500/30 bg-warning-500/10 p-4">
-                <label className="mb-2 block text-sm font-medium text-warning-400">
-                  {t('admin.tariffs.dailyPriceLabel')}
-                </label>
-                <div className="flex items-center gap-2">
-                  <input
-                    type="number"
-                    value={dailyPriceKopeks / 100}
-                    onChange={(e) =>
-                      setDailyPriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)
-                    }
-                    className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                    min={0}
-                    step={0.1}
-                  />
-                  <span className="text-dark-400">{t('admin.tariffs.currencyPerDay')}</span>
-                </div>
-                <p className="mt-2 text-xs text-dark-500">
-                  {t('admin.tariffs.dailyDeductionDesc')}
-                </p>
-              </div>
-            )}
-
-            {/* Traffic Limit */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.tariffs.trafficLimitLabel')}
+          {/* Daily Price (only for daily tariff) */}
+          {isDaily && (
+            <div className="rounded-lg border border-warning-500/30 bg-warning-500/10 p-4">
+              <label className="mb-2 block text-sm font-medium text-warning-400">
+                {t('admin.tariffs.dailyPriceLabel')}
               </label>
               <div className="flex items-center gap-2">
                 <input
                   type="number"
-                  value={trafficLimitGb}
-                  onChange={(e) => setTrafficLimitGb(Math.max(0, parseInt(e.target.value) || 0))}
-                  className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                  value={dailyPriceKopeks / 100}
+                  onChange={(e) =>
+                    setDailyPriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)
+                  }
+                  className="input w-32"
                   min={0}
+                  step={0.1}
                 />
-                <span className="text-dark-400">{t('admin.tariffs.gbUnit')}</span>
-                {trafficLimitGb === 0 && (
-                  <span className="flex items-center gap-1 text-sm text-success-500">
-                    <InfinityIcon />
-                    {t('admin.tariffs.unlimited')}
-                  </span>
-                )}
+                <span className="text-dark-400">{t('admin.tariffs.currencyPerDay')}</span>
               </div>
-              <p className="mt-1 text-xs text-dark-500">{t('admin.tariffs.trafficLimitHint')}</p>
+              <p className="mt-2 text-xs text-dark-500">{t('admin.tariffs.dailyDeductionDesc')}</p>
             </div>
+          )}
 
-            {/* Device Limit */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.tariffs.deviceLimitLabel')}
-              </label>
+          {/* Traffic Limit */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-300">
+              {t('admin.tariffs.trafficLimitLabel')}
+            </label>
+            <div className="flex items-center gap-2">
               <input
                 type="number"
-                value={deviceLimit}
-                onChange={(e) => setDeviceLimit(Math.max(1, parseInt(e.target.value) || 1))}
-                className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                min={1}
+                value={trafficLimitGb}
+                onChange={(e) => setTrafficLimitGb(Math.max(0, parseInt(e.target.value) || 0))}
+                className="input w-32"
+                min={0}
               />
+              <span className="text-dark-400">{t('admin.tariffs.gbUnit')}</span>
+              {trafficLimitGb === 0 && (
+                <span className="flex items-center gap-1 text-sm text-success-500">
+                  <InfinityIcon />
+                  {t('admin.tariffs.unlimited')}
+                </span>
+              )}
             </div>
+            <p className="mt-1 text-xs text-dark-500">{t('admin.tariffs.trafficLimitHint')}</p>
+          </div>
 
-            {/* Tier Level */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.tariffs.tierLevelLabel')}
-              </label>
-              <input
-                type="number"
-                value={tierLevel}
-                onChange={(e) =>
-                  setTierLevel(Math.min(10, Math.max(1, parseInt(e.target.value) || 1)))
-                }
-                className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                min={1}
-                max={10}
-              />
-              <p className="mt-1 text-xs text-dark-500">{t('admin.tariffs.tierLevelHint')}</p>
+          {/* Device Limit */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-300">
+              {t('admin.tariffs.deviceLimitLabel')}
+            </label>
+            <input
+              type="number"
+              value={deviceLimit}
+              onChange={(e) => setDeviceLimit(Math.max(1, parseInt(e.target.value) || 1))}
+              className="input w-32"
+              min={1}
+            />
+          </div>
+
+          {/* Tier Level */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-300">
+              {t('admin.tariffs.tierLevelLabel')}
+            </label>
+            <input
+              type="number"
+              value={tierLevel}
+              onChange={(e) =>
+                setTierLevel(Math.min(10, Math.max(1, parseInt(e.target.value) || 1)))
+              }
+              className="input w-32"
+              min={1}
+              max={10}
+            />
+            <p className="mt-1 text-xs text-dark-500">{t('admin.tariffs.tierLevelHint')}</p>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'periods' && !isDaily && (
+        <div className="card space-y-4">
+          <p className="text-sm text-dark-400">{t('admin.tariffs.periodsTabHint')}</p>
+
+          {/* Add new period */}
+          <div className="rounded-lg border border-dashed border-dark-600 bg-dark-800/50 p-4">
+            <h4 className="mb-3 text-sm font-medium text-dark-300">
+              {t('admin.tariffs.addPeriodTitle')}
+            </h4>
+            <div className="flex flex-wrap items-end gap-3">
+              <div>
+                <label className="mb-1 block text-xs text-dark-500">
+                  {t('admin.tariffs.daysLabel')}
+                </label>
+                <input
+                  type="number"
+                  value={newPeriodDays}
+                  onChange={(e) => setNewPeriodDays(Math.max(1, parseInt(e.target.value) || 1))}
+                  className="input w-24"
+                  min={1}
+                />
+              </div>
+              <div>
+                <label className="mb-1 block text-xs text-dark-500">
+                  {t('admin.tariffs.priceLabel')}
+                </label>
+                <input
+                  type="number"
+                  value={newPeriodPrice}
+                  onChange={(e) => setNewPeriodPrice(Math.max(1, parseInt(e.target.value) || 1))}
+                  className="input w-28"
+                  min={1}
+                />
+              </div>
+              <button
+                onClick={addPeriod}
+                disabled={periodPrices.some((p) => p.days === newPeriodDays)}
+                className="btn-primary flex items-center gap-2"
+              >
+                <PlusIcon />
+                {t('admin.tariffs.addButton')}
+              </button>
             </div>
           </div>
-        )}
 
-        {activeTab === 'periods' && !isDaily && (
-          <div className="space-y-4">
-            <p className="text-sm text-dark-400">{t('admin.tariffs.periodsTabHint')}</p>
-
-            {/* Add new period */}
-            <div className="rounded-xl border border-dashed border-dark-600 bg-dark-800/50 p-4">
-              <h4 className="mb-3 text-sm font-medium text-dark-300">
-                {t('admin.tariffs.addPeriodTitle')}
-              </h4>
-              <div className="flex flex-wrap items-end gap-3">
-                <div>
-                  <label className="mb-1 block text-xs text-dark-500">
-                    {t('admin.tariffs.daysLabel')}
-                  </label>
-                  <input
-                    type="number"
-                    value={newPeriodDays}
-                    onChange={(e) => setNewPeriodDays(Math.max(1, parseInt(e.target.value) || 1))}
-                    className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                    min={1}
-                  />
-                </div>
-                <div>
-                  <label className="mb-1 block text-xs text-dark-500">
-                    {t('admin.tariffs.priceLabel')}
-                  </label>
-                  <input
-                    type="number"
-                    value={newPeriodPrice}
-                    onChange={(e) => setNewPeriodPrice(Math.max(1, parseInt(e.target.value) || 1))}
-                    className="w-28 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                    min={1}
-                  />
-                </div>
-                <button
-                  onClick={addPeriod}
-                  disabled={periodPrices.some((p) => p.days === newPeriodDays)}
-                  className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
+          {/* Period list */}
+          {periodPrices.length === 0 ? (
+            <div className="py-8 text-center text-dark-500">{t('admin.tariffs.noPeriodsHint')}</div>
+          ) : (
+            <div className="space-y-2">
+              {periodPrices.map((period) => (
+                <div
+                  key={period.days}
+                  className="flex items-center gap-3 rounded-lg bg-dark-800 p-3"
                 >
-                  <PlusIcon />
-                  {t('admin.tariffs.addButton')}
-                </button>
-              </div>
-            </div>
-
-            {/* Period list */}
-            {periodPrices.length === 0 ? (
-              <div className="py-8 text-center text-dark-500">
-                {t('admin.tariffs.noPeriodsHint')}
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {periodPrices.map((period) => (
-                  <div
-                    key={period.days}
-                    className="flex items-center gap-3 rounded-xl bg-dark-800 p-3"
-                  >
-                    <div className="w-20 font-medium text-dark-300">
-                      {period.days} {t('admin.tariffs.daysShort')}
-                    </div>
-                    <input
-                      type="number"
-                      value={period.price_kopeks / 100}
-                      onChange={(e) =>
-                        updatePeriodPrice(period.days, Math.max(0, parseFloat(e.target.value) || 0))
-                      }
-                      className="w-28 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                      min={0}
-                      step={1}
-                    />
-                    <span className="text-dark-400">₽</span>
-                    <div className="flex-1" />
-                    <button
-                      onClick={() => removePeriod(period.days)}
-                      className="rounded-lg p-2 text-dark-400 transition-colors hover:bg-error-500/20 hover:text-error-400"
-                    >
-                      <TrashIcon />
-                    </button>
+                  <div className="w-20 font-medium text-dark-300">
+                    {period.days} {t('admin.tariffs.daysShort')}
                   </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        {activeTab === 'servers' && (
-          <div className="space-y-2">
-            <p className="mb-4 text-sm text-dark-400">{t('admin.tariffs.serversTabHint')}</p>
-            {servers.length === 0 ? (
-              <p className="py-4 text-center text-dark-500">
-                {t('admin.tariffs.noServersAvailable')}
-              </p>
-            ) : (
-              servers.map((server: ServerInfo) => {
-                const isSelected = selectedSquads.includes(server.squad_uuid);
-                return (
-                  <div
-                    key={server.id}
-                    onClick={() => toggleServer(server.squad_uuid)}
-                    className={`cursor-pointer rounded-xl p-3 transition-colors ${
-                      isSelected
-                        ? `border border-${accentColor}-500/50 bg-${accentColor}-500/20`
-                        : 'border border-transparent bg-dark-800 hover:bg-dark-700'
-                    }`}
-                  >
-                    <div className="flex items-center gap-3">
-                      <div
-                        className={`flex h-5 w-5 items-center justify-center rounded ${
-                          isSelected ? 'bg-accent-500 text-white' : 'bg-dark-600'
-                        }`}
-                      >
-                        {isSelected && <CheckIcon />}
-                      </div>
-                      <span className="flex-1 text-dark-200">{server.display_name}</span>
-                      {server.country_code && (
-                        <span className="text-xs text-dark-500">{server.country_code}</span>
-                      )}
-                    </div>
-                  </div>
-                );
-              })
-            )}
-          </div>
-        )}
-
-        {activeTab === 'extra' && (
-          <div className="space-y-6">
-            {/* Device addon */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <h4 className="mb-3 text-sm font-medium text-dark-200">
-                {t('admin.tariffs.extraDeviceTitle')}
-              </h4>
-              <div className="space-y-3">
-                <div className="flex items-center gap-3">
-                  <span className="w-48 text-sm text-dark-400">
-                    {t('admin.tariffs.devicePriceLabel')}
-                  </span>
                   <input
                     type="number"
-                    value={devicePriceKopeks / 100}
+                    value={period.price_kopeks / 100}
                     onChange={(e) =>
-                      setDevicePriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)
+                      updatePeriodPrice(period.days, Math.max(0, parseFloat(e.target.value) || 0))
                     }
-                    className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                    className="input w-28"
                     min={0}
                     step={1}
                   />
                   <span className="text-dark-400">₽</span>
+                  <div className="flex-1" />
+                  <button
+                    onClick={() => removePeriod(period.days)}
+                    className="rounded-lg p-2 text-dark-400 transition-colors hover:bg-error-500/20 hover:text-error-400"
+                  >
+                    <TrashIcon />
+                  </button>
                 </div>
-                <p className="text-xs text-dark-500">{t('admin.tariffs.devicePriceHint')}</p>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {activeTab === 'servers' && (
+        <div className="card space-y-4">
+          <p className="text-sm text-dark-400">{t('admin.tariffs.serversTabHint')}</p>
+          {servers.length === 0 ? (
+            <p className="py-4 text-center text-dark-500">
+              {t('admin.tariffs.noServersAvailable')}
+            </p>
+          ) : (
+            <div className="max-h-64 space-y-2 overflow-y-auto">
+              {servers.map((server: ServerInfo) => {
+                const isSelected = selectedSquads.includes(server.squad_uuid);
+                return (
+                  <button
+                    key={server.id}
+                    type="button"
+                    onClick={() => toggleServer(server.squad_uuid)}
+                    className={`flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors ${
+                      isSelected
+                        ? `bg-${accentColor}-500/20 text-${accentColor}-300`
+                        : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
+                    }`}
+                  >
+                    <div
+                      className={`flex h-5 w-5 items-center justify-center rounded ${
+                        isSelected ? 'bg-accent-500 text-white' : 'bg-dark-600'
+                      }`}
+                    >
+                      {isSelected && <CheckIcon />}
+                    </div>
+                    <span className="flex-1 text-sm font-medium">{server.display_name}</span>
+                    {server.country_code && (
+                      <span className="text-xs text-dark-500">{server.country_code}</span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {activeTab === 'extra' && (
+        <div className="space-y-4">
+          {/* Device addon */}
+          <div className="card space-y-3">
+            <h4 className="text-sm font-medium text-dark-200">
+              {t('admin.tariffs.extraDeviceTitle')}
+            </h4>
+            <div className="flex items-center gap-3">
+              <span className="w-48 text-sm text-dark-400">
+                {t('admin.tariffs.devicePriceLabel')}
+              </span>
+              <input
+                type="number"
+                value={devicePriceKopeks / 100}
+                onChange={(e) =>
+                  setDevicePriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)
+                }
+                className="input w-24"
+                min={0}
+                step={1}
+              />
+              <span className="text-dark-400">₽</span>
+            </div>
+            <p className="text-xs text-dark-500">{t('admin.tariffs.devicePriceHint')}</p>
+            <div className="flex items-center gap-3">
+              <span className="w-48 text-sm text-dark-400">
+                {t('admin.tariffs.maxDeviceLabel')}
+              </span>
+              <input
+                type="number"
+                value={maxDeviceLimit}
+                onChange={(e) => setMaxDeviceLimit(Math.max(0, parseInt(e.target.value) || 0))}
+                className="input w-24"
+                min={0}
+              />
+            </div>
+            <p className="text-xs text-dark-500">{t('admin.tariffs.noLimitHint')}</p>
+          </div>
+
+          {/* Traffic topup */}
+          <div className="card space-y-3">
+            <div className="flex items-center justify-between">
+              <h4 className="text-sm font-medium text-dark-200">
+                {t('admin.tariffs.extraTrafficTitle')}
+              </h4>
+              <button
+                type="button"
+                onClick={() => setTrafficTopupEnabled(!trafficTopupEnabled)}
+                className={`relative h-6 w-11 rounded-full transition-colors ${
+                  trafficTopupEnabled ? 'bg-accent-500' : 'bg-dark-600'
+                }`}
+              >
+                <span
+                  className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
+                    trafficTopupEnabled ? 'left-6' : 'left-1'
+                  }`}
+                />
+              </button>
+            </div>
+            {trafficTopupEnabled && (
+              <>
                 <div className="flex items-center gap-3">
-                  <span className="w-48 text-sm text-dark-400">
-                    {t('admin.tariffs.maxDeviceLabel')}
+                  <span className="w-32 text-sm text-dark-400">
+                    {t('admin.tariffs.trafficMaxLimitLabel')}
                   </span>
                   <input
                     type="number"
-                    value={maxDeviceLimit}
-                    onChange={(e) => setMaxDeviceLimit(Math.max(0, parseInt(e.target.value) || 0))}
-                    className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                    value={maxTopupTrafficGb}
+                    onChange={(e) =>
+                      setMaxTopupTrafficGb(Math.max(0, parseInt(e.target.value) || 0))
+                    }
+                    className="input w-24"
                     min={0}
                   />
+                  <span className="text-dark-400">{t('admin.tariffs.gbUnit')}</span>
                 </div>
-                <p className="text-xs text-dark-500">{t('admin.tariffs.noLimitHint')}</p>
-              </div>
-            </div>
+                <div>
+                  <span className="text-sm text-dark-400">
+                    {t('admin.tariffs.trafficPackagesLabel')}
+                  </span>
+                  <div className="mt-2 grid grid-cols-2 gap-2">
+                    {[5, 10, 20, 50].map((gb) => (
+                      <div key={gb} className="flex items-center gap-2">
+                        <span className="w-12 text-sm text-dark-300">
+                          {gb} {t('admin.tariffs.gbPackageUnit')}
+                        </span>
+                        <input
+                          type="number"
+                          value={(trafficTopupPackages[String(gb)] || 0) / 100}
+                          onChange={(e) => {
+                            const price = Math.max(0, parseFloat(e.target.value) || 0) * 100;
+                            setTrafficTopupPackages((prev) => ({
+                              ...prev,
+                              [String(gb)]: price,
+                            }));
+                          }}
+                          className="input w-20"
+                          min={0}
+                          step={1}
+                        />
+                        <span className="text-xs text-dark-400">₽</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
 
-            {/* Traffic topup */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <div className="mb-3 flex items-center justify-between">
-                <h4 className="text-sm font-medium text-dark-200">
-                  {t('admin.tariffs.extraTrafficTitle')}
-                </h4>
+          {/* Custom days (period only) */}
+          {!isDaily && (
+            <div className="card space-y-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h4 className="text-sm font-medium text-dark-200">
+                    {t('admin.tariffs.customDaysTitle')}
+                  </h4>
+                  <p className="mt-1 text-xs text-dark-500">{t('admin.tariffs.customDaysDesc')}</p>
+                </div>
                 <button
                   type="button"
-                  onClick={() => setTrafficTopupEnabled(!trafficTopupEnabled)}
-                  className={`relative h-6 w-10 rounded-full transition-colors ${
-                    trafficTopupEnabled ? `bg-${accentColor}-500` : 'bg-dark-600'
+                  onClick={() => setCustomDaysEnabled(!customDaysEnabled)}
+                  className={`relative h-6 w-11 rounded-full transition-colors ${
+                    customDaysEnabled ? 'bg-accent-500' : 'bg-dark-600'
                   }`}
                 >
                   <span
                     className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
-                      trafficTopupEnabled ? 'left-5' : 'left-1'
+                      customDaysEnabled ? 'left-6' : 'left-1'
                     }`}
                   />
                 </button>
               </div>
-              {trafficTopupEnabled && (
-                <div className="space-y-3">
+              {customDaysEnabled && (
+                <div className="space-y-3 border-t border-dark-700 pt-3">
                   <div className="flex items-center gap-3">
                     <span className="w-32 text-sm text-dark-400">
-                      {t('admin.tariffs.trafficMaxLimitLabel')}
+                      {t('admin.tariffs.pricePerDayLabel')}
                     </span>
                     <input
                       type="number"
-                      value={maxTopupTrafficGb}
+                      value={pricePerDayKopeks / 100}
                       onChange={(e) =>
-                        setMaxTopupTrafficGb(Math.max(0, parseInt(e.target.value) || 0))
+                        setPricePerDayKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)
                       }
-                      className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                      className="input w-24"
                       min={0}
+                      step={0.1}
                     />
-                    <span className="text-dark-400">{t('admin.tariffs.gbUnit')}</span>
-                    <span className="text-xs text-dark-500">
-                      {t('admin.tariffs.trafficLimitHint2')}
-                    </span>
+                    <span className="text-dark-400">₽</span>
                   </div>
-                  <div className="mt-3">
-                    <span className="text-sm text-dark-400">
-                      {t('admin.tariffs.trafficPackagesLabel')}
+                  <div className="flex items-center gap-3">
+                    <span className="w-32 text-sm text-dark-400">
+                      {t('admin.tariffs.minDaysLabel')}
                     </span>
-                    <div className="mt-2 grid grid-cols-2 gap-2">
-                      {[5, 10, 20, 50].map((gb) => (
-                        <div key={gb} className="flex items-center gap-2">
-                          <span className="w-12 text-sm text-dark-300">
-                            {gb} {t('admin.tariffs.gbPackageUnit')}
-                          </span>
-                          <input
-                            type="number"
-                            value={(trafficTopupPackages[String(gb)] || 0) / 100}
-                            onChange={(e) => {
-                              const price = Math.max(0, parseFloat(e.target.value) || 0) * 100;
-                              setTrafficTopupPackages((prev) => ({
-                                ...prev,
-                                [String(gb)]: price,
-                              }));
-                            }}
-                            className="w-20 rounded border border-dark-500 bg-dark-600 px-2 py-1 text-sm text-dark-100 focus:border-accent-500 focus:outline-none"
-                            min={0}
-                            step={1}
-                          />
-                          <span className="text-xs text-dark-400">₽</span>
-                        </div>
-                      ))}
-                    </div>
+                    <input
+                      type="number"
+                      value={minDays}
+                      onChange={(e) => setMinDays(Math.max(1, parseInt(e.target.value) || 1))}
+                      className="input w-24"
+                      min={1}
+                    />
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="w-32 text-sm text-dark-400">
+                      {t('admin.tariffs.maxDaysLabel')}
+                    </span>
+                    <input
+                      type="number"
+                      value={maxDays}
+                      onChange={(e) => setMaxDays(Math.max(1, parseInt(e.target.value) || 1))}
+                      className="input w-24"
+                      min={1}
+                    />
                   </div>
                 </div>
               )}
             </div>
+          )}
 
-            {/* Custom days (period only) */}
-            {!isDaily && (
-              <div className="rounded-xl bg-dark-800 p-4">
-                <div className="mb-3 flex items-center justify-between">
-                  <div>
-                    <h4 className="text-sm font-medium text-dark-200">
-                      {t('admin.tariffs.customDaysTitle')}
-                    </h4>
-                    <p className="mt-1 text-xs text-dark-500">
-                      {t('admin.tariffs.customDaysDesc')}
-                    </p>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => setCustomDaysEnabled(!customDaysEnabled)}
-                    className={`relative h-6 w-10 rounded-full transition-colors ${
-                      customDaysEnabled ? 'bg-accent-500' : 'bg-dark-600'
-                    }`}
-                  >
-                    <span
-                      className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
-                        customDaysEnabled ? 'left-5' : 'left-1'
-                      }`}
-                    />
-                  </button>
+          {/* Custom traffic (period only) */}
+          {!isDaily && (
+            <div className="card space-y-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h4 className="text-sm font-medium text-dark-200">
+                    {t('admin.tariffs.customTrafficTitle')}
+                  </h4>
+                  <p className="mt-1 text-xs text-dark-500">
+                    {t('admin.tariffs.customTrafficDesc')}
+                  </p>
                 </div>
-                {customDaysEnabled && (
-                  <div className="space-y-3 border-t border-dark-600 pt-2">
-                    <div className="flex items-center gap-3">
-                      <span className="w-32 text-sm text-dark-400">
-                        {t('admin.tariffs.pricePerDayLabel')}
-                      </span>
-                      <input
-                        type="number"
-                        value={pricePerDayKopeks / 100}
-                        onChange={(e) =>
-                          setPricePerDayKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)
-                        }
-                        className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                        min={0}
-                        step={0.1}
-                      />
-                      <span className="text-dark-400">₽</span>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <span className="w-32 text-sm text-dark-400">
-                        {t('admin.tariffs.minDaysLabel')}
-                      </span>
-                      <input
-                        type="number"
-                        value={minDays}
-                        onChange={(e) => setMinDays(Math.max(1, parseInt(e.target.value) || 1))}
-                        className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                        min={1}
-                      />
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <span className="w-32 text-sm text-dark-400">
-                        {t('admin.tariffs.maxDaysLabel')}
-                      </span>
-                      <input
-                        type="number"
-                        value={maxDays}
-                        onChange={(e) => setMaxDays(Math.max(1, parseInt(e.target.value) || 1))}
-                        className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                        min={1}
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Custom traffic (period only) */}
-            {!isDaily && (
-              <div className="rounded-xl bg-dark-800 p-4">
-                <div className="mb-3 flex items-center justify-between">
-                  <div>
-                    <h4 className="text-sm font-medium text-dark-200">
-                      {t('admin.tariffs.customTrafficTitle')}
-                    </h4>
-                    <p className="mt-1 text-xs text-dark-500">
-                      {t('admin.tariffs.customTrafficDesc')}
-                    </p>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => setCustomTrafficEnabled(!customTrafficEnabled)}
-                    className={`relative h-6 w-10 rounded-full transition-colors ${
-                      customTrafficEnabled ? 'bg-accent-500' : 'bg-dark-600'
+                <button
+                  type="button"
+                  onClick={() => setCustomTrafficEnabled(!customTrafficEnabled)}
+                  className={`relative h-6 w-11 rounded-full transition-colors ${
+                    customTrafficEnabled ? 'bg-accent-500' : 'bg-dark-600'
+                  }`}
+                >
+                  <span
+                    className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
+                      customTrafficEnabled ? 'left-6' : 'left-1'
                     }`}
-                  >
-                    <span
-                      className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
-                        customTrafficEnabled ? 'left-5' : 'left-1'
-                      }`}
+                  />
+                </button>
+              </div>
+              {customTrafficEnabled && (
+                <div className="space-y-3 border-t border-dark-700 pt-3">
+                  <div className="flex items-center gap-3">
+                    <span className="w-32 text-sm text-dark-400">
+                      {t('admin.tariffs.pricePerGbLabel')}
+                    </span>
+                    <input
+                      type="number"
+                      value={trafficPricePerGbKopeks / 100}
+                      onChange={(e) =>
+                        setTrafficPricePerGbKopeks(
+                          Math.max(0, parseFloat(e.target.value) || 0) * 100,
+                        )
+                      }
+                      className="input w-24"
+                      min={0}
+                      step={0.1}
                     />
-                  </button>
-                </div>
-                {customTrafficEnabled && (
-                  <div className="space-y-3 border-t border-dark-600 pt-2">
-                    <div className="flex items-center gap-3">
-                      <span className="w-32 text-sm text-dark-400">
-                        {t('admin.tariffs.pricePerGbLabel')}
-                      </span>
-                      <input
-                        type="number"
-                        value={trafficPricePerGbKopeks / 100}
-                        onChange={(e) =>
-                          setTrafficPricePerGbKopeks(
-                            Math.max(0, parseFloat(e.target.value) || 0) * 100,
-                          )
-                        }
-                        className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                        min={0}
-                        step={0.1}
-                      />
-                      <span className="text-dark-400">₽</span>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <span className="w-32 text-sm text-dark-400">
-                        {t('admin.tariffs.minTrafficLabel')}
-                      </span>
-                      <input
-                        type="number"
-                        value={minTrafficGb}
-                        onChange={(e) =>
-                          setMinTrafficGb(Math.max(1, parseInt(e.target.value) || 1))
-                        }
-                        className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                        min={1}
-                      />
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <span className="w-32 text-sm text-dark-400">
-                        {t('admin.tariffs.maxTrafficLabel')}
-                      </span>
-                      <input
-                        type="number"
-                        value={maxTrafficGb}
-                        onChange={(e) =>
-                          setMaxTrafficGb(Math.max(1, parseInt(e.target.value) || 1))
-                        }
-                        className="w-24 rounded-lg border border-dark-500 bg-dark-600 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                        min={1}
-                      />
-                    </div>
+                    <span className="text-dark-400">₽</span>
                   </div>
-                )}
-              </div>
-            )}
+                  <div className="flex items-center gap-3">
+                    <span className="w-32 text-sm text-dark-400">
+                      {t('admin.tariffs.minTrafficLabel')}
+                    </span>
+                    <input
+                      type="number"
+                      value={minTrafficGb}
+                      onChange={(e) => setMinTrafficGb(Math.max(1, parseInt(e.target.value) || 1))}
+                      className="input w-24"
+                      min={1}
+                    />
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="w-32 text-sm text-dark-400">
+                      {t('admin.tariffs.maxTrafficLabel')}
+                    </span>
+                    <input
+                      type="number"
+                      value={maxTrafficGb}
+                      onChange={(e) => setMaxTrafficGb(Math.max(1, parseInt(e.target.value) || 1))}
+                      className="input w-24"
+                      min={1}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
 
-            {/* Traffic reset mode */}
-            <div className="rounded-xl bg-dark-800 p-4">
-              <h4 className="mb-3 text-sm font-medium text-dark-200">
-                {t('admin.tariffs.trafficResetModeTitle')}
-              </h4>
-              <p className="mb-3 text-xs text-dark-500">
-                {t('admin.tariffs.trafficResetModeDesc')}
-              </p>
-              <div className="space-y-2">
-                {[
-                  {
-                    value: null,
-                    labelKey: 'admin.tariffs.resetModeGlobal',
-                    descKey: 'admin.tariffs.resetModeGlobalDesc',
-                    emoji: '🌐',
-                  },
-                  {
-                    value: 'DAY',
-                    labelKey: 'admin.tariffs.resetModeDaily',
-                    descKey: 'admin.tariffs.resetModeDailyDesc',
-                    emoji: '📅',
-                  },
-                  {
-                    value: 'WEEK',
-                    labelKey: 'admin.tariffs.resetModeWeekly',
-                    descKey: 'admin.tariffs.resetModeWeeklyDesc',
-                    emoji: '📆',
-                  },
-                  {
-                    value: 'MONTH',
-                    labelKey: 'admin.tariffs.resetModeMonthly',
-                    descKey: 'admin.tariffs.resetModeMonthlyDesc',
-                    emoji: '🗓️',
-                  },
-                  {
-                    value: 'NO_RESET',
-                    labelKey: 'admin.tariffs.resetModeNever',
-                    descKey: 'admin.tariffs.resetModeNeverDesc',
-                    emoji: '🚫',
-                  },
-                ].map((option) => (
-                  <button
-                    key={option.value || 'global'}
-                    type="button"
-                    onClick={() => setTrafficResetMode(option.value)}
-                    className={`w-full rounded-lg p-3 text-left transition-colors ${
-                      trafficResetMode === option.value
-                        ? `border border-${accentColor}-500 bg-${accentColor}-500/20`
-                        : 'border border-dark-500 bg-dark-600 hover:border-dark-400'
-                    }`}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <span className="text-sm text-dark-100">
-                          {option.emoji} {t(option.labelKey)}
-                        </span>
-                        <p className="mt-0.5 text-xs text-dark-400">{t(option.descKey)}</p>
-                      </div>
-                      {trafficResetMode === option.value && (
-                        <span className={`text-${accentColor}-400`}>
-                          <CheckIcon />
-                        </span>
-                      )}
-                    </div>
-                  </button>
-                ))}
-              </div>
+          {/* Traffic reset mode */}
+          <div className="card space-y-3">
+            <h4 className="text-sm font-medium text-dark-200">
+              {t('admin.tariffs.trafficResetModeTitle')}
+            </h4>
+            <p className="text-xs text-dark-500">{t('admin.tariffs.trafficResetModeDesc')}</p>
+            <div className="grid grid-cols-2 gap-2">
+              {[
+                { value: null, labelKey: 'admin.tariffs.resetModeGlobal', emoji: '🌐' },
+                { value: 'DAY', labelKey: 'admin.tariffs.resetModeDaily', emoji: '📅' },
+                { value: 'WEEK', labelKey: 'admin.tariffs.resetModeWeekly', emoji: '📆' },
+                { value: 'MONTH', labelKey: 'admin.tariffs.resetModeMonthly', emoji: '🗓️' },
+                { value: 'NO_RESET', labelKey: 'admin.tariffs.resetModeNever', emoji: '🚫' },
+              ].map((option) => (
+                <button
+                  key={option.value || 'global'}
+                  type="button"
+                  onClick={() => setTrafficResetMode(option.value)}
+                  className={`rounded-lg p-3 text-left text-sm transition-colors ${
+                    trafficResetMode === option.value
+                      ? `bg-${accentColor}-500/20 text-${accentColor}-300 ring-1 ring-${accentColor}-500/30`
+                      : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
+                  }`}
+                >
+                  {option.emoji} {t(option.labelKey)}
+                </button>
+              ))}
             </div>
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* Footer */}
-      <div className="fixed inset-x-0 bottom-0 border-t border-dark-700 bg-dark-900/95 p-4 backdrop-blur-sm">
-        <div className="mx-auto flex max-w-2xl justify-end gap-3">
-          <button
-            onClick={() => navigate('/admin/tariffs')}
-            className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
-          >
-            {t('admin.tariffs.cancelButton')}
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={!isValid || isLoading}
-            className="rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {isLoading ? t('admin.tariffs.savingButton') : t('admin.tariffs.saveButton')}
-          </button>
-        </div>
+      <div className="card flex items-center justify-end gap-3">
+        <button
+          onClick={handleSubmit}
+          disabled={!isValid || isLoading}
+          className="btn-primary flex items-center gap-2"
+        >
+          {isLoading && <RefreshIcon />}
+          {isLoading ? t('admin.tariffs.savingButton') : t('admin.tariffs.saveButton')}
+        </button>
       </div>
-
-      {/* Spacer for fixed footer */}
-      <div className="h-20" />
     </div>
   );
 }