Updatezz

static/css/styles.css

@@ -235,7 +235,7 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .config-layout {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 320px;
+    grid-template-columns: minmax(0, 1fr) 340px;
     gap: 12px;
     align-items: start;
 }
@@ -330,7 +330,17 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .preview-card.dragging {
-    opacity: 0.5;
+    opacity: 0.6;
+}
+
+.preview-card.wiggle {
+    animation: wiggle 250ms linear infinite;
+}
+
+@keyframes wiggle {
+    0% { transform: rotate(-2deg); }
+    50% { transform: rotate(2deg); }
+    100% { transform: rotate(-2deg); }
 }
 
 .preview-card-remove {
@@ -390,10 +400,78 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .card-editor-row {
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr auto auto;
     gap: 6px;
 }
 
+.deck-tools-row {
+    display: flex;
+    gap: 6px;
+}
+
+.icon-btn {
+    min-width: 36px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.preset-picker {
+    margin-top: 4px;
+}
+
+.preset-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 150px;
+    overflow-y: auto;
+    margin-bottom: 8px;
+}
+
+.preset-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 6px;
+    border: 1px dashed var(--border-mid-dark);
+}
+
+.preset-meta {
+    font-size: 1rem;
+    opacity: 0.8;
+}
+
+.preset-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.preset-actions .btn {
+    font-size: 1rem;
+    padding: 2px 8px;
+    margin-left: 0;
+}
+
+.import-btn {
+    margin-left: 0;
+}
+
+.import-pane {
+    margin-top: 8px;
+}
+
+.import-pane textarea {
+    width: 100%;
+    resize: vertical;
+    background: var(--input-bg);
+    color: var(--window-text);
+    border: 2px solid;
+    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
+    padding: 6px;
+    font-size: 1rem;
+}
+
 /* Room page */
 .room-desktop {
     align-items: stretch;
@@ -406,22 +484,12 @@ input[type="number"]::-webkit-inner-spin-button {
     display: grid;
     gap: 12px;
     grid-template-columns: 2fr 1fr;
-    grid-template-rows: auto auto;
-    grid-template-areas:
-        "main participants"
-        "controls participants";
+    align-items: stretch;
 }
 
-.room-main-window {
-    grid-area: main;
-}
-
-.participants-window {
-    grid-area: participants;
-}
-
-.control-window {
-    grid-area: controls;
+.room-main-window,
+.side-panel-window {
+    min-height: 640px;
 }
 
 .room-meta {
@@ -435,7 +503,7 @@ input[type="number"]::-webkit-inner-spin-button {
     background: var(--board-bg);
     border: 2px solid;
     border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    min-height: 260px;
+    min-height: 230px;
     padding: 12px;
     display: flex;
     flex-wrap: wrap;
@@ -453,6 +521,7 @@ input[type="number"]::-webkit-inner-spin-button {
     font-size: 2rem;
     box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
     cursor: pointer;
+    transition: transform 120ms ease;
 }
 
 .vote-card:hover {
@@ -460,11 +529,59 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .vote-card.is-selected {
-    outline: 3px solid #ffd200;
+    outline: 2px dotted currentColor;
+    outline-offset: -6px;
 }
 
-.participants-content {
-    max-height: 520px;
+.vote-card.impact {
+    animation: vote-impact 170ms ease;
+}
+
+@keyframes vote-impact {
+    0% { transform: scale(1); }
+    40% { transform: scale(0.91); }
+    100% { transform: scale(1); }
+}
+
+.vote-summary-window {
+    margin-top: 12px;
+}
+
+.vote-summary-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.summary-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--input-bg);
+}
+
+.summary-table th,
+.summary-table td {
+    border: 1px solid var(--border-mid-dark);
+    padding: 6px 8px;
+    text-align: left;
+}
+
+.summary-metrics {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.1rem;
+}
+
+.side-panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: calc(100% - 4px);
+}
+
+.participants-scroll {
+    flex: 1;
+    min-height: 250px;
     overflow-y: auto;
 }
 
@@ -488,10 +605,11 @@ input[type="number"]::-webkit-inner-spin-button {
     border-bottom: 0;
 }
 
-.control-content {
+.side-controls {
+    margin-top: auto;
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 8px;
 }
 
 .links-block {
@@ -521,17 +639,58 @@ input[type="number"]::-webkit-inner-spin-button {
     margin-top: 8px;
 }
 
+.skeleton-line,
+.skeleton-board,
+.skeleton-table,
+.skeleton-list,
+.skeleton-controls {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
+    background-size: 220% 100%;
+    animation: skeleton-shimmer 1.2s ease infinite;
+    border: 1px solid var(--border-mid-dark);
+}
+
+.skeleton-line {
+    height: 18px;
+    margin-bottom: 10px;
+}
+
+.skeleton-line.short {
+    width: 40%;
+    margin-top: 12px;
+}
+
+.skeleton-board {
+    height: 250px;
+}
+
+.skeleton-table {
+    height: 140px;
+}
+
+.skeleton-list {
+    height: 350px;
+    margin-bottom: 10px;
+}
+
+.skeleton-controls {
+    height: 180px;
+}
+
+@keyframes skeleton-shimmer {
+    from { background-position: 0 0; }
+    to { background-position: -200% 0; }
+}
+
 @media (max-width: 960px) {
     .config-layout,
     .room-grid {
         grid-template-columns: 1fr;
     }
 
-    .room-grid {
-        grid-template-areas:
-            "main"
-            "participants"
-            "controls";
+    .room-main-window,
+    .side-panel-window {
+        min-height: unset;
     }
 }
 
@@ -551,6 +710,11 @@ input[type="number"]::-webkit-inner-spin-button {
         gap: 8px;
     }
 
+    .summary-metrics {
+        flex-direction: column;
+        gap: 4px;
+    }
+
     .btn {
         margin-left: 0;
     }