From a3523f8c57bd53a42c29a8e64c4479d2e1f2fd75 Mon Sep 17 00:00:00 2001
From: host <arumyantsev@rummail.ru>
Date: Sat, 25 Jul 2026 03:40:30 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=84=D0=B0=D0=B9=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles.css | 316 +---------------------------------------
 1 file changed, 1 insertion(+), 315 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 55924a8..7c617ac 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,278 +1,3 @@
-/* ============================================================
-   Proxmox VPS Panel — UI-стили
-   Одна согласованная тёмная тема. Без дублей и !important.
-   ============================================================ */
-
-:root {
-  --bg: #0b1120;
-  --surface: #131b2e;
-  --surface-2: #1a2438;
-  --border: #26324a;
-  --text: #e6edf5;
-  --text-muted: #8b96a8;
-  --accent: #22d3aa;
-  --accent-dim: #16826a;
-  --warn: #f5a623;
-  --danger: #ef4444;
-  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
-  --font-body: "Inter", system-ui, sans-serif;
-  --radius: 8px;
-}
-
-* { box-sizing: border-box; }
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font-body);
-  -webkit-font-smoothing: antialiased;
-}
-
-button, input, select {
-  font-family: inherit;
-}
-
-a { color: var(--accent); text-decoration: none; }
-
-/* --- Layout shell --- */
-.shell {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 24px;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.brand {
-  font-family: var(--font-mono);
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  font-size: 15px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.brand .prompt { color: var(--accent); }
-
-.topbar-right {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-.container {
-  max-width: 1040px;
-  margin: 0 auto;
-  padding: 32px 24px 80px;
-  width: 100%;
-}
-
-.page-title {
-  font-family: var(--font-mono);
-  font-size: 22px;
-  margin: 0 0 6px;
-}
-
-.page-sub {
-  color: var(--text-muted);
-  margin: 0 0 28px;
-  font-size: 14px;
-}
-
-/* --- Buttons --- */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 9px 16px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--surface-2);
-  color: var(--text);
-  cursor: pointer;
-  font-size: 14px;
-  transition: border-color 0.15s ease, background 0.15s ease;
-}
-.btn:hover { border-color: var(--accent-dim); }
-.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.btn-primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #06231c;
-  font-weight: 600;
-}
-.btn-primary:hover { background: #2ee6bb; }
-
-.btn-danger {
-  border-color: #5c2626;
-  color: #ff8a8a;
-}
-.btn-danger:hover { border-color: var(--danger); }
-
-.btn-sm {
-  padding: 6px 10px;
-  font-size: 12px;
-}
-
-/* --- Cards / fields --- */
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 20px;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 16px;
-}
-.field label {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-.field input, .field select {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 10px 12px;
-  color: var(--text);
-  font-size: 14px;
-}
-.field input:focus, .field select:focus {
-  outline: none;
-  border-color: var(--accent-dim);
-}
-
-.error-box {
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.4);
-  color: #ff9d9d;
-  padding: 10px 14px;
-  border-radius: var(--radius);
-  font-size: 13px;
-  margin-bottom: 16px;
-}
-
-/* --- Auth --- */
-.auth-wrap {
-  max-width: 380px;
-  margin: 90px auto;
-}
-
-/* --- Instance grid (одно правило, без дублей) --- */
-.instance-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  gap: 20px;
-}
-
-.instance-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.status-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  flex-shrink: 0;
-}
-.dot.running { background: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 170, 0.2); }
-.dot.stopped { background: var(--text-muted); }
-.dot.creating { background: var(--warn); animation: pulse 1.4s infinite; }
-.dot.error { background: var(--danger); }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-.instance-name {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.instance-meta {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.instance-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: 4px;
-}
-
-/* --- Empty state --- */
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: var(--text-muted);
-}
-
-/* --- Tabs / tables --- */
-.nav-tabs {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-.nav-tab {
-  padding: 10px 16px;
-  font-size: 14px;
-  color: var(--text-muted);
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-.nav-tab.active {
-  color: var(--text);
-  border-color: var(--accent);
-}
-
-table.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-table.data-table th, table.data-table td {
-  text-align: left;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-}
 table.data-table th {
   color: var(--text-muted);
   font-weight: 500;
@@ -281,43 +6,4 @@ table.data-table th {
   letter-spacing: 0.04em;
 }
 
-/* --- Console --- */
-.console-frame {
-  background: #000;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-}
-
-/* --- Inline stat bars (используются в InstanceCard) --- */
-.metric {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.metric-bar {
-  width: 50px;
-  height: 8px;
-  background: #333;
-  border-radius: 4px;
-  overflow: hidden;
-}
-.metric-bar > span {
-  display: block;
-  height: 100%;
-  border-radius: 4px;
-  transition: width 0.5s;
-}
-.metric-bar > span.good { background: #4caf50; }
-.metric-bar > span.warn { background: #ff9800; }
-.metric-bar > span.bad  { background: #f44336; }
-
-/* --- Badges --- */
-.badge {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 100px;
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-}
+/* --- Inline stat bars (используются в InstanceCard) --- */
\ No newline at end of file