123

public/styles.css

@@ -1648,6 +1648,17 @@ html, body {
   overflow: hidden;
 }
 
+.forge-columns.forge-two-cols {
+  grid-template-columns: 1fr 1.2fr;
+}
+
+.forge-hint-inline {
+  font-size: 0.85rem;
+  color: #94a3b8;
+  margin: 0 0 0.5rem 0;
+  padding: 0 1rem;
+}
+
 .forge-column {
   display: flex;
   flex-direction: column;
@@ -1789,6 +1800,56 @@ html, body {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Forge preview (предпросмотр результата крафта) */
+.forge-preview {
+  padding: 1rem;
+  border-top: 1px solid rgba(212,168,75,0.2);
+  background: rgba(0,0,0,0.25);
+  flex-shrink: 0;
+}
+
+.forge-preview.hidden {
+  display: none !important;
+}
+
+.forge-preview-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--gold);
+}
+
+.forge-preview-card-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  margin-bottom: 0.75rem;
+}
+
+.forge-preview-loading {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.9rem;
+}
+
+.forge-preview-card {
+  flex-shrink: 0;
+}
+
+.forge-preview-card .card {
+  border-radius: 8px;
+  border: 2px solid rgba(212,168,75,0.5);
+  box-shadow: 0 0 20px rgba(212,168,75,0.3);
+}
+
+.forge-preview-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 @keyframes shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-10px); }