Update static/style.css

static/style.css

@@ -8,36 +8,36 @@
 }
 
 :root {
-  --bg: linear-gradient(135deg, #f6f4ff 0%, #f4f6fb 40%, #f8f5ef 100%);
-  --surface: rgba(255, 255, 255, 0.92);
-  --surface-strong: #ffffff;
-  --surface2: #f8f8fc;
-  --border: rgba(91, 82, 196, 0.10);
-  --border-strong: rgba(91, 82, 196, 0.22);
-  --text-primary: #17171c;
-  --text-secondary: #666779;
-  --text-muted: #9698a8;
-  --accent: #5b52c4;
-  --accent-2: #7c73ea;
-  --accent-light: #efedff;
-  --accent-soft: rgba(91, 82, 196, 0.12);
-  --accent-text: #3f3796;
-  --danger: #e24b4a;
-  --danger-light: #fef0f0;
-  --danger-text: #a32d2d;
-  --success: #1ea672;
-  --success-light: #e5f8f0;
-  --success-text: #0b6c4f;
-  --amber: #c8841e;
-  --amber-light: #fff3de;
-  --amber-text: #714200;
+  --bg: linear-gradient(135deg, #050505 0%, #0c0c0f 45%, #111117 100%);
+  --surface: rgba(20, 20, 24, 0.92);
+  --surface-strong: #18181d;
+  --surface2: #101015;
+  --border: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.14);
+  --text-primary: #f5f5f7;
+  --text-secondary: #b3b3bd;
+  --text-muted: #8a8a96;
+  --accent: #7c6cff;
+  --accent-2: #9b8cff;
+  --accent-light: rgba(124, 108, 255, 0.14);
+  --accent-soft: rgba(124, 108, 255, 0.08);
+  --accent-text: #d7d1ff;
+  --danger: #ff5c5c;
+  --danger-light: rgba(255, 92, 92, 0.14);
+  --danger-text: #ffd2d2;
+  --success: #26c281;
+  --success-light: rgba(38, 194, 129, 0.14);
+  --success-text: #c9f5e2;
+  --amber: #f2b94b;
+  --amber-light: rgba(242, 185, 75, 0.14);
+  --amber-text: #ffe9bb;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 18px;
   --radius-xl: 26px;
-  --shadow-sm: 0 6px 18px rgba(31, 35, 70, 0.06);
-  --shadow: 0 14px 40px rgba(31, 35, 70, 0.08);
-  --shadow-lg: 0 24px 70px rgba(31, 35, 70, 0.14);
+  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.28);
+  --shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
+  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.45);
   --max-width: 760px;
 }
 
@@ -63,25 +63,24 @@ body::before,
 body::after {
   content: "";
   position: fixed;
-  inset: auto;
   width: 280px;
   height: 280px;
   border-radius: 50%;
-  filter: blur(80px);
+  filter: blur(90px);
   pointer-events: none;
   z-index: -1;
 }
 
 body::before {
-  top: -60px;
-  left: -80px;
-  background: rgba(124, 115, 234, 0.18);
+  top: -70px;
+  left: -90px;
+  background: rgba(124, 108, 255, 0.14);
 }
 
 body::after {
-  right: -80px;
-  bottom: -80px;
-  background: rgba(91, 82, 196, 0.14);
+  right: -70px;
+  bottom: -70px;
+  background: rgba(64, 64, 255, 0.09);
 }
 
 /* ── Header ─────────────────────────────────────────────── */
