From e8486ec463e8f44a00dcdc9ab392ec8d73e82d7b Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:17:46 +0330
Subject: [PATCH] Import source: src/index

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/index.css | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 src/index.css

diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..20de9fe
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@700;900&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; }
+
+/* ── Design tokens ── */
+:root {
+  --bg-page:        #0C0C0F;
+  --bg-panel:       #111114;
+  --bg-center:      #0E0E12;
+  --bg-card:        #141418;
+  --bg-input:       #0E0E14;
+  --bg-elevated:    #1A1A22;
+  --border:         #1F1F28;
+  --border-sub:     #252530;
+  --border-hover:   #3A3A4A;
+  --text-primary:   #F2F2F7;
+  --text-secondary: #A0A0B0;
+  --text-muted:     #5A5A6A;
+  --text-dim:       #4A4A5A;
+  --text-placeholder:#3A3A4A;
+  --text-item:      #C0C0CC;
+  --sel-bg:         #1A1830;
+  --sel-text:       #A89FEE;
+  --hover-bg:       #1A1A22;
+  --scrollbar:      #2A2A35;
+  --scrollbar-hover:#3A3A48;
+  --pat-filter:     invert(1) brightness(0.55);
+  --preview-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
+  --navbar-glow:    rgba(124,111,224,0.35);
+
+  /* Responsive panel widths */
+  --left-w:  220px;
+  --right-w: 260px;
+  --nav-h:   56px;
+  --tab-h:   0px;
+}
+
+[data-theme="light"] {
+  --bg-page:        #F2F2F5;
+  --bg-panel:       #FFFFFF;
+  --bg-center:      #F7F7FA;
+  --bg-card:        #FFFFFF;
+  --bg-input:       #FFFFFF;
+  --bg-elevated:    #F5F5F8;
+  --border:         #E5E5EA;
+  --border-sub:     #D1D5DB;
+  --border-hover:   #A0A0B0;
+  --text-primary:   #111827;
+  --text-secondary: #6B7280;
+  --text-muted:     #9CA3AF;
+  --text-dim:       #9CA3AF;
+  --text-placeholder:#9CA3AF;
+  --text-item:      #374151;
+  --sel-bg:         #F0EEFF;
+  --sel-text:       #6B5FD0;
+  --hover-bg:       #F0F0F6;
+  --scrollbar:      #D1D5DB;
+  --scrollbar-hover:#A0A0B0;
+  --pat-filter:     none;
+  --preview-shadow: 0 2px 16px rgba(0,0,0,0.08);
+  --navbar-glow:    rgba(124,111,224,0.2);
+}
+
+/* Tablet (768px) */
+@media (min-width: 768px) {
+  :root { --left-w: 240px; --right-w: 280px; --tab-h: 0px; }
+}
+/* Desktop (1024px) */
+@media (min-width: 1024px) {
+  :root { --left-w: 270px; --right-w: 340px; }
+}
+/* Large desktop (1280px) */
+@media (min-width: 1280px) {
+  :root { --left-w: 310px; --right-w: 430px; }
+}
+/* XL desktop (1536px) */
+@media (min-width: 1536px) {
+  :root { --left-w: 340px; --right-w: 480px; }
+}
+/* TV (1920px) */
+@media (min-width: 1920px) {
+  :root { --left-w: 400px; --right-w: 540px; --nav-h: 68px; }
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  transition: background 0.2s, color 0.2s;
+}
+
+/* Responsive base font scaling */
+@media (min-width: 1920px) { body { font-size: 18px; } }
+
+#root { width: 100%; height: 100vh; }
+
+input::placeholder, textarea::placeholder { color: var(--text-placeholder); }
+
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
+
+/* Animations */
+@keyframes qr-appear {
+  from { opacity: 0; transform: scale(0.94); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+.qr-appear  { animation: qr-appear 0.35s cubic-bezier(.22,.68,0,1.2) both; }
+.form-appear{ animation: fade-up 0.25s ease both; }