diff --git a/frontend/pet.html b/frontend/pet.html
index bb288b4..36fda75 100644
--- a/frontend/pet.html
+++ b/frontend/pet.html
@@ -325,12 +325,12 @@
     .wr-modal { width:800px; max-width:96vw; max-height:90vh; overflow:auto;
                 background:linear-gradient(180deg,rgba(155,93,229,.07),transparent 240px),var(--surface);
                 border:1.5px solid rgba(155,93,229,.22); border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.55); padding:20px 24px 26px; }
-    .wr-modal-head { display:flex; align-items:center; gap:11px; margin-bottom:18px; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.07); }
+    .wr-modal-head { display:flex; align-items:center; gap:11px; margin-bottom:18px; padding-bottom:15px; border-bottom:1px solid var(--border); }
     .wr-modal-titles { flex:1; min-width:0; }
-    .wr-modal-close { width:32px; height:32px; border:none; background:rgba(255,255,255,.06); border-radius:9px; color:var(--text-2);
+    .wr-modal-close { width:32px; height:32px; border:none; background:rgba(15,23,42,.05); border-radius:9px; color:var(--text-2);
                       cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
     .wr-modal-close svg { width:17px; height:17px; }
-    .wr-modal-close:hover { background:rgba(255,255,255,.12); color:var(--text); }
+    .wr-modal-close:hover { background:rgba(15,23,42,.1); color:var(--text); }
     .wr-coins { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:99px; flex-shrink:0;
                 background:linear-gradient(135deg,#FCD667,#F2B01E); border:none; color:#4a3206; font:800 .82rem 'Manrope',sans-serif;
                 box-shadow:0 2px 9px rgba(242,176,30,.4); }
@@ -350,7 +350,7 @@
     #wr-preview-svg svg { width:100%; height:auto; display:block; filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
     @keyframes wrFloat { 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }
     .wr-prev-name { font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.05rem;
-                    background:linear-gradient(90deg,#c9a6ff,#7fe9f0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
+                    background:linear-gradient(90deg,#9B5DE5,#0CA5C0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
     .wr-prev-evo { font-size:.68rem; font-weight:700; color:var(--text-2); background:rgba(155,93,229,.14);
                    border:1px solid rgba(155,93,229,.25); padding:3px 12px; border-radius:99px; }
     @media (max-width:640px) {
@@ -368,11 +368,11 @@
     .pc-head-ico svg { width:17px; height:17px; }
     .pc-head-title { font-family:'Unbounded',sans-serif; font-size:.92rem; font-weight:800; line-height:1.1; }
     .pc-head-sub { font-size:.68rem; color:var(--text-3); margin-top:2px; }
-    .pc-tabs { display:flex; gap:4px; padding:4px; background:rgba(0,0,0,.2); border-radius:13px; margin-bottom:16px; }
+    .pc-tabs { display:flex; gap:4px; padding:4px; background:rgba(15,23,42,.06); border-radius:13px; margin-bottom:16px; }
     .pc-tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 6px; border:none;
               border-radius:9px; background:transparent; color:var(--text-2); font:700 .76rem 'Manrope',sans-serif; cursor:pointer; transition:all .18s; }
     .pc-tab svg { width:14px; height:14px; }
-    .pc-tab:hover { color:var(--text); background:rgba(255,255,255,.05); }
+    .pc-tab:hover { color:var(--text); background:rgba(15,23,42,.05); }
     .pc-tab.active { background:linear-gradient(135deg,#9B5DE5,#7b4fd0); color:#fff; box-shadow:0 5px 16px rgba(155,93,229,.45); }
     .pc-hint { font-size:.72rem; color:var(--text-3); margin-bottom:13px; line-height:1.5; }
     .pc-panel { animation:pcFade .25s ease; }
@@ -383,27 +383,27 @@
     /* Гардероб по зонам */
     #pet-accessories { display:block; }
     .wr-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
-              padding-bottom:12px; margin-bottom:13px; border-bottom:1px solid rgba(255,255,255,.08); }
+              padding-bottom:12px; margin-bottom:13px; border-bottom:1px solid var(--border); }
     .wr-count { font-size:.76rem; color:var(--text-2); font-weight:700; }
-    .wr-count b { color:#c9a6ff; }
+    .wr-count b { color:var(--violet); }
     .wr-actions { display:flex; gap:7px; flex-wrap:wrap; }
     .wr-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:99px; border:1.5px solid var(--border-h);
-              background:rgba(255,255,255,.03); color:var(--text-2); font:700 .72rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; }
+              background:rgba(15,23,42,.025); color:var(--text-2); font:700 .72rem 'Manrope',sans-serif; cursor:pointer; transition:all .15s; }
     .wr-btn svg { width:12px; height:12px; }
-    .wr-btn:hover { border-color:var(--violet); color:var(--text); }
+    .wr-btn:hover { border-color:var(--violet); color:var(--violet); }
     .wr-zone { display:flex; align-items:center; gap:13px; padding:10px 14px; margin-bottom:8px;
-               background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:13px; }
+               background:rgba(15,23,42,.03); border:1px solid var(--border); border-radius:13px; }
     .wr-zone:last-child { margin-bottom:0; }
     .wr-zone-lbl { width:56px; flex-shrink:0; font-size:.58rem; font-weight:800; color:var(--text-3);
                    text-transform:uppercase; letter-spacing:.07em; }
     .wr-chips { display:flex; flex-wrap:wrap; gap:7px; flex:1; }
     .wr-tile { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:12px; border:1.5px solid var(--border-h);
-               background:rgba(255,255,255,.04); color:var(--text-2); font:600 .77rem 'Manrope',sans-serif; cursor:pointer; transition:all .16s; }
+               background:var(--surface); color:var(--text-2); font:600 .77rem 'Manrope',sans-serif; cursor:pointer; transition:all .16s; }
     .wr-tile svg { width:12px; height:12px; flex-shrink:0; }
-    .wr-tile:hover:not(.locked) { border-color:var(--violet); color:var(--text); transform:translateY(-1px); box-shadow:0 4px 14px rgba(155,93,229,.2); }
-    .wr-tile.on { border-color:var(--violet); background:linear-gradient(135deg,rgba(155,93,229,.38),rgba(155,93,229,.16)); color:#fff; box-shadow:0 3px 12px rgba(155,93,229,.28); }
+    .wr-tile:hover:not(.locked) { border-color:var(--violet); color:var(--violet); transform:translateY(-1px); box-shadow:0 4px 14px rgba(155,93,229,.2); }
+    .wr-tile.on { border-color:#9B5DE5; background:linear-gradient(135deg,#9B5DE5,#7b4fd0); color:#fff; box-shadow:0 3px 12px rgba(155,93,229,.35); }
     .wr-tile.on svg { color:#fff; }
-    .wr-tile.locked { opacity:.45; cursor:not-allowed; }
+    .wr-tile.locked { opacity:.5; cursor:not-allowed; }
     .wr-tile .wr-hint { font-size:.62rem; color:var(--text-3); }
 
     /* Цвет */
@@ -414,7 +414,7 @@
     /* Узор — превью-плитки */
     .pc-pattern-grid { display:flex; flex-wrap:wrap; gap:10px; }
     .pc-swatch { display:flex; flex-direction:column; align-items:center; gap:8px; width:84px; padding:10px 6px; border-radius:15px;
-                 border:1.5px solid var(--border-h); background:rgba(255,255,255,.04); color:var(--text-2); cursor:pointer; transition:all .16s; }
+                 border:1.5px solid var(--border-h); background:var(--surface); color:var(--text-2); cursor:pointer; transition:all .16s; }
     .pc-swatch:hover { border-color:var(--violet); transform:translateY(-2px); box-shadow:0 6px 18px rgba(155,93,229,.2); }
     .pc-swatch.active { border-color:var(--violet); background:rgba(155,93,229,.18); box-shadow:0 4px 14px rgba(155,93,229,.28); }
     .pc-swatch-name { font:700 .68rem 'Manrope',sans-serif; }