@@ -93,7 +92,7 @@ header {
 
 #three-header {
   margin-bottom: 0.4rem !important;
-  filter: drop-shadow(0 14px 28px rgba(91, 82, 196, 0.18));
+  filter: drop-shadow(0 16px 34px rgba(124, 108, 255, 0.18));
 }
 
 .logo-wrap {
@@ -102,9 +101,9 @@ header {
   justify-content: center;
   width: 62px;
   height: 62px;
-  background: linear-gradient(135deg, #f2f0ff 0%, #ebe8ff 100%);
+  background: linear-gradient(135deg, #181824 0%, #202033 100%);
   border-radius: var(--radius-lg);
-  border: 1px solid rgba(91, 82, 196, 0.15);
+  border: 1px solid rgba(124, 108, 255, 0.18);
   margin-bottom: 1rem;
   box-shadow: var(--shadow-sm);
 }
@@ -139,8 +138,8 @@ main {
 
 .card {
   background: var(--surface);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
   border-radius: var(--radius-xl);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-lg);
@@ -154,19 +153,19 @@ main {
   position: absolute;
   inset: 0 0 auto 0;
   height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(124, 115, 234, 0.35), transparent);
+  background: linear-gradient(90deg, transparent, rgba(124, 108, 255, 0.5), transparent);
 }
 
 /* ── Drop zone ───────────────────────────────────────────── */
 #drop-zone {
-  border: 2px dashed rgba(91, 82, 196, 0.24);
+  border: 2px dashed rgba(124, 108, 255, 0.24);
   border-radius: calc(var(--radius-lg) + 2px);
   padding: 3.2rem 2rem;
   text-align: center;
   cursor: pointer;
   transition: 0.25s ease;
   background:
-    radial-gradient(circle at top, rgba(124, 115, 234, 0.08), transparent 45%),
+    radial-gradient(circle at top, rgba(124, 108, 255, 0.09), transparent 45%),
     var(--surface2);
   position: relative;
   overflow: hidden;
@@ -176,7 +175,7 @@ main {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, rgba(124, 115, 234, 0.04), rgba(255, 255, 255, 0));
+  background: linear-gradient(135deg, rgba(124, 108, 255, 0.05), rgba(255, 255, 255, 0));
   pointer-events: none;
 }
 
@@ -184,10 +183,10 @@ main {
 #drop-zone.drag-over {
   border-color: var(--accent);
   background:
-    radial-gradient(circle at top, rgba(124, 115, 234, 0.14), transparent 45%),
-    #f4f2ff;
+    radial-gradient(circle at top, rgba(124, 108, 255, 0.15), transparent 45%),
+    #12121a;
   transform: translateY(-2px);
-  box-shadow: 0 12px 32px rgba(91, 82, 196, 0.10);
+  box-shadow: 0 16px 36px rgba(124, 108, 255, 0.12);
 }
 
 #drop-zone input[type="file"] {
@@ -203,13 +202,13 @@ main {
   width: 56px;
   height: 56px;
   margin: 0 auto 1rem;
-  background: linear-gradient(135deg, #f0efff 0%, #e6e3ff 100%);
+  background: linear-gradient(135deg, #171722 0%, #232338 100%);
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgba(91, 82, 196, 0.16);
-  box-shadow: 0 10px 24px rgba(91, 82, 196, 0.10);
+  border: 1px solid rgba(124, 108, 255, 0.16);
+  box-shadow: 0 10px 24px rgba(124, 108, 255, 0.08);
 }
 
 .drop-icon svg {
@@ -241,8 +240,8 @@ main {
   padding: 6px 12px;
   border-radius: 999px;
   margin-top: 0.95rem;
-  border: 1px solid rgba(200, 132, 30, 0.18);
-  box-shadow: 0 6px 16px rgba(200, 132, 30, 0.08);
+  border: 1px solid rgba(242, 185, 75, 0.18);
+  box-shadow: 0 6px 16px rgba(242, 185, 75, 0.08);
 }
 
 /* ── Counter bar ─────────────────────────────────────────── */
@@ -253,9 +252,9 @@ main {
   gap: 12px;
   margin-top: 1.25rem;
   padding: 0.8rem 1rem;
-  background: rgba(248, 248, 252, 0.92);
+  background: rgba(255, 255, 255, 0.03);
   border-radius: var(--radius-md);
-  border: 1px solid rgba(91, 82, 196, 0.10);
+  border: 1px solid rgba(255, 255, 255, 0.06);
   font-size: 13px;
   color: var(--text-secondary);
   box-shadow: var(--shadow-sm);
@@ -277,17 +276,17 @@ main {
   background: var(--success);
   display: inline-block;
   margin-right: 6px;
-  box-shadow: 0 0 0 4px rgba(30, 166, 114, 0.12);
+  box-shadow: 0 0 0 4px rgba(38, 194, 129, 0.12);
 }
 
 .count-dot.warn {
   background: var(--amber);
-  box-shadow: 0 0 0 4px rgba(200, 132, 30, 0.12);
+  box-shadow: 0 0 0 4px rgba(242, 185, 75, 0.12);
 }
 
 .count-dot.danger {
   background: var(--danger);
-  box-shadow: 0 0 0 4px rgba(226, 75, 74, 0.12);
+  box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.12);
 }
 
 /* ── Image preview grid ──────────────────────────────────── */
@@ -303,16 +302,16 @@ main {
   aspect-ratio: 1;
   border-radius: 18px;
   overflow: hidden;
-  border: 1px solid rgba(91, 82, 196, 0.10);
-  background: linear-gradient(180deg, #fbfbff 0%, #f4f4fa 100%);
-  box-shadow: 0 12px 28px rgba(31, 35, 70, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: linear-gradient(180deg, #14141a 0%, #0f0f14 100%);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 }
 
 .preview-item:hover {
   transform: translateY(-4px);
-  box-shadow: 0 18px 36px rgba(31, 35, 70, 0.12);
-  border-color: rgba(91, 82, 196, 0.22);
+  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.34);
+  border-color: rgba(124, 108, 255, 0.20);
 }
 
 .preview-item img {
@@ -327,7 +326,7 @@ main {
   position: absolute;
   inset: auto 0 0 0;
   height: 40%;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.32), transparent);
   pointer-events: none;
 }
 
@@ -338,9 +337,9 @@ main {
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: rgba(19, 19, 25, 0.72);
+  background: rgba(12, 12, 16, 0.82);
   backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.10);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -355,7 +354,7 @@ main {
 }
 
 .preview-item .remove-btn:hover {
-  background: rgba(226, 75, 74, 0.92);
+  background: rgba(255, 92, 92, 0.92);
   transform: scale(1.05);
 }
 
@@ -369,7 +368,7 @@ main {
   position: absolute;
   bottom: 8px;
   left: 8px;
-  background: rgba(19, 19, 25, 0.66);
+  background: rgba(12, 12, 16, 0.72);
   backdrop-filter: blur(8px);
   color: #fff;
   font-size: 11px;
@@ -400,7 +399,7 @@ button {
 
 button:focus-visible,
 #drop-zone:focus-within {
-  box-shadow: 0 0 0 4px rgba(91, 82, 196, 0.14);
+  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.16);
 }
 
 button:active {
@@ -416,12 +415,12 @@ button:active {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  box-shadow: 0 14px 26px rgba(91, 82, 196, 0.22);
+  box-shadow: 0 14px 26px rgba(124, 108, 255, 0.20);
 }
 
 .btn-primary:hover {
   transform: translateY(-1px);
-  box-shadow: 0 18px 34px rgba(91, 82, 196, 0.28);
+  box-shadow: 0 18px 34px rgba(124, 108, 255, 0.25);
 }
 
 .btn-primary:disabled {
@@ -432,16 +431,16 @@ button:active {
 }
 
 .btn-ghost {
-  background: rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.03);
   color: var(--text-secondary);
-  border-color: rgba(91, 82, 196, 0.12);
+  border-color: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(8px);
 }
 
 .btn-ghost:hover {
-  background: #fff;
+  background: rgba(255, 255, 255, 0.06);
   color: var(--text-primary);
-  border-color: rgba(91, 82, 196, 0.20);
+  border-color: rgba(124, 108, 255, 0.18);
 }
 
 /* ── Toast ───────────────────────────────────────────────── */
@@ -450,7 +449,7 @@ button:active {
   bottom: 1.6rem;
   left: 50%;
   transform: translateX(-50%) translateY(16px);
-  background: rgba(23, 23, 28, 0.92);
+  background: rgba(17, 17, 22, 0.92);
   backdrop-filter: blur(14px);
   color: #fff;
   font-size: 13px;
@@ -462,7 +461,8 @@ button:active {
   transition: opacity 0.25s ease, transform 0.25s ease;
   white-space: nowrap;
   z-index: 200;
-  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30);
+  border: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 #toast.show {
@@ -475,7 +475,7 @@ button:active {
   display: none;
   position: fixed;
   inset: 0;
-  background: rgba(10, 11, 20, 0.52);
+  background: rgba(3, 3, 6, 0.72);
   backdrop-filter: blur(8px);
   z-index: 100;
   align-items: center;
@@ -488,11 +488,11 @@ button:active {
 }
 
 #premium-dialog {
-  background: rgba(255, 255, 255, 0.96);
+  background: rgba(20, 20, 25, 0.96);
   backdrop-filter: blur(16px);
   border-radius: 28px;
-  border: 1px solid rgba(91, 82, 196, 0.12);
-  box-shadow: 0 30px 70px rgba(17, 20, 38, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.48);
   padding: 2rem;
   max-width: 430px;
   width: 100%;
@@ -515,13 +515,13 @@ button:active {
   width: 68px;
   height: 68px;
   border-radius: 20px;
-  background: linear-gradient(135deg, #fff5df 0%, #ffe7b8 100%);
+  background: linear-gradient(135deg, #2d2410 0%, #3f3114 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.25rem;
-  border: 1px solid rgba(200, 132, 30, 0.18);
-  box-shadow: 0 12px 24px rgba(200, 132, 30, 0.12);
+  border: 1px solid rgba(242, 185, 75, 0.18);
+  box-shadow: 0 12px 24px rgba(242, 185, 75, 0.08);
 }
 
 .dialog-icon svg {
@@ -534,6 +534,7 @@ button:active {
   font-weight: 800;
   margin-bottom: 0.5rem;
   letter-spacing: -0.02em;
+  color: var(--text-primary);
 }
 
 #premium-dialog p {
@@ -547,8 +548,8 @@ button:active {
   list-style: none;
   text-align: left;
   margin-bottom: 1.7rem;
-  background: #fafaff;
-  border: 1px solid rgba(91, 82, 196, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 18px;
   padding: 0.85rem 1rem;
 }
@@ -563,7 +564,7 @@ button:active {
 }
 
 .perks li + li {
-  border-top: 1px dashed rgba(91, 82, 196, 0.10);
+  border-top: 1px dashed rgba(255, 255, 255, 0.08);
 }
 
 .perk-check {
@@ -590,24 +591,24 @@ button:active {
 }
 
 .btn-upgrade {
-  background: linear-gradient(135deg, #5b52c4 0%, #857cf0 100%);
+  background: linear-gradient(135deg, #7c6cff 0%, #9b8cff 100%);
   color: #fff;
   border: none;
   padding: 13px;
   font-size: 15px;
   border-radius: 14px;
   width: 100%;
-  box-shadow: 0 14px 26px rgba(91, 82, 196, 0.22);
+  box-shadow: 0 14px 26px rgba(124, 108, 255, 0.18);
 }
 
 .btn-upgrade:hover {
   transform: translateY(-1px);
-  opacity: 0.96;
+  opacity: 0.97;
 }
 
 .btn-close-dialog {
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(91, 82, 196, 0.14);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-secondary);
   padding: 11px;
   width: 100%;
@@ -615,7 +616,7 @@ button:active {
 }
 
 .btn-close-dialog:hover {
-  background: #fff;
+  background: rgba(255, 255, 255, 0.06);
   color: var(--text-primary);
 }
 
@@ -623,7 +624,7 @@ button:active {
 #loading-bar {
   display: none;
   height: 4px;
-  background: rgba(255, 255, 255, 0.26);
+  background: rgba(255, 255, 255, 0.18);
   border-radius: 999px;
   overflow: hidden;
   width: 120px;
@@ -658,12 +659,12 @@ button:active {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(91, 82, 196, 0.20);
+  background: rgba(124, 108, 255, 0.22);
   border-radius: 999px;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(91, 82, 196, 0.05);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 /* ── Responsive ──────────────────────────────────────────── */