ltcai 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -892,6 +892,13 @@
892
892
  border-radius: 18px;
893
893
  background: var(--ref-card);
894
894
  box-shadow: var(--ref-shadow);
895
+ transition: transform 200ms var(--lt-motion-ease, ease), box-shadow 200ms var(--lt-motion-ease, ease);
896
+ }
897
+
898
+ .reference-dash-card:hover,
899
+ .reference-lists article:hover {
900
+ transform: translateY(-3px);
901
+ box-shadow: 0 24px 64px rgba(88,72,150,0.18);
895
902
  }
896
903
 
897
904
  .reference-dash-card {
@@ -1372,6 +1379,12 @@
1372
1379
  flex-direction: column;
1373
1380
  justify-content: center;
1374
1381
  overflow: hidden;
1382
+ transition: transform 200ms ease, box-shadow 200ms ease;
1383
+ }
1384
+
1385
+ .lattice-ref-admin .summary-card:hover {
1386
+ transform: translateY(-2px);
1387
+ box-shadow: 0 14px 40px rgba(88,72,150,0.14) !important;
1375
1388
  }
1376
1389
 
1377
1390
  .lattice-ref-admin .summary-card::before {
@@ -1561,16 +1574,17 @@
1561
1574
 
1562
1575
  /* ============================================================
1563
1576
  ACCOUNT / AUTH PAGE (account.html)
1577
+ Light lavender theme — unified with chat/graph/admin pages.
1564
1578
  ============================================================ */
1565
1579
 
1566
1580
  body.lattice-ref-auth {
1567
- --bg: #282a36;
1568
- --text: #f7f7f2;
1569
- --faint: #8d93ab;
1570
- --muted: #c4c8d8;
1571
- --accent: #a77cff;
1572
- --accent-2: #20b8aa;
1573
- --shadow: 0 24px 70px rgba(5,7,12,0.46);
1581
+ --bg: #f7f3ff;
1582
+ --text: #1f2140;
1583
+ --faint: #8a86a8;
1584
+ --muted: #66627f;
1585
+ --accent: #6f4bf6;
1586
+ --accent-2: #7b6dff;
1587
+ --shadow: 0 26px 80px rgba(86, 70, 160, 0.22);
1574
1588
  }
1575
1589
 
1576
1590
  * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -1579,9 +1593,9 @@
1579
1593
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
1580
1594
  color: var(--text);
1581
1595
  background:
1582
- radial-gradient(circle at 50% 35%, rgba(167,124,255,0.16), transparent 34%),
1583
- radial-gradient(circle at 80% 75%, rgba(32,184,170,0.10), transparent 28%),
1584
- linear-gradient(135deg, #292b38 0%, #242632 52%, #2f3040 100%);
1596
+ radial-gradient(circle at 74% 22%, rgba(111,75,246,0.16), transparent 28%),
1597
+ radial-gradient(circle at 16% 18%, rgba(196,181,253,0.32), transparent 26%),
1598
+ linear-gradient(135deg, #fbf9ff 0%, #f4efff 48%, #ffffff 100%);
1585
1599
  display: flex;
1586
1600
  align-items: center;
1587
1601
  justify-content: center;
@@ -1596,12 +1610,12 @@
1596
1610
  position: fixed;
1597
1611
  inset: 0;
1598
1612
  background:
1599
- radial-gradient(circle, rgba(247,247,242,0.66) 1px, transparent 1.8px),
1600
- linear-gradient(rgba(157,177,255,0.12) 1px, transparent 1px),
1601
- linear-gradient(90deg, rgba(157,177,255,0.08) 1px, transparent 1px);
1613
+ radial-gradient(circle, rgba(123,109,255,0.28) 1px, transparent 1.8px),
1614
+ linear-gradient(rgba(123,109,255,0.08) 1px, transparent 1px),
1615
+ linear-gradient(90deg, rgba(123,109,255,0.06) 1px, transparent 1px);
1602
1616
  background-size: 82px 82px, 46px 46px, 46px 46px;
1603
1617
  background-position: 16px 18px, 0 0, 0 0;
1604
- mask-image: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.06));
1618
+ mask-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
1605
1619
  pointer-events: none;
1606
1620
  }
1607
1621
 
@@ -1610,24 +1624,83 @@
1610
1624
  position: fixed;
1611
1625
  inset: 0;
1612
1626
  background:
1613
- linear-gradient(116deg, transparent 0 44%, rgba(125,183,255,0.08) 44.1%, transparent 44.3% 100%),
1614
- linear-gradient(28deg, transparent 0 62%, rgba(167,124,255,0.08) 62.1%, transparent 62.3% 100%);
1627
+ radial-gradient(ellipse at 8% 78%, rgba(142,111,255,0.24), transparent 34%),
1628
+ linear-gradient(115deg, transparent 0 35%, rgba(111,75,246,0.09) 35.2%, transparent 35.6% 100%);
1615
1629
  pointer-events: none;
1616
1630
  }
1617
1631
 
1618
1632
  .orb {
1619
1633
  display: none;
1620
1634
  }
1621
- .orb-1 { width: 440px; height: 440px; top: -170px; left: -120px; background: rgba(34,211,160,0.13); }
1622
- .orb-2 { width: 380px; height: 380px; bottom: -130px; right: -90px; background: rgba(129,140,248,0.11); }
1635
+
1636
+ .login-shell {
1637
+ width: min(920px, 100%);
1638
+ display: grid;
1639
+ grid-template-columns: minmax(280px, 400px) minmax(220px, 1fr);
1640
+ align-items: center;
1641
+ gap: 46px;
1642
+ position: relative;
1643
+ z-index: 1;
1644
+ }
1645
+
1646
+ .brand-preview {
1647
+ min-height: 360px;
1648
+ border-radius: 34px;
1649
+ background:
1650
+ radial-gradient(circle at 54% 45%, rgba(111,75,246,0.24), transparent 18%),
1651
+ linear-gradient(145deg, rgba(255,255,255,0.68), rgba(244,239,255,0.32));
1652
+ border: 1px solid rgba(111,75,246,0.12);
1653
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
1654
+ position: relative;
1655
+ overflow: hidden;
1656
+ }
1657
+ .brand-preview::before {
1658
+ content: '';
1659
+ position: absolute;
1660
+ inset: auto -12% 0 -8%;
1661
+ height: 46%;
1662
+ background: linear-gradient(135deg, rgba(111,75,246,0.24), rgba(255,255,255,0.12));
1663
+ clip-path: polygon(0 62%, 18% 42%, 36% 54%, 55% 26%, 76% 44%, 100% 20%, 100% 100%, 0 100%);
1664
+ filter: blur(1px);
1665
+ }
1666
+ .preview-node {
1667
+ position: absolute;
1668
+ width: 52px;
1669
+ height: 52px;
1670
+ border-radius: 17px;
1671
+ background: #fff;
1672
+ border: 1px solid rgba(111,75,246,0.18);
1673
+ box-shadow: 0 18px 40px rgba(111,75,246,0.16);
1674
+ }
1675
+ .preview-node::after {
1676
+ content: '';
1677
+ position: absolute;
1678
+ inset: 14px;
1679
+ border-radius: 10px;
1680
+ background: linear-gradient(135deg, #6f4bf6, #9f8cff);
1681
+ }
1682
+ .preview-node.n1 { top: 52px; left: 58px; }
1683
+ .preview-node.n2 { top: 112px; right: 64px; }
1684
+ .preview-node.n3 { left: 120px; bottom: 92px; }
1685
+ .preview-node.n4 { right: 120px; bottom: 58px; }
1686
+ .preview-line {
1687
+ position: absolute;
1688
+ height: 2px;
1689
+ width: 150px;
1690
+ background: linear-gradient(90deg, transparent, rgba(111,75,246,0.45), transparent);
1691
+ transform-origin: left center;
1692
+ }
1693
+ .preview-line.l1 { top: 108px; left: 112px; transform: rotate(18deg); }
1694
+ .preview-line.l2 { top: 186px; left: 176px; transform: rotate(112deg); }
1695
+ .preview-line.l3 { bottom: 112px; left: 172px; transform: rotate(-13deg); }
1623
1696
 
1624
1697
  .card {
1625
1698
  width: min(400px, 100%);
1626
- background: rgba(34,36,49,0.86);
1627
- border: 1px solid rgba(218,225,255,0.14);
1628
- border-radius: 10px;
1699
+ background: rgba(255,255,255,0.86);
1700
+ border: 1px solid rgba(111,75,246,0.13);
1701
+ border-radius: 14px;
1629
1702
  padding: 38px 34px;
1630
- box-shadow: var(--shadow), 0 0 0 1px rgba(167,124,255,0.06);
1703
+ box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
1631
1704
  position: relative;
1632
1705
  z-index: 1;
1633
1706
  backdrop-filter: blur(28px);
@@ -1639,17 +1712,17 @@
1639
1712
  top: 0; left: 50%;
1640
1713
  transform: translateX(-50%);
1641
1714
  width: 55%; height: 1px;
1642
- background: linear-gradient(90deg, transparent, rgba(167,124,255,0.55), rgba(32,184,170,0.5), transparent);
1715
+ background: linear-gradient(90deg, transparent, rgba(111,75,246,0.65), rgba(123,109,255,0.45), transparent);
1643
1716
  }
1644
1717
 
1645
1718
  .logo {
1646
1719
  width: 54px; height: 54px;
1647
- background: radial-gradient(circle at 34% 30%, #ffffff 0 16%, #a77cff 17% 62%, #5b6cff 100%);
1720
+ background: linear-gradient(135deg, #6f4bf6 0%, #8d7aff 100%);
1648
1721
  border-radius: 10px;
1649
1722
  display: flex; align-items: center; justify-content: center;
1650
- font-size: 26px; color: #040706;
1723
+ font-size: 26px; color: #fff;
1651
1724
  margin: 0 auto 18px;
1652
- box-shadow: 0 0 32px rgba(167,124,255,0.28), 0 8px 24px rgba(0,0,0,0.38);
1725
+ box-shadow: 0 16px 34px rgba(111,75,246,0.28);
1653
1726
  }
1654
1727
 
1655
1728
  .title {
@@ -1657,7 +1730,7 @@
1657
1730
  font-size: 23px;
1658
1731
  font-weight: 800;
1659
1732
  margin-bottom: 6px;
1660
- background: linear-gradient(135deg, #fff 40%, #cfc6ff 76%, #8be9df);
1733
+ background: linear-gradient(135deg, #1f2140 35%, #6f4bf6 82%);
1661
1734
  -webkit-background-clip: text;
1662
1735
  -webkit-text-fill-color: transparent;
1663
1736
  background-clip: text;
@@ -1675,8 +1748,8 @@
1675
1748
  width: 100%;
1676
1749
  padding: 12px 14px;
1677
1750
  margin-bottom: 10px;
1678
- background: rgba(20,22,31,0.74);
1679
- border: 1px solid rgba(218,225,255,0.14);
1751
+ background: #fbfaff;
1752
+ border: 1px solid rgba(111,75,246,0.16);
1680
1753
  color: var(--text);
1681
1754
  border-radius: 8px;
1682
1755
  outline: none;
@@ -1685,29 +1758,29 @@
1685
1758
  transition: border-color .15s, box-shadow .15s;
1686
1759
  }
1687
1760
  .input:focus {
1688
- border-color: rgba(167,124,255,0.5);
1689
- box-shadow: 0 0 0 3px rgba(167,124,255,0.09);
1761
+ border-color: rgba(111,75,246,0.52);
1762
+ box-shadow: 0 0 0 4px rgba(111,75,246,0.10);
1690
1763
  }
1691
1764
  .input::placeholder { color: var(--faint); }
1692
1765
 
1693
1766
  .submit {
1694
1767
  width: 100%;
1695
1768
  padding: 13px;
1696
- background: linear-gradient(135deg, #f7f7f2, #cfc6ff);
1697
- color: #242632;
1769
+ background: linear-gradient(135deg, #6f4bf6, #7b6dff);
1770
+ color: #fff;
1698
1771
  border: none;
1699
1772
  border-radius: 8px;
1700
1773
  cursor: pointer;
1701
1774
  font-weight: 800;
1702
1775
  font-size: 14px;
1703
1776
  font-family: inherit;
1704
- box-shadow: 0 0 22px rgba(167,124,255,0.18), 0 4px 12px rgba(0,0,0,0.3);
1777
+ box-shadow: 0 14px 30px rgba(111,75,246,0.24);
1705
1778
  transition: all .18s;
1706
1779
  margin-top: 4px;
1707
1780
  }
1708
1781
  .submit:hover {
1709
- background: linear-gradient(135deg, #ffffff, #d9d1ff);
1710
- box-shadow: 0 0 30px rgba(167,124,255,0.26), 0 4px 14px rgba(0,0,0,0.3);
1782
+ background: linear-gradient(135deg, #5f3ee6, #705fff);
1783
+ box-shadow: 0 18px 38px rgba(111,75,246,0.30);
1711
1784
  transform: translateY(-1px);
1712
1785
  }
1713
1786
  .submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
@@ -1718,7 +1791,7 @@
1718
1791
  font-size: 12.5px;
1719
1792
  color: var(--faint);
1720
1793
  }
1721
- .switch a { color: #cfc6ff; text-decoration: none; font-weight: 700; }
1794
+ .switch a { color: #6f4bf6; text-decoration: none; font-weight: 700; }
1722
1795
  .switch a:hover { text-decoration: underline; }
1723
1796
 
1724
1797
  .sso-divider {
@@ -1728,13 +1801,13 @@
1728
1801
  }
1729
1802
  .sso-divider::before, .sso-divider::after {
1730
1803
  content: ''; flex: 1;
1731
- height: 1px; background: rgba(255,255,255,0.07);
1804
+ height: 1px; background: rgba(111,75,246,0.12);
1732
1805
  }
1733
1806
  .sso-btn {
1734
1807
  width: 100%;
1735
1808
  padding: 12px;
1736
- background: rgba(247,247,242,0.045);
1737
- border: 1px solid rgba(218,225,255,0.13);
1809
+ background: #fff;
1810
+ border: 1px solid rgba(111,75,246,0.15);
1738
1811
  color: var(--text);
1739
1812
  border-radius: 8px;
1740
1813
  cursor: pointer;
@@ -1745,8 +1818,8 @@
1745
1818
  transition: all .18s;
1746
1819
  }
1747
1820
  .sso-btn:hover {
1748
- background: rgba(167,124,255,0.10);
1749
- border-color: rgba(167,124,255,0.3);
1821
+ background: #f6f2ff;
1822
+ border-color: rgba(111,75,246,0.34);
1750
1823
  }
1751
1824
 
1752
1825
  .msg {
@@ -1754,9 +1827,9 @@
1754
1827
  min-height: 18px;
1755
1828
  margin-bottom: 6px;
1756
1829
  text-align: center;
1757
- color: #ffbdb8;
1830
+ color: #d44f5c;
1758
1831
  }
1759
- .msg.ok { color: #9be7cd; }
1832
+ .msg.ok { color: #0d8f72; }
1760
1833
 
1761
1834
  /* Lang picker */
1762
1835
  .lang-wrap {
@@ -1766,8 +1839,8 @@
1766
1839
  z-index: 10;
1767
1840
  }
1768
1841
  .lang-btn {
1769
- background: rgba(34,36,49,0.72);
1770
- border: 1px solid rgba(218,225,255,0.14);
1842
+ background: rgba(255,255,255,0.86);
1843
+ border: 1px solid rgba(111,75,246,0.18);
1771
1844
  color: var(--text);
1772
1845
  border-radius: 8px;
1773
1846
  padding: 7px 12px;
@@ -1775,19 +1848,20 @@
1775
1848
  font-family: inherit;
1776
1849
  cursor: pointer;
1777
1850
  transition: background .15s;
1851
+ box-shadow: 0 10px 28px rgba(86,70,160,0.12);
1778
1852
  }
1779
- .lang-btn:hover { background: rgba(167,124,255,0.12); }
1853
+ .lang-btn:hover { background: rgba(111,75,246,0.08); }
1780
1854
  .lang-menu {
1781
1855
  display: none;
1782
1856
  position: absolute;
1783
1857
  top: calc(100% + 6px);
1784
1858
  right: 0;
1785
- background: #222431;
1786
- border: 1px solid rgba(218,225,255,0.14);
1859
+ background: #fff;
1860
+ border: 1px solid rgba(111,75,246,0.15);
1787
1861
  border-radius: 8px;
1788
1862
  padding: 4px;
1789
1863
  min-width: 130px;
1790
- box-shadow: 0 8px 24px rgba(0,0,0,0.4);
1864
+ box-shadow: 0 18px 44px rgba(86,70,160,0.16);
1791
1865
  }
1792
1866
  .lang-menu.open { display: block; }
1793
1867
  .lang-opt {
@@ -1795,155 +1869,11 @@
1795
1869
  border-radius: 7px;
1796
1870
  cursor: pointer;
1797
1871
  font-size: 13px;
1798
- color: var(--faint);
1872
+ color: var(--muted);
1799
1873
  }
1800
- .lang-opt:hover { background: rgba(167,124,255,0.10); color: var(--text); }
1874
+ .lang-opt:hover { background: rgba(111,75,246,0.07); color: var(--text); }
1801
1875
  .lang-opt.active { color: var(--accent); font-weight: 700; }
1802
1876
 
1803
- /* PPT reference theme: bright indigo sign-in with SSO and language switcher. */
1804
- body.lattice-ref-auth {
1805
- --bg: #f7f3ff;
1806
- --text: #1f2140;
1807
- --faint: #8a86a8;
1808
- --muted: #66627f;
1809
- --accent: #6f4bf6;
1810
- --accent-2: #7b6dff;
1811
- --shadow: 0 26px 80px rgba(86, 70, 160, 0.22);
1812
- }
1813
- body.lattice-ref-auth {
1814
- background:
1815
- radial-gradient(circle at 74% 22%, rgba(111,75,246,0.16), transparent 28%),
1816
- radial-gradient(circle at 16% 18%, rgba(196,181,253,0.32), transparent 26%),
1817
- linear-gradient(135deg, #fbf9ff 0%, #f4efff 48%, #ffffff 100%);
1818
- }
1819
- body::before {
1820
- background:
1821
- radial-gradient(circle, rgba(123,109,255,0.28) 1px, transparent 1.8px),
1822
- linear-gradient(rgba(123,109,255,0.08) 1px, transparent 1px),
1823
- linear-gradient(90deg, rgba(123,109,255,0.06) 1px, transparent 1px);
1824
- mask-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
1825
- }
1826
- body::after {
1827
- background:
1828
- radial-gradient(ellipse at 8% 78%, rgba(142,111,255,0.24), transparent 34%),
1829
- linear-gradient(115deg, transparent 0 35%, rgba(111,75,246,0.09) 35.2%, transparent 35.6% 100%);
1830
- }
1831
- .login-shell {
1832
- width: min(920px, 100%);
1833
- display: grid;
1834
- grid-template-columns: minmax(280px, 400px) minmax(220px, 1fr);
1835
- align-items: center;
1836
- gap: 46px;
1837
- position: relative;
1838
- z-index: 1;
1839
- }
1840
- .brand-preview {
1841
- min-height: 360px;
1842
- border-radius: 34px;
1843
- background:
1844
- radial-gradient(circle at 54% 45%, rgba(111,75,246,0.24), transparent 18%),
1845
- linear-gradient(145deg, rgba(255,255,255,0.68), rgba(244,239,255,0.32));
1846
- border: 1px solid rgba(111,75,246,0.12);
1847
- box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
1848
- position: relative;
1849
- overflow: hidden;
1850
- }
1851
- .brand-preview::before {
1852
- content: '';
1853
- position: absolute;
1854
- inset: auto -12% 0 -8%;
1855
- height: 46%;
1856
- background: linear-gradient(135deg, rgba(111,75,246,0.24), rgba(255,255,255,0.12));
1857
- clip-path: polygon(0 62%, 18% 42%, 36% 54%, 55% 26%, 76% 44%, 100% 20%, 100% 100%, 0 100%);
1858
- filter: blur(1px);
1859
- }
1860
- .preview-node {
1861
- position: absolute;
1862
- width: 52px;
1863
- height: 52px;
1864
- border-radius: 17px;
1865
- background: #fff;
1866
- border: 1px solid rgba(111,75,246,0.18);
1867
- box-shadow: 0 18px 40px rgba(111,75,246,0.16);
1868
- }
1869
- .preview-node::after {
1870
- content: '';
1871
- position: absolute;
1872
- inset: 14px;
1873
- border-radius: 10px;
1874
- background: linear-gradient(135deg, #6f4bf6, #9f8cff);
1875
- }
1876
- .preview-node.n1 { top: 52px; left: 58px; }
1877
- .preview-node.n2 { top: 112px; right: 64px; }
1878
- .preview-node.n3 { left: 120px; bottom: 92px; }
1879
- .preview-node.n4 { right: 120px; bottom: 58px; }
1880
- .preview-line {
1881
- position: absolute;
1882
- height: 2px;
1883
- width: 150px;
1884
- background: linear-gradient(90deg, transparent, rgba(111,75,246,0.45), transparent);
1885
- transform-origin: left center;
1886
- }
1887
- .preview-line.l1 { top: 108px; left: 112px; transform: rotate(18deg); }
1888
- .preview-line.l2 { top: 186px; left: 176px; transform: rotate(112deg); }
1889
- .preview-line.l3 { bottom: 112px; left: 172px; transform: rotate(-13deg); }
1890
- .card {
1891
- background: rgba(255,255,255,0.86);
1892
- border: 1px solid rgba(111,75,246,0.13);
1893
- border-radius: 14px;
1894
- box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
1895
- }
1896
- .card::before {
1897
- background: linear-gradient(90deg, transparent, rgba(111,75,246,0.65), rgba(123,109,255,0.45), transparent);
1898
- }
1899
- .logo {
1900
- background: linear-gradient(135deg, #6f4bf6 0%, #8d7aff 100%);
1901
- color: #fff;
1902
- box-shadow: 0 16px 34px rgba(111,75,246,0.28);
1903
- }
1904
- .title {
1905
- background: linear-gradient(135deg, #1f2140 35%, #6f4bf6 82%);
1906
- -webkit-background-clip: text;
1907
- background-clip: text;
1908
- }
1909
- .input {
1910
- background: #fbfaff;
1911
- border-color: rgba(111,75,246,0.16);
1912
- color: var(--text);
1913
- }
1914
- .input:focus {
1915
- border-color: rgba(111,75,246,0.52);
1916
- box-shadow: 0 0 0 4px rgba(111,75,246,0.10);
1917
- }
1918
- .submit {
1919
- background: linear-gradient(135deg, #6f4bf6, #7b6dff);
1920
- color: #fff;
1921
- box-shadow: 0 14px 30px rgba(111,75,246,0.24);
1922
- }
1923
- .submit:hover {
1924
- background: linear-gradient(135deg, #5f3ee6, #705fff);
1925
- box-shadow: 0 18px 38px rgba(111,75,246,0.30);
1926
- }
1927
- .sso-btn {
1928
- background: #fff;
1929
- border-color: rgba(111,75,246,0.15);
1930
- color: var(--text);
1931
- }
1932
- .sso-btn:hover {
1933
- background: #f6f2ff;
1934
- border-color: rgba(111,75,246,0.34);
1935
- }
1936
- .lang-btn {
1937
- background: rgba(255,255,255,0.86);
1938
- border-color: rgba(111,75,246,0.18);
1939
- color: var(--text);
1940
- box-shadow: 0 10px 28px rgba(86,70,160,0.12);
1941
- }
1942
- .lang-menu {
1943
- background: #fff;
1944
- border-color: rgba(111,75,246,0.15);
1945
- box-shadow: 0 18px 44px rgba(86,70,160,0.16);
1946
- }
1947
1877
  @media (max-width: 760px) {
1948
1878
  .login-shell { display: block; }
1949
1879
  .brand-preview { display: none; }
@@ -2681,7 +2611,7 @@ body.lattice-ref-graph {
2681
2611
  justify-content: space-between;
2682
2612
  gap: 12px;
2683
2613
  padding: 14px 16px 10px;
2684
- border-bottom: 1px solid rgba(255,255,255,0.04);
2614
+ border-bottom: 1px solid rgba(111,66,232,0.10);
2685
2615
  }
2686
2616
 
2687
2617
  .search-title {
@@ -2704,8 +2634,8 @@ body.lattice-ref-graph {
2704
2634
  .search-count {
2705
2635
  flex-shrink: 0;
2706
2636
  font-size: 11px;
2707
- color: #08100d;
2708
- background: linear-gradient(135deg, #7df0c3, #56d4ff);
2637
+ color: #fff;
2638
+ background: linear-gradient(135deg, #6f42e8, #9a78f0);
2709
2639
  border-radius: 999px;
2710
2640
  padding: 5px 10px;
2711
2641
  font-weight: 700;
@@ -2743,7 +2673,7 @@ body.lattice-ref-graph {
2743
2673
  height: 42px;
2744
2674
  border-radius: 8px;
2745
2675
  border: 1px solid var(--line-strong);
2746
- background: rgba(255,255,255,0.03);
2676
+ background: rgba(255,255,255,0.80);
2747
2677
  color: var(--text);
2748
2678
  cursor: pointer;
2749
2679
  font-size: 13px;
@@ -2892,7 +2822,7 @@ body.lattice-ref-graph {
2892
2822
 
2893
2823
  .sidebar-head {
2894
2824
  padding: 18px 18px 12px;
2895
- border-bottom: 1px solid rgba(255,255,255,0.04);
2825
+ border-bottom: 1px solid rgba(111,66,232,0.10);
2896
2826
  }
2897
2827
 
2898
2828
  .eyebrow {
@@ -3103,14 +3033,15 @@ body.lattice-ref-graph {
3103
3033
 
3104
3034
  .local-source-btn.primary {
3105
3035
  grid-column: 1 / -1;
3106
- background: #14162c;
3036
+ background: linear-gradient(135deg, #6f42e8, #7b61ff);
3107
3037
  color: #fff;
3108
- border-color: #14162c;
3038
+ border-color: rgba(111,66,232,0.3);
3109
3039
  }
3110
3040
 
3111
3041
  .local-source-btn.primary:hover {
3112
3042
  color: #fff;
3113
- background: #24284a;
3043
+ background: linear-gradient(135deg, #5f35d8, #6b51ef);
3044
+ box-shadow: 0 8px 20px rgba(111,66,232,0.22);
3114
3045
  }
3115
3046
 
3116
3047
  .local-source-btn:disabled {
@@ -3217,7 +3148,7 @@ body.lattice-ref-graph {
3217
3148
  height: 10px;
3218
3149
  border-radius: 50%;
3219
3150
  flex-shrink: 0;
3220
- box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
3151
+ box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
3221
3152
  }
3222
3153
 
3223
3154
  .legend-line {
@@ -3479,9 +3410,9 @@ body.lattice-ref-graph {
3479
3410
  pointer-events: none;
3480
3411
  z-index: 0;
3481
3412
  background:
3482
- linear-gradient(135deg, rgba(34,211,160,0.08) 0%, transparent 38%),
3483
- linear-gradient(315deg, rgba(143,178,255,0.12) 0%, transparent 42%),
3484
- linear-gradient(180deg, #22324a 0%, #172233 100%);
3413
+ radial-gradient(circle at 82% 12%, rgba(111,66,232,0.14), transparent 30%),
3414
+ radial-gradient(circle at 10% 80%, rgba(180,160,255,0.16), transparent 35%),
3415
+ linear-gradient(180deg, #f3ecff 0%, #efe8ff 52%, #f2ecff 100%);
3485
3416
  }
3486
3417
 
3487
3418
  .bg-shapes {
@@ -3501,13 +3432,13 @@ body.lattice-ref-graph {
3501
3432
  .bg-orb-1 {
3502
3433
  width: 500px; height: 500px;
3503
3434
  top: -180px; left: -120px;
3504
- background: radial-gradient(circle, #22d3a0, transparent 70%);
3435
+ background: radial-gradient(circle, #9a78f0, transparent 70%);
3505
3436
  opacity: 0.14;
3506
3437
  }
3507
3438
  .bg-orb-2 {
3508
3439
  width: 600px; height: 600px;
3509
3440
  bottom: -200px; right: -150px;
3510
- background: radial-gradient(circle, #818cf8, transparent 70%);
3441
+ background: radial-gradient(circle, #b4a0fd, transparent 70%);
3511
3442
  opacity: 0.11;
3512
3443
  }
3513
3444
  .bg-orb-3 {
@@ -3538,8 +3469,8 @@ body.lattice-ref-graph {
3538
3469
  /* ── 사이드바 ── */
3539
3470
  .sidebar {
3540
3471
  width: 268px;
3541
- background: rgba(27,39,56,0.92);
3542
- border-right: 1px solid rgba(219,235,255,0.14);
3472
+ background: rgba(244,237,255,0.96);
3473
+ border-right: 1px solid rgba(111,66,232,0.13);
3543
3474
  display: flex;
3544
3475
  flex-direction: column;
3545
3476
  min-width: 240px;
@@ -3552,22 +3483,22 @@ body.lattice-ref-graph {
3552
3483
  display: flex;
3553
3484
  align-items: center;
3554
3485
  gap: 12px;
3555
- border-bottom: 1px solid rgba(255,255,255,0.05);
3486
+ border-bottom: 1px solid rgba(111,66,232,0.10);
3556
3487
  position: relative;
3557
3488
  }
3558
3489
 
3559
3490
  .logo-box {
3560
3491
  width: 38px;
3561
3492
  height: 38px;
3562
- background: linear-gradient(135deg, #22d3a0 0%, #818cf8 100%);
3493
+ background: linear-gradient(135deg, #6f42e8 0%, #9a78f0 100%);
3563
3494
  border-radius: 10px;
3564
3495
  display: flex;
3565
3496
  align-items: center;
3566
3497
  justify-content: center;
3567
- color: #040706;
3498
+ color: #fff;
3568
3499
  font-weight: 800;
3569
3500
  font-size: 18px;
3570
- box-shadow: 0 0 20px rgba(34,211,160,0.35), 0 4px 12px rgba(0,0,0,0.4);
3501
+ box-shadow: 0 8px 20px rgba(111,66,232,0.28);
3571
3502
  flex-shrink: 0;
3572
3503
  }
3573
3504
 
@@ -3575,14 +3506,11 @@ body.lattice-ref-graph {
3575
3506
  font-size: 15px;
3576
3507
  font-weight: 800;
3577
3508
  letter-spacing: -0.02em;
3578
- background: linear-gradient(135deg, #fff 40%, rgba(34,211,160,0.9));
3579
- -webkit-background-clip: text;
3580
- -webkit-text-fill-color: transparent;
3581
- background-clip: text;
3509
+ color: #14162c;
3582
3510
  }
3583
3511
 
3584
3512
  .brand-subtitle {
3585
- color: #a78bfa;
3513
+ color: #6f42e8;
3586
3514
  font-size: 10.5px;
3587
3515
  margin-top: 1px;
3588
3516
  letter-spacing: 0.03em;
@@ -3591,8 +3519,8 @@ body.lattice-ref-graph {
3591
3519
  .user-strip {
3592
3520
  padding: 10px 18px;
3593
3521
  font-size: 12px;
3594
- color: #c4b5fd;
3595
- border-bottom: 1px solid rgba(255,255,255,0.04);
3522
+ color: var(--muted);
3523
+ border-bottom: 1px solid rgba(111,66,232,0.10);
3596
3524
  display: flex;
3597
3525
  align-items: center;
3598
3526
  gap: 8px;
@@ -3601,21 +3529,21 @@ body.lattice-ref-graph {
3601
3529
  .user-avatar {
3602
3530
  width: 26px; height: 26px;
3603
3531
  border-radius: 50%;
3604
- background: linear-gradient(135deg, var(--accent), var(--accent-3));
3532
+ background: linear-gradient(135deg, #6f42e8, #9a78f0);
3605
3533
  display: flex; align-items: center; justify-content: center;
3606
- font-size: 11px; font-weight: 700; color: #040706;
3534
+ font-size: 11px; font-weight: 700; color: #fff;
3607
3535
  flex-shrink: 0;
3608
3536
  }
3609
3537
 
3610
3538
  .sidebar-search {
3611
3539
  padding: 8px 10px;
3612
- border-bottom: 1px solid rgba(255,255,255,0.05);
3540
+ border-bottom: 1px solid rgba(111,66,232,0.10);
3613
3541
  }
3614
3542
  .sidebar-search input {
3615
3543
  width: 100%;
3616
3544
  padding: 7px 10px 7px 30px;
3617
- background: rgba(255,255,255,0.04);
3618
- border: 1px solid rgba(255,255,255,0.07);
3545
+ background: rgba(255,255,255,0.60);
3546
+ border: 1px solid rgba(111,66,232,0.14);
3619
3547
  border-radius: 8px;
3620
3548
  color: var(--text);
3621
3549
  font-size: 12px;
@@ -3676,7 +3604,7 @@ body.lattice-ref-graph {
3676
3604
  border-radius: var(--radius-sm);
3677
3605
  cursor: pointer;
3678
3606
  font-size: 12.5px;
3679
- color: #c4b5fd;
3607
+ color: var(--muted);
3680
3608
  white-space: nowrap;
3681
3609
  overflow: hidden;
3682
3610
  text-overflow: ellipsis;
@@ -3693,28 +3621,28 @@ body.lattice-ref-graph {
3693
3621
  content: '';
3694
3622
  width: 4px; height: 4px;
3695
3623
  border-radius: 50%;
3696
- background: #a78bfa;
3624
+ background: rgba(111,66,232,0.4);
3697
3625
  flex-shrink: 0;
3698
3626
  transition: all .15s;
3699
3627
  }
3700
3628
 
3701
3629
  .history-item:hover {
3702
- background: rgba(255,255,255,0.045);
3630
+ background: rgba(111,66,232,0.06);
3703
3631
  color: var(--text);
3704
3632
  border-left-color: var(--accent);
3705
3633
  }
3706
3634
  .history-item:hover::before { background: var(--accent); }
3707
3635
  .history-item.active {
3708
- background: rgba(34,211,160,0.08);
3636
+ background: rgba(111,66,232,0.08);
3709
3637
  color: var(--text);
3710
- border-color: rgba(34,211,160,0.16);
3638
+ border-color: rgba(111,66,232,0.16);
3711
3639
  border-left-color: var(--accent);
3712
3640
  }
3713
3641
  .history-item.active::before { background: var(--accent); }
3714
3642
 
3715
3643
  .sidebar-footer {
3716
3644
  padding: 14px;
3717
- border-top: 1px solid rgba(255,255,255,0.05);
3645
+ border-top: 1px solid rgba(111,66,232,0.10);
3718
3646
  display: flex;
3719
3647
  flex-direction: column;
3720
3648
  gap: 6px;
@@ -3724,8 +3652,8 @@ body.lattice-ref-graph {
3724
3652
  width: 100%;
3725
3653
  padding: 11px 12px;
3726
3654
  border-radius: var(--radius-sm);
3727
- background: linear-gradient(135deg, rgba(34,211,160,0.12), rgba(129,140,248,0.08));
3728
- border: 1px solid rgba(34,211,160,0.2);
3655
+ background: rgba(244,238,255,0.88);
3656
+ border: 1px solid rgba(111,66,232,0.20);
3729
3657
  color: var(--text);
3730
3658
  cursor: pointer;
3731
3659
  display: flex;
@@ -3737,14 +3665,14 @@ body.lattice-ref-graph {
3737
3665
  transition: all .18s;
3738
3666
  }
3739
3667
  .new-chat-btn:hover {
3740
- background: linear-gradient(135deg, rgba(34,211,160,0.2), rgba(129,140,248,0.14));
3741
- border-color: rgba(34,211,160,0.4);
3742
- box-shadow: 0 0 16px rgba(34,211,160,0.12);
3668
+ background: rgba(111,66,232,0.10);
3669
+ border-color: rgba(111,66,232,0.36);
3670
+ box-shadow: 0 0 16px rgba(111,66,232,0.12);
3743
3671
  }
3744
3672
 
3745
3673
  .sidebar-primary-actions {
3746
3674
  padding: 8px 10px 10px;
3747
- border-bottom: 1px solid rgba(255,255,255,0.05);
3675
+ border-bottom: 1px solid rgba(111,66,232,0.10);
3748
3676
  }
3749
3677
 
3750
3678
  .admin-btn {
@@ -3805,8 +3733,8 @@ body.lattice-ref-graph {
3805
3733
  justify-content: space-between;
3806
3734
  gap: 12px;
3807
3735
  padding: 10px 22px;
3808
- border-bottom: 1px solid rgba(219,235,255,0.12);
3809
- background: rgba(29,42,60,0.82);
3736
+ border-bottom: 1px solid rgba(111,66,232,0.10);
3737
+ background: rgba(244,238,255,0.92);
3810
3738
  backdrop-filter: blur(20px);
3811
3739
  -webkit-backdrop-filter: blur(20px);
3812
3740
  position: relative;
@@ -3825,8 +3753,8 @@ body.lattice-ref-graph {
3825
3753
  display: inline-flex;
3826
3754
  align-items: center;
3827
3755
  gap: 8px;
3828
- border: 1px solid rgba(34,211,160,0.25);
3829
- background: rgba(34,211,160,0.07);
3756
+ border: 1px solid rgba(111,66,232,0.20);
3757
+ background: rgba(111,66,232,0.07);
3830
3758
  border-radius: 999px;
3831
3759
  padding: 6px 14px 6px 10px;
3832
3760
  font-size: 13px;
@@ -3838,8 +3766,8 @@ body.lattice-ref-graph {
3838
3766
  display: inline-flex;
3839
3767
  align-items: center;
3840
3768
  gap: 6px;
3841
- border: 1px solid rgba(219,235,255,0.14);
3842
- background: rgba(255,255,255,0.06);
3769
+ border: 1px solid rgba(111,66,232,0.14);
3770
+ background: rgba(255,255,255,0.60);
3843
3771
  border-radius: 999px;
3844
3772
  padding: 5px 11px;
3845
3773
  font-size: 11.5px;
@@ -3849,22 +3777,22 @@ body.lattice-ref-graph {
3849
3777
 
3850
3778
  .status-pill.vpc-ready {
3851
3779
  color: var(--accent);
3852
- border-color: rgba(34,211,160,0.3);
3853
- background: rgba(34,211,160,0.07);
3780
+ border-color: rgba(111,66,232,0.24);
3781
+ background: rgba(111,66,232,0.07);
3854
3782
  }
3855
3783
 
3856
3784
  .status-dot {
3857
3785
  width: 7px; height: 7px;
3858
3786
  background: var(--accent);
3859
3787
  border-radius: 50%;
3860
- box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(34,211,160,0.4);
3788
+ box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(111,66,232,0.32);
3861
3789
  flex: 0 0 auto;
3862
3790
  animation: pulse-dot 2.5s ease-in-out infinite;
3863
3791
  }
3864
3792
 
3865
3793
  @keyframes pulse-dot {
3866
- 0%, 100% { box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(34,211,160,0.3); }
3867
- 50% { box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(34,211,160,0.5); }
3794
+ 0%, 100% { box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(111,66,232,0.24); }
3795
+ 50% { box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(111,66,232,0.40); }
3868
3796
  }
3869
3797
 
3870
3798
  .logout-btn {
@@ -3880,14 +3808,14 @@ body.lattice-ref-graph {
3880
3808
  .logout-btn:hover {
3881
3809
  color: var(--text);
3882
3810
  border-color: rgba(255,255,255,0.08);
3883
- background: rgba(255,255,255,0.04);
3811
+ background: rgba(255,255,255,0.60);
3884
3812
  }
3885
3813
 
3886
3814
  .acct-modal-overlay {
3887
3815
  display: none;
3888
3816
  position: fixed;
3889
3817
  inset: 0;
3890
- background: rgba(0,0,0,0.6);
3818
+ background: rgba(14,16,42,0.45);
3891
3819
  backdrop-filter: blur(4px);
3892
3820
  z-index: 1000;
3893
3821
  align-items: center;
@@ -3900,7 +3828,7 @@ body.lattice-ref-graph {
3900
3828
  display: none;
3901
3829
  position: fixed;
3902
3830
  inset: 0;
3903
- background: rgba(0,0,0,0.6);
3831
+ background: rgba(14,16,42,0.45);
3904
3832
  backdrop-filter: blur(4px);
3905
3833
  z-index: 1000;
3906
3834
  align-items: center;
@@ -3916,7 +3844,7 @@ body.lattice-ref-graph {
3916
3844
  max-height: 80vh;
3917
3845
  display: flex;
3918
3846
  flex-direction: column;
3919
- box-shadow: 0 20px 60px rgba(0,0,0,0.5);
3847
+ box-shadow: 0 20px 60px rgba(88,72,150,0.20);
3920
3848
  overflow: hidden;
3921
3849
  }
3922
3850
  .mcp-modal-header {
@@ -3932,7 +3860,7 @@ body.lattice-ref-graph {
3932
3860
  .mcp-item {
3933
3861
  display: flex; align-items: center; gap: 12px;
3934
3862
  padding: 11px 14px;
3935
- background: rgba(255,255,255,0.03);
3863
+ background: rgba(255,255,255,0.60);
3936
3864
  border: 1px solid rgba(255,255,255,0.06);
3937
3865
  border-radius: 10px;
3938
3866
  margin-bottom: 6px;
@@ -3949,7 +3877,7 @@ body.lattice-ref-graph {
3949
3877
  color: var(--accent); cursor: pointer; transition: all .15s; flex-shrink: 0;
3950
3878
  }
3951
3879
  .mcp-install-btn:hover { background: rgba(111,66,232,0.16); }
3952
- .mcp-install-btn.installed { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--faint); }
3880
+ .mcp-install-btn.installed { border-color: rgba(111,66,232,0.12); background: rgba(255,255,255,0.60); color: var(--faint); }
3953
3881
  /* MCP 소스 배지 */
3954
3882
  .mcp-source-badge {
3955
3883
  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
@@ -3996,7 +3924,7 @@ body.lattice-ref-graph {
3996
3924
  max-width: 380px;
3997
3925
  display: flex;
3998
3926
  flex-direction: column;
3999
- box-shadow: 0 20px 60px rgba(0,0,0,0.5);
3927
+ box-shadow: 0 20px 60px rgba(88,72,150,0.20);
4000
3928
  overflow: hidden;
4001
3929
  }
4002
3930
  .acct-tabs {
@@ -4015,7 +3943,7 @@ body.lattice-ref-graph {
4015
3943
  .pw-field { display: flex; flex-direction: column; gap: 5px; }
4016
3944
  .pw-field label { font-size: 11px; color: var(--muted); }
4017
3945
  .pw-field input {
4018
- background: rgba(0,0,0,0.3);
3946
+ background: rgba(14,16,42,0.25);
4019
3947
  border: 1px solid rgba(255,255,255,0.08);
4020
3948
  border-radius: 8px;
4021
3949
  color: var(--text, #f8fafc);
@@ -4048,7 +3976,7 @@ body.lattice-ref-graph {
4048
3976
  border: 1px solid rgba(255,255,255,0.1);
4049
3977
  border-radius: 10px;
4050
3978
  overflow: hidden;
4051
- box-shadow: 0 8px 24px rgba(0,0,0,0.4);
3979
+ box-shadow: 0 8px 24px rgba(88,72,150,0.16);
4052
3980
  z-index: 200;
4053
3981
  min-width: 90px;
4054
3982
  }
@@ -4100,24 +4028,24 @@ body.lattice-ref-graph {
4100
4028
  align-items: center;
4101
4029
  justify-content: space-between;
4102
4030
  gap: 12px;
4103
- box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
4031
+ box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.80);
4104
4032
  backdrop-filter: blur(10px);
4105
4033
  transition: all .2s;
4106
4034
  }
4107
4035
 
4108
4036
  .ops-card.primary {
4109
- border-color: rgba(34,211,160,0.22);
4110
- background: linear-gradient(135deg, rgba(34,211,160,0.1) 0%, rgba(15,19,24,0.9) 60%);
4111
- box-shadow: var(--shadow-sm), var(--glow-green), inset 0 1px 0 rgba(34,211,160,0.08);
4037
+ border-color: rgba(111,66,232,0.18);
4038
+ background: linear-gradient(135deg, rgba(111,66,232,0.10) 0%, rgba(248,243,255,0.92) 60%);
4039
+ box-shadow: var(--shadow-sm), var(--glow-green), inset 0 1px 0 rgba(111,66,232,0.08);
4112
4040
  }
4113
4041
 
4114
4042
  .ops-card.interactive { cursor: pointer; }
4115
4043
 
4116
4044
  .ops-card.interactive:hover {
4117
4045
  transform: translateY(-2px);
4118
- border-color: rgba(34,211,160,0.4);
4119
- background: linear-gradient(135deg, rgba(34,211,160,0.16) 0%, rgba(15,19,24,0.95) 60%);
4120
- box-shadow: var(--shadow), 0 0 30px rgba(34,211,160,0.15);
4046
+ border-color: rgba(111,66,232,0.32);
4047
+ background: linear-gradient(135deg, rgba(111,66,232,0.14) 0%, rgba(248,243,255,0.96) 60%);
4048
+ box-shadow: var(--shadow), 0 0 30px rgba(111,66,232,0.14);
4121
4049
  }
4122
4050
 
4123
4051
  .ops-label {
@@ -4158,15 +4086,15 @@ body.lattice-ref-graph {
4158
4086
  }
4159
4087
 
4160
4088
  .ops-card.primary .ops-icon {
4161
- background: linear-gradient(135deg, rgba(34,211,160,0.22), rgba(129,140,248,0.14));
4162
- border: 1px solid rgba(34,211,160,0.25);
4089
+ background: linear-gradient(135deg, rgba(111,66,232,0.18), rgba(129,140,248,0.14));
4090
+ border: 1px solid rgba(111,66,232,0.20);
4163
4091
  color: var(--accent);
4164
- box-shadow: 0 0 16px rgba(34,211,160,0.2);
4092
+ box-shadow: 0 0 16px rgba(111,66,232,0.16);
4165
4093
  }
4166
4094
 
4167
4095
  .ops-card:not(.primary) .ops-icon {
4168
- background: rgba(255,255,255,0.04);
4169
- border: 1px solid rgba(255,255,255,0.07);
4096
+ background: rgba(255,255,255,0.60);
4097
+ border: 1px solid rgba(111,66,232,0.14);
4170
4098
  color: var(--accent-3);
4171
4099
  }
4172
4100
 
@@ -4230,7 +4158,7 @@ body.lattice-ref-graph {
4230
4158
  .bubble p { margin-bottom: 8px; }
4231
4159
  .bubble ul, .bubble ol { padding-left: 20px; margin-bottom: 8px; }
4232
4160
  .bubble code:not(pre code) {
4233
- background: rgba(255,255,255,0.08);
4161
+ background: rgba(111,66,232,0.08);
4234
4162
  padding: 2px 5px;
4235
4163
  border-radius: 4px;
4236
4164
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
@@ -4238,20 +4166,19 @@ body.lattice-ref-graph {
4238
4166
  }
4239
4167
 
4240
4168
  .user .bubble {
4241
- background: linear-gradient(135deg, #1a7a60 0%, #1d5f80 70%, #2a4fa0 100%);
4242
- color: #f0fdf9;
4169
+ background: linear-gradient(135deg, #6f42e8 0%, #5832c8 70%, #7b61ff 100%);
4170
+ color: #fff;
4243
4171
  border-bottom-right-radius: 4px;
4244
- box-shadow: 0 4px 20px rgba(26,122,96,0.35), 0 2px 6px rgba(0,0,0,0.3);
4245
- border: 1px solid rgba(34,211,160,0.15);
4172
+ box-shadow: 0 6px 24px rgba(111,66,232,0.28);
4173
+ border: none;
4246
4174
  }
4247
4175
 
4248
4176
  .ai .bubble {
4249
- background: rgba(37,52,73,0.9);
4177
+ background: rgba(250,246,255,0.97);
4250
4178
  color: var(--text);
4251
- border: 1px solid rgba(219,235,255,0.15);
4179
+ border: 1px solid rgba(111,66,232,0.12);
4252
4180
  border-bottom-left-radius: 4px;
4253
- box-shadow: 0 4px 20px rgba(7,14,24,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
4254
- backdrop-filter: blur(8px);
4181
+ box-shadow: 0 4px 18px rgba(88,72,150,0.08);
4255
4182
  }
4256
4183
 
4257
4184
  /* ── 코드 블록 ── */
@@ -4334,7 +4261,7 @@ body.lattice-ref-graph {
4334
4261
  display: none;
4335
4262
  position: fixed;
4336
4263
  inset: 0;
4337
- background: rgba(0,0,0,0.5);
4264
+ background: rgba(14,16,42,0.40);
4338
4265
  z-index: 99;
4339
4266
  backdrop-filter: blur(2px);
4340
4267
  }
@@ -4374,27 +4301,26 @@ body.lattice-ref-graph {
4374
4301
  .input-area {
4375
4302
  padding: 14px 20px 20px;
4376
4303
  padding-bottom: max(20px, env(safe-area-inset-bottom));
4377
- background: linear-gradient(0deg, rgba(24,35,50,0.96) 0%, transparent 100%);
4304
+ background: linear-gradient(0deg, rgba(243,236,255,0.98) 0%, transparent 100%);
4378
4305
  }
4379
4306
 
4380
4307
  .input-box {
4381
- background: rgba(37,52,73,0.92);
4382
- border: 1px solid rgba(219,235,255,0.16);
4308
+ background: rgba(248,243,255,0.97);
4309
+ border: 1px solid rgba(111,66,232,0.16);
4383
4310
  border-radius: var(--radius);
4384
4311
  padding: 10px 12px 10px;
4385
4312
  display: flex;
4386
4313
  flex-direction: column;
4387
4314
  gap: 8px;
4388
- box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
4315
+ box-shadow: 0 8px 32px rgba(88,72,150,0.10);
4389
4316
  max-width: var(--content-width);
4390
4317
  margin: 0 auto;
4391
4318
  transition: border-color .2s, box-shadow .2s;
4392
- backdrop-filter: blur(16px);
4393
4319
  }
4394
4320
 
4395
4321
  .input-box:focus-within {
4396
- border-color: rgba(34,211,160,0.4);
4397
- box-shadow: var(--shadow), var(--glow-green), inset 0 1px 0 rgba(34,211,160,0.06);
4322
+ border-color: rgba(111,66,232,0.36);
4323
+ box-shadow: 0 8px 32px rgba(88,72,150,0.14), 0 0 0 3px rgba(111,66,232,0.08);
4398
4324
  }
4399
4325
 
4400
4326
  .input-row {
@@ -4432,12 +4358,12 @@ body.lattice-ref-graph {
4432
4358
  }
4433
4359
  .action-btn:hover {
4434
4360
  color: var(--accent);
4435
- background: rgba(34,211,160,0.08);
4361
+ background: rgba(111,66,232,0.08);
4436
4362
  }
4437
4363
 
4438
4364
  .send-btn {
4439
- background: linear-gradient(135deg, var(--accent), #1ab88c);
4440
- color: #030d09;
4365
+ background: linear-gradient(135deg, #6f42e8, #7b61ff);
4366
+ color: #fff;
4441
4367
  border: none;
4442
4368
  width: 38px; height: 38px;
4443
4369
  border-radius: 10px;
@@ -4446,13 +4372,13 @@ body.lattice-ref-graph {
4446
4372
  align-items: center;
4447
4373
  justify-content: center;
4448
4374
  font-weight: 800;
4449
- box-shadow: 0 0 16px rgba(34,211,160,0.3), 0 4px 12px rgba(0,0,0,0.3);
4375
+ box-shadow: 0 8px 20px rgba(111,66,232,0.28);
4450
4376
  transition: all .18s;
4451
4377
  flex-shrink: 0;
4452
4378
  }
4453
4379
  .send-btn:hover {
4454
- background: linear-gradient(135deg, #2de8b0, #22d3a0);
4455
- box-shadow: 0 0 24px rgba(34,211,160,0.45), 0 4px 14px rgba(0,0,0,0.3);
4380
+ background: linear-gradient(135deg, #5f35d8, #6b51ef);
4381
+ box-shadow: 0 12px 28px rgba(111,66,232,0.36);
4456
4382
  transform: scale(1.05);
4457
4383
  }
4458
4384
  .send-btn:disabled {
@@ -4469,7 +4395,7 @@ body.lattice-ref-graph {
4469
4395
  gap: 5px;
4470
4396
  padding: 2px 2px 0;
4471
4397
  flex-wrap: wrap;
4472
- border-top: 1px solid rgba(255,255,255,0.04);
4398
+ border-top: 1px solid rgba(111,66,232,0.10);
4473
4399
  }
4474
4400
 
4475
4401
  .file-toolbar-label {
@@ -4488,7 +4414,7 @@ body.lattice-ref-graph {
4488
4414
  padding: 4px 10px;
4489
4415
  border-radius: 6px;
4490
4416
  border: 1px solid rgba(255,255,255,0.06);
4491
- background: rgba(255,255,255,0.03);
4417
+ background: rgba(255,255,255,0.60);
4492
4418
  color: var(--muted);
4493
4419
  font-size: 11.5px;
4494
4420
  font-weight: 600;
@@ -4497,9 +4423,9 @@ body.lattice-ref-graph {
4497
4423
  }
4498
4424
 
4499
4425
  .file-type-btn:hover {
4500
- border-color: rgba(34,211,160,0.35);
4426
+ border-color: rgba(111,66,232,0.28);
4501
4427
  color: var(--accent);
4502
- background: rgba(34,211,160,0.07);
4428
+ background: rgba(111,66,232,0.07);
4503
4429
  }
4504
4430
 
4505
4431
  /* ── 멀티 LLM 파이프라인 ── */
@@ -4530,7 +4456,7 @@ body.lattice-ref-graph {
4530
4456
  background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2);
4531
4457
  border-radius: 12px; padding: 16px; margin-top: 4px;
4532
4458
  }
4533
- .plan-approval-card h4 { margin: 0 0 10px; color: #818cf8; font-size: 14px; }
4459
+ .plan-approval-card h4 { margin: 0 0 10px; color: #6f42e8; font-size: 14px; }
4534
4460
  .plan-approval-card ol { margin: 0 0 12px; padding-left: 20px; color: var(--text); font-size: 13px; line-height: 1.8; }
4535
4461
  .plan-approval-card .plan-meta { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
4536
4462
  .plan-approval-actions { display: flex; gap: 8px; }
@@ -4646,7 +4572,7 @@ body.lattice-ref-graph {
4646
4572
  padding: 24px;
4647
4573
  max-width: 420px;
4648
4574
  width: 90%;
4649
- box-shadow: 0 24px 60px rgba(0,0,0,0.5);
4575
+ box-shadow: 0 24px 60px rgba(88,72,150,0.22);
4650
4576
  }
4651
4577
 
4652
4578
  .perm-icon {
@@ -4664,7 +4590,7 @@ body.lattice-ref-graph {
4664
4590
  .perm-path {
4665
4591
  font-family: monospace;
4666
4592
  font-size: 12px;
4667
- background: rgba(255,255,255,0.05);
4593
+ background: rgba(111,66,232,0.05);
4668
4594
  border: 1px solid var(--border);
4669
4595
  border-radius: 6px;
4670
4596
  padding: 8px 10px;
@@ -4709,7 +4635,7 @@ body.lattice-ref-graph {
4709
4635
  }
4710
4636
 
4711
4637
  .perm-allow-btn:hover { background: rgba(48, 167, 137, 0.25); }
4712
- .perm-deny-btn:hover { background: rgba(255,255,255,0.04); }
4638
+ .perm-deny-btn:hover { background: rgba(255,255,255,0.60); }
4713
4639
 
4714
4640
  .preview-bar {
4715
4641
  display: flex;
@@ -4759,7 +4685,7 @@ body.lattice-ref-graph {
4759
4685
  position: absolute;
4760
4686
  inset: 0;
4761
4687
  background:
4762
- radial-gradient(ellipse 70% 60% at 20% 20%, rgba(34,211,160,0.14) 0%, transparent 55%),
4688
+ radial-gradient(ellipse 70% 60% at 20% 20%, rgba(111,66,232,0.14) 0%, transparent 55%),
4763
4689
  radial-gradient(ellipse 50% 50% at 80% 80%, rgba(129,140,248,0.12) 0%, transparent 55%);
4764
4690
  pointer-events: none;
4765
4691
  }
@@ -4773,7 +4699,7 @@ body.lattice-ref-graph {
4773
4699
  .auth-orb-1 {
4774
4700
  width: 400px; height: 400px;
4775
4701
  top: -150px; left: -100px;
4776
- background: rgba(34,211,160,0.15);
4702
+ background: rgba(111,66,232,0.14);
4777
4703
  }
4778
4704
  .auth-orb-2 {
4779
4705
  width: 350px; height: 350px;
@@ -4787,7 +4713,7 @@ body.lattice-ref-graph {
4787
4713
  border: 1px solid rgba(255,255,255,0.08);
4788
4714
  border-radius: 20px;
4789
4715
  padding: 36px 32px;
4790
- box-shadow: var(--shadow), 0 0 0 1px rgba(34,211,160,0.05);
4716
+ box-shadow: var(--shadow), 0 0 0 1px rgba(111,66,232,0.05);
4791
4717
  position: relative;
4792
4718
  z-index: 1;
4793
4719
  backdrop-filter: blur(24px);
@@ -4799,17 +4725,17 @@ body.lattice-ref-graph {
4799
4725
  top: 0; left: 50%;
4800
4726
  transform: translateX(-50%);
4801
4727
  width: 60%; height: 1px;
4802
- background: linear-gradient(90deg, transparent, rgba(34,211,160,0.5), transparent);
4728
+ background: linear-gradient(90deg, transparent, rgba(111,66,232,0.40), transparent);
4803
4729
  }
4804
4730
 
4805
4731
  .auth-logo {
4806
4732
  width: 52px; height: 52px;
4807
- background: linear-gradient(135deg, #22d3a0, #818cf8);
4733
+ background: linear-gradient(135deg, #6f42e8, #9a78f0);
4808
4734
  border-radius: 14px;
4809
4735
  display: flex; align-items: center; justify-content: center;
4810
- font-size: 24px; color: #040706;
4736
+ font-size: 24px; color: #fff;
4811
4737
  margin: 0 auto 16px;
4812
- box-shadow: 0 0 30px rgba(34,211,160,0.3), 0 8px 24px rgba(0,0,0,0.4);
4738
+ box-shadow: 0 0 30px rgba(111,66,232,0.24), 0 8px 24px rgba(88,72,150,0.16);
4813
4739
  }
4814
4740
 
4815
4741
  .auth-title {
@@ -4817,7 +4743,7 @@ body.lattice-ref-graph {
4817
4743
  text-align: center;
4818
4744
  font-size: 22px;
4819
4745
  font-weight: 800;
4820
- background: linear-gradient(135deg, #fff 40%, rgba(34,211,160,0.9));
4746
+ background: linear-gradient(135deg, #14162c 35%, #6f42e8 82%);
4821
4747
  -webkit-background-clip: text;
4822
4748
  -webkit-text-fill-color: transparent;
4823
4749
  background-clip: text;
@@ -4834,7 +4760,7 @@ body.lattice-ref-graph {
4834
4760
  width: 100%;
4835
4761
  padding: 12px 14px;
4836
4762
  margin-bottom: 10px;
4837
- background: rgba(255,255,255,0.04);
4763
+ background: rgba(255,255,255,0.60);
4838
4764
  border: 1px solid rgba(255,255,255,0.08);
4839
4765
  color: var(--text);
4840
4766
  border-radius: 10px;
@@ -4845,8 +4771,8 @@ body.lattice-ref-graph {
4845
4771
  }
4846
4772
 
4847
4773
  .auth-input:focus {
4848
- border-color: rgba(34,211,160,0.5);
4849
- box-shadow: 0 0 0 3px rgba(34,211,160,0.08);
4774
+ border-color: rgba(111,66,232,0.40);
4775
+ box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
4850
4776
  }
4851
4777
 
4852
4778
  .auth-input::placeholder { color: var(--faint); }
@@ -4854,21 +4780,21 @@ body.lattice-ref-graph {
4854
4780
  .auth-submit {
4855
4781
  width: 100%;
4856
4782
  padding: 13px;
4857
- background: linear-gradient(135deg, #22d3a0, #1ab88c);
4783
+ background: linear-gradient(135deg, #6f42e8, #5832c8);
4858
4784
  color: #030d09;
4859
4785
  border: none;
4860
4786
  border-radius: 10px;
4861
4787
  cursor: pointer;
4862
4788
  font-weight: 800;
4863
4789
  font-size: 14px;
4864
- box-shadow: 0 0 20px rgba(34,211,160,0.3), 0 4px 12px rgba(0,0,0,0.3);
4790
+ box-shadow: 0 0 20px rgba(111,66,232,0.24), 0 4px 12px rgba(0,0,0,0.3);
4865
4791
  transition: all .18s;
4866
4792
  margin-top: 4px;
4867
4793
  }
4868
4794
 
4869
4795
  .auth-submit:hover {
4870
- background: linear-gradient(135deg, #2de8b0, #22d3a0);
4871
- box-shadow: 0 0 30px rgba(34,211,160,0.4), 0 4px 14px rgba(0,0,0,0.3);
4796
+ background: linear-gradient(135deg, #6f42e8, #9a78f0);
4797
+ box-shadow: 0 0 30px rgba(111,66,232,0.32), 0 4px 14px rgba(0,0,0,0.3);
4872
4798
  transform: translateY(-1px);
4873
4799
  }
4874
4800
 
@@ -5280,7 +5206,7 @@ body.lattice-ref-graph {
5280
5206
  padding: 10px 14px;
5281
5207
  border-radius: 8px;
5282
5208
  border: 1px solid var(--border);
5283
- background: rgba(255,255,255,0.02);
5209
+ background: rgba(248,243,255,0.50);
5284
5210
  margin-bottom: 16px;
5285
5211
  font-size: 13px;
5286
5212
  }
@@ -5303,7 +5229,7 @@ body.lattice-ref-graph {
5303
5229
  border-radius: 8px;
5304
5230
  padding: 14px;
5305
5231
  margin-bottom: 12px;
5306
- background: rgba(255,255,255,0.02);
5232
+ background: rgba(248,243,255,0.50);
5307
5233
  }
5308
5234
 
5309
5235
  .status-section-title {
@@ -5320,7 +5246,7 @@ body.lattice-ref-graph {
5320
5246
  align-items: center;
5321
5247
  gap: 10px;
5322
5248
  padding: 6px 0;
5323
- border-bottom: 1px solid rgba(255,255,255,0.04);
5249
+ border-bottom: 1px solid rgba(111,66,232,0.08);
5324
5250
  font-size: 13px;
5325
5251
  }
5326
5252
 
@@ -5439,7 +5365,7 @@ body.lattice-ref-graph {
5439
5365
  justify-content: space-between;
5440
5366
  gap: 12px;
5441
5367
  padding: 11px 14px;
5442
- border-bottom: 1px solid rgba(255,255,255,0.04);
5368
+ border-bottom: 1px solid rgba(111,66,232,0.08);
5443
5369
  }
5444
5370
 
5445
5371
  .mcp-dropdown-item:last-child {
@@ -5796,8 +5722,8 @@ body.lattice-ref-graph {
5796
5722
  }
5797
5723
 
5798
5724
  .empty-chip {
5799
- border: 1px solid rgba(34,211,160,0.12);
5800
- background: linear-gradient(135deg, rgba(34,211,160,0.06), rgba(129,140,248,0.04));
5725
+ border: 1px solid rgba(111,66,232,0.12);
5726
+ background: linear-gradient(135deg, rgba(111,66,232,0.06), rgba(129,140,248,0.04));
5801
5727
  border-radius: var(--radius);
5802
5728
  padding: 14px;
5803
5729
  font-size: 12.5px;
@@ -5806,11 +5732,11 @@ body.lattice-ref-graph {
5806
5732
  color: var(--muted);
5807
5733
  }
5808
5734
  .empty-chip:hover {
5809
- border-color: rgba(34,211,160,0.3);
5810
- background: linear-gradient(135deg, rgba(34,211,160,0.1), rgba(129,140,248,0.07));
5735
+ border-color: rgba(111,66,232,0.24);
5736
+ background: linear-gradient(135deg, rgba(111,66,232,0.10), rgba(129,140,248,0.07));
5811
5737
  color: var(--text);
5812
5738
  transform: translateY(-2px);
5813
- box-shadow: 0 8px 24px rgba(34,211,160,0.1);
5739
+ box-shadow: 0 8px 24px rgba(111,66,232,0.10);
5814
5740
  }
5815
5741
  .empty-chip-icon {
5816
5742
  font-size: 22px;
@@ -5900,7 +5826,7 @@ body.lattice-ref-graph {
5900
5826
  transform: translateX(-100%);
5901
5827
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
5902
5828
  border-right: 1px solid var(--border-strong);
5903
- box-shadow: 4px 0 32px rgba(0,0,0,0.5);
5829
+ box-shadow: 4px 0 32px rgba(88,72,150,0.18);
5904
5830
  background: #141715;
5905
5831
  backdrop-filter: none;
5906
5832
  -webkit-backdrop-filter: none;
@@ -6259,13 +6185,13 @@ body.lattice-ref-graph {
6259
6185
  }
6260
6186
  .empty-icon {
6261
6187
  width: 72px; height: 72px;
6262
- background: linear-gradient(135deg, rgba(34,211,160,0.15), rgba(129,140,248,0.12));
6263
- border: 1px solid rgba(34,211,160,0.15);
6188
+ background: linear-gradient(135deg, rgba(111,66,232,0.14), rgba(129,140,248,0.12));
6189
+ border: 1px solid rgba(111,66,232,0.14);
6264
6190
  border-radius: 20px;
6265
6191
  display: flex; align-items: center; justify-content: center;
6266
6192
  font-size: 32px;
6267
6193
  color: var(--accent);
6268
- box-shadow: 0 0 30px rgba(34,211,160,0.12);
6194
+ box-shadow: 0 0 30px rgba(111,66,232,0.12);
6269
6195
  }
6270
6196
  .empty-title {
6271
6197
  font-size: 20px; font-weight: 800;
@@ -6279,18 +6205,18 @@ body.lattice-ref-graph {
6279
6205
 
6280
6206
  /* ── 파일 다운로드 카드 개선 ── */
6281
6207
  .file-download-card {
6282
- border: 1px solid rgba(34,211,160,0.18) !important;
6283
- background: linear-gradient(135deg, rgba(34,211,160,0.07), rgba(129,140,248,0.04)) !important;
6208
+ border: 1px solid rgba(111,66,232,0.16) !important;
6209
+ background: linear-gradient(135deg, rgba(111,66,232,0.07), rgba(129,140,248,0.04)) !important;
6284
6210
  border-radius: var(--radius) !important;
6285
- box-shadow: 0 4px 16px rgba(34,211,160,0.08) !important;
6211
+ box-shadow: 0 4px 16px rgba(111,66,232,0.08) !important;
6286
6212
  }
6287
6213
  .file-dl-btn {
6288
- background: linear-gradient(135deg, rgba(34,211,160,0.15), rgba(129,140,248,0.08)) !important;
6289
- border-color: rgba(34,211,160,0.3) !important;
6214
+ background: linear-gradient(135deg, rgba(111,66,232,0.14), rgba(129,140,248,0.08)) !important;
6215
+ border-color: rgba(111,66,232,0.24) !important;
6290
6216
  }
6291
6217
  .file-dl-btn:hover {
6292
- background: linear-gradient(135deg, rgba(34,211,160,0.25), rgba(129,140,248,0.14)) !important;
6293
- box-shadow: 0 0 12px rgba(34,211,160,0.18) !important;
6218
+ background: linear-gradient(135deg, rgba(111,66,232,0.20), rgba(129,140,248,0.14)) !important;
6219
+ box-shadow: 0 0 12px rgba(111,66,232,0.16) !important;
6294
6220
  }
6295
6221
 
6296
6222
  /* ── setup wizard 버튼 ── */
@@ -6318,42 +6244,42 @@ body.lattice-ref-graph {
6318
6244
  /* ── MCP 드롭다운 개선 ── */
6319
6245
  .mcp-dropdown {
6320
6246
  background: rgba(10,14,20,0.97) !important;
6321
- border: 1px solid rgba(34,211,160,0.15) !important;
6247
+ border: 1px solid rgba(111,66,232,0.14) !important;
6322
6248
  border-radius: var(--radius) !important;
6323
- box-shadow: var(--shadow), 0 0 20px rgba(34,211,160,0.08) !important;
6249
+ box-shadow: var(--shadow), 0 0 20px rgba(111,66,232,0.08) !important;
6324
6250
  }
6325
6251
  .mcp-recommend-btn {
6326
- background: linear-gradient(135deg, rgba(34,211,160,0.1), rgba(129,140,248,0.07)) !important;
6327
- border: 1px solid rgba(34,211,160,0.2) !important;
6252
+ background: linear-gradient(135deg, rgba(111,66,232,0.10), rgba(129,140,248,0.07)) !important;
6253
+ border: 1px solid rgba(111,66,232,0.16) !important;
6328
6254
  border-radius: 999px !important;
6329
6255
  color: var(--accent) !important;
6330
6256
  }
6331
6257
 
6332
- /* Obsidian-inspired workspace refresh. Scoped to the signed-in app. */
6258
+ /* Lattice AI workspace light lavender theme. */
6333
6259
  .app-layout {
6334
- --bg: #282a36;
6335
- --surface: #222431;
6336
- --surface-2: #2f3142;
6337
- --surface-3: #3a3d52;
6338
- --accent: #a77cff;
6339
- --accent-2: #f1c86d;
6340
- --accent-3: #7db7ff;
6341
- --accent-pink: #ff7db3;
6342
- --accent-soft: rgba(167, 124, 255, 0.13);
6343
- --text: #f7f7f2;
6344
- --muted: #c4c8d8;
6345
- --faint: #8d93ab;
6346
- --border: rgba(218, 225, 255, 0.13);
6347
- --border-strong: rgba(218, 225, 255, 0.23);
6348
- --shadow: 0 22px 64px rgba(5, 7, 12, 0.34);
6349
- --shadow-sm: 0 8px 24px rgba(5, 7, 12, 0.24);
6350
- --glow-green: 0 0 30px rgba(167, 124, 255, 0.14);
6260
+ --bg: #f3ecff;
6261
+ --surface: #f6f0ff;
6262
+ --surface-2: #efe8ff;
6263
+ --surface-3: #e8dfff;
6264
+ --accent: #6f42e8;
6265
+ --accent-2: #8b6cff;
6266
+ --accent-3: #a78fff;
6267
+ --accent-pink: #c084fc;
6268
+ --accent-soft: rgba(111, 66, 232, 0.12);
6269
+ --text: #14162c;
6270
+ --muted: #4a4668;
6271
+ --faint: #7a74a0;
6272
+ --border: rgba(111, 66, 232, 0.14);
6273
+ --border-strong: rgba(111, 66, 232, 0.26);
6274
+ --shadow: 0 18px 54px rgba(88, 72, 150, 0.15);
6275
+ --shadow-sm: 0 6px 20px rgba(88, 72, 150, 0.10);
6276
+ --glow-green: 0 0 30px rgba(111, 66, 232, 0.14);
6351
6277
  position: relative;
6352
6278
  isolation: isolate;
6353
6279
  background:
6354
- radial-gradient(circle at 48% 42%, rgba(125,183,255,0.09), transparent 34%),
6355
- linear-gradient(180deg, rgba(255,255,255,0.018), transparent 34%),
6356
- linear-gradient(135deg, #292b38 0%, #242632 52%, #2f3040 100%);
6280
+ radial-gradient(circle at 82% 12%, rgba(111,66,232,0.14), transparent 30%),
6281
+ radial-gradient(circle at 10% 80%, rgba(180,160,255,0.16), transparent 35%),
6282
+ linear-gradient(180deg, #f3ecff 0%, #efe8ff 52%, #f2ecff 100%);
6357
6283
  }
6358
6284
 
6359
6285
  .app-layout::before {
@@ -6363,12 +6289,12 @@ body.lattice-ref-graph {
6363
6289
  z-index: -1;
6364
6290
  pointer-events: none;
6365
6291
  background:
6366
- radial-gradient(circle, rgba(247,247,242,0.7) 1px, transparent 1.8px),
6367
- linear-gradient(rgba(157,177,255,0.13) 1px, transparent 1px),
6368
- linear-gradient(90deg, rgba(157,177,255,0.09) 1px, transparent 1px);
6292
+ radial-gradient(circle, rgba(111,66,232,0.18) 1px, transparent 1.8px),
6293
+ linear-gradient(rgba(111,66,232,0.06) 1px, transparent 1px),
6294
+ linear-gradient(90deg, rgba(111,66,232,0.04) 1px, transparent 1px);
6369
6295
  background-size: 76px 76px, 48px 48px, 48px 48px;
6370
6296
  background-position: 18px 22px, 0 0, 0 0;
6371
- mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.09));
6297
+ mask-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.03));
6372
6298
  }
6373
6299
 
6374
6300
  .app-layout::after {
@@ -6583,9 +6509,9 @@ body.lattice-ref-graph {
6583
6509
  }
6584
6510
 
6585
6511
  .app-layout .send-btn {
6586
- background: #f7f7f2;
6587
- color: #242632;
6588
- box-shadow: 0 8px 20px rgba(0,0,0,0.24), 0 0 22px rgba(247,247,242,0.12);
6512
+ background: linear-gradient(135deg, #6f42e8, #7b61ff);
6513
+ color: #fff;
6514
+ box-shadow: 0 8px 20px rgba(111,66,232,0.24);
6589
6515
  }
6590
6516
 
6591
6517
  .app-layout .send-btn:hover {