@clusterenvision/ui-scss 1.94.3

package/src/main.css

@@ -0,0 +1,3250 @@
+@charset "UTF-8";
+input,
+textarea,
+select {
+  transition: all 0.3s ease-in-out;
+}
+
+body {
+  font-family: var(--theme-font, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif); 
+  color: var(--theme-fg, #202124);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+button,
+input,
+textarea,
+select {
+  font-family: var(--theme-font, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);
+  color: var(--theme-fg, #202124);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+a {
+  color: var(--theme-accent, var(--theme-primary));
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+a:hover, a:focus {
+  color: var(--theme-primary);
+  text-decoration: underline;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+button {
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: var(--theme-radius, 6px);
+  cursor: pointer;
+  font-weight: 400;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  background-color: var(--theme-accent);
+  color: var(--theme-fg);
+}
+button:hover {
+  background-color: var(--theme-accent);
+}
+
+input,
+textarea,
+select {
+  border: 1px solid var(--theme-muted, #ccc);
+  padding: 0.5rem;
+  border-radius: var(--theme-radius, 6px);
+  transition: all 0.3s ease;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--theme-accent);
+  outline: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+  color: var(--theme-fg);
+}
+
+.text-muted {
+  color: var(--theme-muted, #6c757d);
+}
+
+.text-accent {
+  color: var(--theme-accent);
+}
+
+.bg-primary {
+  background-color: var(--theme-primary);
+  color: var(--theme-fg);
+}
+
+.border {
+  border: 1px solid var(--theme-muted, #ccc);
+  border-radius: var(--theme-radius, 6px);
+}
+
+body::after {
+  content: "Theme: " attr(class);
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  background: var(--theme-bg);
+  color: var(--theme-fg);
+  padding: 0.5rem 1rem;
+  font-weight: bold;
+  z-index: 9999;
+}
+
+:root.theme-default {
+  --theme-bg: #ffffff;
+  --theme-fg: #202124;
+  --theme-accent: #1a73e8;
+  --theme-muted: #9aa0a6;
+  --theme-primary: #1a73e8;
+  --theme-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.theme-dark {
+  --theme-bg: #202124;
+  --theme-fg: #ffffff;
+  --theme-accent: #1a73e8;
+  --theme-muted: #f8f9fa;
+  --theme-primary: #1a73e8;
+}
+
+.theme-light {
+  --theme-bg: #f8f9fa;
+  --theme-fg: #202124;
+  --theme-accent: #1a73e8;
+  --theme-muted: #9e9e9e;
+  --theme-primary: #1a73e8;
+}
+
+.theme-solarized {
+  --theme-bg: #fdf6e3;
+  --theme-fg: #657b83;
+  --theme-accent: #268bd2;
+  --theme-muted: #93a1a1;
+  --theme-primary: #268bd2;
+}
+
+.theme-ocean {
+  --theme-bg: #e0f7fa;
+  --theme-fg: #006064;
+  --theme-accent: #00bcd4;
+  --theme-muted: #4dd0e1;
+  --theme-primary: #00bcd4;
+}
+
+.theme-forest {
+  --theme-bg: #e8f5e9;
+  --theme-fg: #1b5e20;
+  --theme-accent: #4caf50;
+  --theme-muted: #81c784;
+  --theme-primary: #4caf50;
+}
+
+.theme-red {
+  --theme-bg: #ffebee;
+  --theme-fg: #b71c1c;
+  --theme-accent: #ea4335;
+  --theme-muted: #e57373;
+  --theme-primary: #ea4335;
+}
+
+.theme-purple {
+  --theme-bg: #f3e5f5;
+  --theme-fg: #4a148c;
+  --theme-accent: #9c27b0;
+  --theme-muted: #ba68c8;
+  --theme-primary: #9c27b0;
+}
+
+.theme-high-contrast {
+  --theme-bg: #000000;
+  --theme-fg: #ffffff;
+  --theme-accent: #fdd835;
+  --theme-muted: ;
+  --theme-primary: #fdd835;
+}
+
+.theme-transparent {
+  --theme-bg: transparent;
+  --theme-fg: #202124;
+  --theme-accent: #1a73e8;
+  --theme-muted: rgba(0, 0, 0, 0.4);
+  --theme-primary: #1a73e8;
+}
+
+.theme-mac {
+  --theme-bg: #f5f5f7;
+  --theme-fg: #1d1d1f;
+  --theme-accent: #007aff;
+  --theme-muted: #8e8e93;
+  --theme-primary: #007aff;
+}
+
+.theme-orange {
+  --theme-bg: #fff3e0;
+  --theme-fg: #e65100;
+  --theme-accent: #ff9800;
+  --theme-muted: #ffb74d;
+  --theme-primary: #00bcd4;
+}
+
+.theme-mintwave {
+  --theme-bg: #e6f9f6;
+  --theme-fg: #003c3c;
+  --theme-accent: #00bfa5;
+  --theme-muted: #a7d8cc;
+  --theme-primary: #00bfa5;
+}
+
+.theme-skyfade {
+  --theme-bg: #f4f9ff;
+  --theme-fg: #1e2a38;
+  --theme-accent: #3399ff;
+  --theme-muted: #c8ddee;
+  --theme-primary: #3399ff;
+}
+
+.theme-nordwave {
+  --theme-bg: #eceff4;
+  --theme-fg: #2e3440;
+  --theme-accent: #5e81ac;
+  --theme-muted: #d8dee9;
+  --theme-primary: #5e81ac;
+}
+
+.theme-glassy-amber {
+  --theme-bg: rgba(255, 255, 255, 0.1);
+  --theme-fg: #ffffff;
+  background: rgba(255, 191, 0, 0.2);
+  border: 1px solid rgba(255, 215, 0, 0.3);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+  color: #000000;
+}
+.theme-glassy-amber * {
+  color: inherit;
+}
+
+.theme-glassy-blue {
+  --theme-bg: rgba(255, 255, 255, 0.05);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 120, 255, 0.3);
+  --theme-primary: #0078ff;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-green {
+  --theme-bg: rgba(255, 255, 255, 0.05);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(46, 204, 113, 0.3);
+  --theme-primary: #2ecc71;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-blue,
+.theme-glassy-orange {
+  --theme-bg: rgba(255, 165, 0, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(255, 165, 0, 0.4);
+  --theme-primary: #ffa500;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+  --theme-radius: 12px;
+}
+
+.theme-glassy-pink {
+  --theme-bg: rgba(255, 105, 180, 0.15);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(255, 105, 180, 0.35);
+  --theme-primary: #ff69b4;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-purple {
+  --theme-bg: rgba(255, 255, 255, 0.05);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(155, 89, 182, 0.3);
+  --theme-primary: #9b59b6;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.glassy-mac-dark {
+  --theme-bg: rgba(29, 29, 31, 0.6);
+  --theme-fg: #f5f5f5;
+  --theme-accent: rgba(0, 122, 255, 0.3);
+  --theme-primary: #007aff;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-silver {
+  --theme-bg: rgba(192, 192, 192, 0.15);
+  --theme-fg: #111111;
+  --theme-accent: rgba(192, 192, 192, 0.3);
+  --theme-primary: #c0c0c0;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-teal {
+  --theme-bg: rgba(0, 128, 128, 0.15);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 128, 128, 0.4);
+  --theme-primary: #008080;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-cyan {
+  --theme-bg: rgba(0, 255, 255, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(0, 255, 255, 0.35);
+  --theme-primary: #00ffff;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-gold {
+  --theme-bg: rgba(255, 215, 0, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(255, 215, 0, 0.3);
+  --theme-primary: #ffd700;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-aero-windows {
+  --theme-bg: rgba(180, 200, 255, 0.12);
+  --theme-fg: #1a1a1a;
+  --theme-accent: rgba(140, 180, 255, 0.3);
+  --theme-primary: #90caf9;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-aurora-sky {
+  --theme-bg: rgba(135, 206, 250, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(135, 206, 250, 0.4);
+  --theme-primary: #87cefa;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-frosted-silver {
+  --theme-bg: rgba(245, 245, 245, 0.15);
+  --theme-fg: #202124;
+  --theme-accent: rgba(230, 230, 230, 0.25);
+  --theme-primary: #f0f0f0;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-glass-white {
+  --theme-bg: rgba(255, 255, 255, 0.12);
+  --theme-fg: #000000;
+  --theme-accent: rgba(240, 240, 240, 0.4);
+  --theme-primary: #ffffff;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.glassy-ice-black {
+  --theme-bg: rgba(0, 0, 0, 0.4);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 0, 0, 0.3);
+  --theme-primary: #000000;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-blue {
+  --theme-bg: rgba(0, 120, 255, 0.15);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 120, 255, 0.4);
+  --theme-primary: #0078ff;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-neon-cyber {
+  --theme-bg: rgba(57, 255, 20, 0.12);
+  --theme-fg: #00ff9f;
+  --theme-accent: rgba(57, 255, 20, 0.4);
+  --theme-primary: #39ff14;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-rose-gold {
+  --theme-bg: rgba(255, 192, 203, 0.2);
+  --theme-fg: #661e43;
+  --theme-accent: rgba(255, 192, 203, 0.3);
+  --theme-primary: #b76e79;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-sakura-glass {
+  --theme-bg: rgba(255, 182, 193, 0.2);
+  --theme-fg: #6e0d25;
+  --theme-accent: rgba(255, 182, 193, 0.3);
+  --theme-primary: #ffb6c1;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-standard-dark {
+  --theme-bg: #121212;
+  --theme-fg: #f1f1f1;
+  --theme-primary: #bb86fc;
+  --theme-accent: #3700b3;
+  --theme-muted: #999;
+  --theme-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.theme-standard-default {
+  --theme-bg: #ffffff;
+  --theme-fg: #1a1a1a;
+  --theme-primary: #1a73e8;
+  --theme-accent: #4285f4;
+  --theme-muted: #9aa0a6;
+  --theme-radius: 8px;
+  --theme-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+}
+
+ol,
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+html {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  color: #202124;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+@media (min-width: 768px) {
+  h1 {
+    font-size: calc(2.5rem + (4rem - 2.5rem) * (100vw - 768px) / 672);
+  }
+}
+@media (min-width: 1440px) {
+  h1 {
+    font-size: 4rem;
+  }
+}
+
+h2 {
+  font-size: 2rem;
+}
+@media (min-width: 768px) {
+  h2 {
+    font-size: calc(2rem + (3rem - 2rem) * (100vw - 768px) / 672);
+  }
+}
+@media (min-width: 1440px) {
+  h2 {
+    font-size: 3rem;
+  }
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+@media (min-width: 768px) {
+  h3 {
+    font-size: calc(1.75rem + (2.25rem - 1.75rem) * (100vw - 768px) / 672);
+  }
+}
+@media (min-width: 1440px) {
+  h3 {
+    font-size: 2.25rem;
+  }
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-bottom: 1rem;
+  color: #202124;
+}
+
+small,
+.text--small {
+  font-size: 0.875rem;
+  color: #9aa0a6;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-primary {
+  color: #1a73e8;
+}
+
+.text-secondary {
+  color: #fbbc04;
+}
+
+.text-danger {
+  color: #ea4335;
+}
+
+.text-muted {
+  color: #9aa0a6;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  background-color: #ffffff;
+  color: #202124;
+}
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
+}
+input:disabled,
+textarea:disabled,
+select:disabled {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+}
+
+.form-control--error {
+  border-color: #ea4335;
+}
+.form-control--error:focus {
+  box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.2);
+}
+
+.form-error-msg {
+  margin-top: 0.25rem;
+  color: #ea4335;
+  font-size: 0.875rem;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-down {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.grid--2-cols {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid--3-cols {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid--4-cols {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.grid--6-cols {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+@media (max-width: 768px) {
+  .grid--responsive {
+    grid-template-columns: 1fr;
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #1a73e8;
+  color: #ffffff;
+  padding: 0.5rem 1.5rem;
+  height: 60px;
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+.header .header__logo {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+.header .header__nav {
+  display: flex;
+  gap: 1rem;
+}
+.header .header__nav a {
+  color: #ffffff;
+  text-decoration: none;
+}
+.header .header__nav a:hover {
+  text-decoration: underline;
+}
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    height: auto;
+    gap: 0.5rem;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #1a73e8;
+  color: #ffffff;
+  padding: 0.5rem 1.5rem;
+  height: 60px;
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+.header .header__logo {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+.header .header__nav {
+  display: flex;
+  gap: 1rem;
+}
+.header .header__nav a {
+  color: #ffffff;
+  text-decoration: none;
+}
+.header .header__nav a:hover {
+  text-decoration: underline;
+}
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    height: auto;
+    gap: 0.5rem;
+  }
+}
+
+.sidebar {
+  width: 260px;
+  background-color: #202124;
+  color: #ffffff;
+  height: 100vh;
+  padding: 1.5rem 1rem;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+}
+.sidebar .sidebar__brand {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+.sidebar .sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.sidebar .sidebar__nav a {
+  color: #ffffff;
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.sidebar .sidebar__nav a:hover, .sidebar .sidebar__nav a.active {
+  background-color: #1a73e8;
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.container--fluid {
+  max-width: 100%;
+}
+.container--narrow {
+  max-width: 720px;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.stack--sm {
+  gap: 0.5rem;
+}
+.stack--lg {
+  gap: 1.5rem;
+}
+.stack--xl {
+  gap: 2rem;
+}
+.stack--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.stack--centered {
+  align-items: center;
+  justify-content: center;
+}
+
+.section {
+  padding: 2rem 0;
+}
+.section--light {
+  background-color: #f8f9fa;
+}
+.section--dark {
+  background-color: #202124;
+  color: #ffffff;
+}
+.section--primary {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.section--bordered {
+  border-top: 1px solid #9aa0a6;
+  border-bottom: 1px solid #9aa0a6;
+}
+
+.m-0 {
+  margin: 0rem !important;
+}
+
+.mt-0 {
+  margin-top: 0rem !important;
+}
+
+.mb-0 {
+  margin-bottom: 0rem !important;
+}
+
+.ml-0 {
+  margin-left: 0rem !important;
+}
+
+.mr-0 {
+  margin-right: 0rem !important;
+}
+
+.p-0 {
+  padding: 0rem !important;
+}
+
+.pt-0 {
+  padding-top: 0rem !important;
+}
+
+.pb-0 {
+  padding-bottom: 0rem !important;
+}
+
+.pl-0 {
+  padding-left: 0rem !important;
+}
+
+.pr-0 {
+  padding-right: 0rem !important;
+}
+
+.m-xs {
+  margin: 0.25rem !important;
+}
+
+.mt-xs {
+  margin-top: 0.25rem !important;
+}
+
+.mb-xs {
+  margin-bottom: 0.25rem !important;
+}
+
+.ml-xs {
+  margin-left: 0.25rem !important;
+}
+
+.mr-xs {
+  margin-right: 0.25rem !important;
+}
+
+.p-xs {
+  padding: 0.25rem !important;
+}
+
+.pt-xs {
+  padding-top: 0.25rem !important;
+}
+
+.pb-xs {
+  padding-bottom: 0.25rem !important;
+}
+
+.pl-xs {
+  padding-left: 0.25rem !important;
+}
+
+.pr-xs {
+  padding-right: 0.25rem !important;
+}
+
+.m-sm {
+  margin: 0.5rem !important;
+}
+
+.mt-sm {
+  margin-top: 0.5rem !important;
+}
+
+.mb-sm {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-sm {
+  margin-left: 0.5rem !important;
+}
+
+.mr-sm {
+  margin-right: 0.5rem !important;
+}
+
+.p-sm {
+  padding: 0.5rem !important;
+}
+
+.pt-sm {
+  padding-top: 0.5rem !important;
+}
+
+.pb-sm {
+  padding-bottom: 0.5rem !important;
+}
+
+.pl-sm {
+  padding-left: 0.5rem !important;
+}
+
+.pr-sm {
+  padding-right: 0.5rem !important;
+}
+
+.m-md {
+  margin: 1rem !important;
+}
+
+.mt-md {
+  margin-top: 1rem !important;
+}
+
+.mb-md {
+  margin-bottom: 1rem !important;
+}
+
+.ml-md {
+  margin-left: 1rem !important;
+}
+
+.mr-md {
+  margin-right: 1rem !important;
+}
+
+.p-md {
+  padding: 1rem !important;
+}
+
+.pt-md {
+  padding-top: 1rem !important;
+}
+
+.pb-md {
+  padding-bottom: 1rem !important;
+}
+
+.pl-md {
+  padding-left: 1rem !important;
+}
+
+.pr-md {
+  padding-right: 1rem !important;
+}
+
+.m-lg {
+  margin: 1.5rem !important;
+}
+
+.mt-lg {
+  margin-top: 1.5rem !important;
+}
+
+.mb-lg {
+  margin-bottom: 1.5rem !important;
+}
+
+.ml-lg {
+  margin-left: 1.5rem !important;
+}
+
+.mr-lg {
+  margin-right: 1.5rem !important;
+}
+
+.p-lg {
+  padding: 1.5rem !important;
+}
+
+.pt-lg {
+  padding-top: 1.5rem !important;
+}
+
+.pb-lg {
+  padding-bottom: 1.5rem !important;
+}
+
+.pl-lg {
+  padding-left: 1.5rem !important;
+}
+
+.pr-lg {
+  padding-right: 1.5rem !important;
+}
+
+.m-xl {
+  margin: 2rem !important;
+}
+
+.mt-xl {
+  margin-top: 2rem !important;
+}
+
+.mb-xl {
+  margin-bottom: 2rem !important;
+}
+
+.ml-xl {
+  margin-left: 2rem !important;
+}
+
+.mr-xl {
+  margin-right: 2rem !important;
+}
+
+.p-xl {
+  padding: 2rem !important;
+}
+
+.pt-xl {
+  padding-top: 2rem !important;
+}
+
+.pb-xl {
+  padding-bottom: 2rem !important;
+}
+
+.pl-xl {
+  padding-left: 2rem !important;
+}
+
+.pr-xl {
+  padding-right: 2rem !important;
+}
+
+.m-xxl {
+  margin: 3rem !important;
+}
+
+.mt-xxl {
+  margin-top: 3rem !important;
+}
+
+.mb-xxl {
+  margin-bottom: 3rem !important;
+}
+
+.ml-xxl {
+  margin-left: 3rem !important;
+}
+
+.mr-xxl {
+  margin-right: 3rem !important;
+}
+
+.p-xxl {
+  padding: 3rem !important;
+}
+
+.pt-xxl {
+  padding-top: 3rem !important;
+}
+
+.pb-xxl {
+  padding-bottom: 3rem !important;
+}
+
+.pl-xxl {
+  padding-left: 3rem !important;
+}
+
+.pr-xxl {
+  padding-right: 3rem !important;
+}
+
+.m-xxxl {
+  margin: 4rem !important;
+}
+
+.mt-xxxl {
+  margin-top: 4rem !important;
+}
+
+.mb-xxxl {
+  margin-bottom: 4rem !important;
+}
+
+.ml-xxxl {
+  margin-left: 4rem !important;
+}
+
+.mr-xxxl {
+  margin-right: 4rem !important;
+}
+
+.p-xxxl {
+  padding: 4rem !important;
+}
+
+.pt-xxxl {
+  padding-top: 4rem !important;
+}
+
+.pb-xxxl {
+  padding-bottom: 4rem !important;
+}
+
+.pl-xxxl {
+  padding-left: 4rem !important;
+}
+
+.pr-xxxl {
+  padding-right: 4rem !important;
+}
+
+.flex {
+  display: flex !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between !important;
+}
+
+.align-center {
+  align-items: center !important;
+}
+
+.wrap {
+  flex-wrap: wrap !important;
+}
+
+.block {
+  display: block !important;
+}
+
+.inline {
+  display: inline !important;
+}
+
+.inline-block {
+  display: inline-block !important;
+}
+
+.none {
+  display: none !important;
+}
+
+@media (min-width: 768px) {
+  .sm-block {
+    display: block !important;
+  }
+  .sm-none {
+    display: none !important;
+  }
+}
+.relative {
+  position: relative !important;
+}
+
+.absolute {
+  position: absolute !important;
+}
+
+.fixed {
+  position: fixed !important;
+}
+
+.sticky {
+  position: sticky !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-primary {
+  color: #1a73e8 !important;
+}
+
+.text-success {
+  color: #34a853 !important;
+}
+
+.text-danger {
+  color: #ea4335 !important;
+}
+
+.text-muted {
+  color: #9aa0a6 !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+.sr-only {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
+*:focus {
+  outline: 2px solid #1a73e8;
+  outline-offset: 2px;
+}
+
+.theme-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.theme-switcher label {
+  font-weight: 500;
+  color: var(--theme-fg);
+}
+.theme-switcher button,
+.theme-switcher select {
+  background-color: #f8f9fa;
+  border: 1px solid #9aa0a6;
+  padding: 0.25rem;
+  font-family: inherit;
+  font-size: 1rem;
+  color: var(--theme-fg);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+.theme-switcher button:hover,
+.theme-switcher select:hover {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.theme-switcher select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.25rem center;
+  background-size: 1rem;
+  padding-right: 2rem;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  color: #202124;
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  line-height: 1.5;
+}
+.input:focus {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
+}
+.input:disabled {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+}
+.input--sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+.input--lg {
+  padding: 1rem 1.5rem;
+  font-size: 1.125rem;
+}
+.input--error {
+  border-color: #ea4335;
+}
+.input--error:focus {
+  box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.2);
+}
+.input--success {
+  border-color: #34a853;
+}
+.input--success:focus {
+  box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.2);
+}
+.input--rounded {
+  border-radius: 9999px;
+}
+.input--icon-left, .input--icon-right {
+  position: relative;
+  padding-left: 2.5rem;
+}
+.input--icon-left::before, .input--icon-right::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.5rem;
+  width: 1rem;
+  height: 1rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+}
+
+.textarea {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  color: #202124;
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  resize: vertical;
+  min-height: 100px;
+}
+.textarea:focus {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
+}
+.textarea:disabled {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+}
+.textarea--error {
+  border-color: #ea4335;
+}
+.textarea--error:focus {
+  box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.2);
+}
+
+.select {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: #ffffff;
+  color: #202124;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" width="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1rem;
+}
+.select:focus {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
+}
+.select:disabled {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+}
+.select--error {
+  border-color: #ea4335;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+}
+.checkbox input[type=checkbox] {
+  width: 1rem;
+  height: 1rem;
+  accent-color: #1a73e8;
+  cursor: pointer;
+}
+.checkbox--disabled {
+  color: #9aa0a6;
+  cursor: not-allowed;
+}
+.checkbox--disabled input[type=checkbox] {
+  cursor: not-allowed;
+}
+
+.radio {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+}
+.radio input[type=radio] {
+  width: 1rem;
+  height: 1rem;
+  accent-color: #1a73e8;
+  cursor: pointer;
+}
+.radio--disabled {
+  color: #9aa0a6;
+  cursor: not-allowed;
+}
+.radio--disabled input[type=radio] {
+  cursor: not-allowed;
+}
+
+.toggle {
+  position: relative;
+  width: 2.5rem;
+  height: 1.4rem;
+}
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle .slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #9aa0a6;
+  border-radius: 9999px;
+  transition: 0.4s;
+  cursor: pointer;
+}
+.toggle .slider::before {
+  content: "";
+  position: absolute;
+  height: 1rem;
+  width: 1rem;
+  left: 4px;
+  bottom: 4px;
+  background-color: #ffffff;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+.toggle input:checked + .slider {
+  background-color: #1a73e8;
+}
+.toggle input:checked + .slider::before {
+  transform: translateX(1.1rem);
+}
+
+.range-slider {
+  width: 100%;
+  max-width: 300px;
+  margin: 1rem 0;
+}
+.range-slider input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  outline: none;
+  transition: background 0.3s;
+}
+.range-slider input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: #1a73e8;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: background 0.3s;
+}
+.range-slider input[type=range]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: #1a73e8;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.range-slider input[type=range]:hover::-webkit-slider-thumb {
+  background: rgb(18.8928571429, 92, 188.1071428571);
+}
+
+.file-upload {
+  position: relative;
+  display: inline-block;
+}
+.file-upload input[type=file] {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  cursor: pointer;
+}
+.file-upload .label {
+  display: inline-block;
+  background-color: #1a73e8;
+  color: #ffffff;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  z-index: 1;
+  position: relative;
+}
+.file-upload .label:hover {
+  background-color: rgb(21.2202380952, 103.3333333333, 211.2797619048);
+}
+
+.date-picker {
+  width: 100%;
+}
+.date-picker input[type=date],
+.date-picker input[type=datetime-local] {
+  padding: 0.5rem 1rem;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  background-color: #ffffff;
+  color: #202124;
+  width: 100%;
+}
+.date-picker input[type=date]:focus,
+.date-picker input[type=datetime-local]:focus {
+  border-color: #1a73e8;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+.form-group label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: bold;
+  color: #202124;
+}
+.form-group .form-description {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: #9aa0a6;
+}
+.form-group .form-error {
+  color: #ea4335;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.button {
+  background-color: var(--theme-primary);
+  color: var(--theme-fg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.2;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid transparent;
+  outline: none;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  width: fit-content;
+  max-width: 100%;
+  min-width: auto;
+  white-space: nowrap;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.button--primary {
+  background-color: var(--theme-primary);
+  color: var(--theme-fg);
+  border-color: var(--theme-primary);
+}
+.button--primary:hover {
+  background-color: rgba(0, 122, 255, 0.85);
+}
+.button--secondary {
+  background-color: #fbbc04;
+  color: #202124;
+}
+.button--secondary:hover {
+  background-color: rgb(215.86, 161.68, 3.44);
+}
+.button--glass {
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: var(--theme-fg);
+}
+.button--success {
+  background-color: #34a853;
+  color: #ffffff;
+}
+.button--success:hover {
+  background-color: rgb(43.5618181818, 140.7381818182, 69.5313636364);
+}
+.button--danger {
+  background-color: #ea4335;
+  color: #ffffff;
+}
+.button--danger:hover {
+  background-color: rgb(227.6349775785, 39.4417040359, 23.6650224215);
+}
+.button--warning {
+  background-color: #f9ab00;
+  color: #000000;
+}
+.button--warning:hover {
+  background-color: rgb(213.3, 146.4831325301, 0);
+}
+.button--info {
+  background-color: #4285f4;
+  color: #ffffff;
+}
+.button--info:hover {
+  background-color: rgb(32.2635, 111.223, 242.0365);
+}
+.button--light {
+  background-color: #f8f9fa;
+  color: #202124;
+}
+.button--light:hover {
+  background-color: rgb(218.25, 223.5, 228.75);
+}
+.button--dark {
+  background-color: #202124;
+  color: #ffffff;
+}
+.button--dark:hover {
+  background-color: rgb(44, 45.375, 49.5);
+}
+.button.--outline {
+  background-color: transparent;
+  border: 1px solid #1a73e8;
+  color: #1a73e8;
+}
+.button.--outline:hover {
+  background-color: rgba(26, 115, 232, 0.1);
+}
+.button.--ghost {
+  background: transparent;
+  color: #1a73e8;
+  border: none;
+}
+.button.--ghost:hover {
+  background-color: rgba(26, 115, 232, 0.05);
+}
+.button.--xs {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.25rem;
+  line-height: 1;
+}
+.button.--sm {
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  line-height: 1;
+  letter-spacing: -0.2px;
+}
+.button.--lg {
+  font-size: 1.125rem;
+  padding: 1rem 1.5rem;
+  line-height: 1.4;
+}
+.button.--xl {
+  font-size: 1.25rem;
+  padding: 1.5rem 2rem;
+  line-height: 1.5;
+}
+.button.--xxl {
+  font-size: 1.375rem;
+  padding: 1.5rem 3rem;
+  line-height: 1.5;
+}
+.button.--block {
+  display: flex;
+  width: 100%;
+}
+.button.--rounded {
+  border-radius: 8px;
+}
+.button.--pill {
+  border-radius: 9999px;
+}
+.button.--circle {
+  padding: 0.5rem;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  justify-content: center;
+}
+.button .button:focus-visible {
+  outline: 2px solid var(--theme-accent);
+  outline-offset: 2px;
+}
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 50%;
+  background-color: #f8f9fa;
+  color: #1a73e8;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.icon-button:hover {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.icon-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.icon-button--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1rem;
+}
+.icon-button--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.button-group .button {
+  border-radius: 0;
+  margin: 0;
+}
+.button-group .button:not(:last-child) {
+  border-right: 1px solid #9aa0a6;
+}
+.button-group--vertical {
+  flex-direction: column;
+}
+.button-group--vertical .button:not(:last-child) {
+  border-right: none;
+  border-bottom: 1px solid #9aa0a6;
+}
+.button-group--rounded .button:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.button-group--rounded .button:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  background-color: #1a73e8;
+  color: #ffffff;
+  z-index: 1020;
+}
+.navbar .navbar__brand {
+  font-weight: bold;
+  font-size: 1.25rem;
+  color: #ffffff;
+  text-decoration: none;
+}
+.navbar .navbar__links {
+  display: flex;
+  gap: 1rem;
+}
+.navbar .navbar__links a {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 500;
+}
+.navbar .navbar__links a:hover {
+  text-decoration: underline;
+}
+.navbar .navbar__menu-toggle {
+  display: none;
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  font-size: 1.5rem;
+}
+@media (min-width: 576px) {
+  .navbar .navbar__menu-toggle {
+    display: none;
+  }
+}
+@media (min-width: 576px) {
+  .navbar .navbar__links {
+    display: flex;
+  }
+}
+@media (max-width: 767px) {
+  .navbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .navbar .navbar__links {
+    display: none;
+    flex-direction: column;
+    width: 100%;
+  }
+  .navbar .navbar__links.open {
+    display: flex;
+  }
+  .navbar .navbar__links a {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+.sidebar {
+  width: 250px;
+  background-color: #202124;
+  color: #ffffff;
+  height: 100vh;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.sidebar .sidebar__header {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+.sidebar .sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.sidebar .sidebar__nav a {
+  color: #ffffff;
+  text-decoration: none;
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+.sidebar .sidebar__nav a:hover {
+  background-color: #1a73e8;
+}
+.sidebar .sidebar__nav a.active {
+  background-color: #1a73e8;
+  font-weight: bold;
+}
+
+.breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  gap: 0.25rem;
+  color: #9aa0a6;
+}
+.breadcrumbs a {
+  color: #1a73e8;
+  text-decoration: none;
+}
+.breadcrumbs a:hover {
+  text-decoration: underline;
+}
+.breadcrumbs .separator {
+  margin: 0 0.25rem;
+  color: #9aa0a6;
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 2px solid #9aa0a6;
+  overflow-x: auto;
+  gap: 1rem;
+}
+.tabs .tab {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  color: #202124;
+  transition: border-color 0.2s;
+}
+.tabs .tab.active {
+  border-color: #1a73e8;
+  color: #1a73e8;
+}
+.tabs .tab:hover {
+  border-color: #1a73e8;
+}
+
+.menu {
+  display: inline-block;
+  position: relative;
+}
+.menu .menu__button {
+  background-color: #f8f9fa;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid #9aa0a6;
+  color: #202124;
+}
+.menu .menu__button:hover {
+  background-color: #ffffff;
+}
+.menu .menu__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.25rem;
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  min-width: 200px;
+  z-index: 1000;
+  display: none;
+}
+.menu .menu__dropdown.open {
+  display: block;
+}
+.menu .menu__dropdown a {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #202124;
+  text-decoration: none;
+}
+.menu .menu__dropdown a:hover {
+  background-color: #f8f9fa;
+}
+
+.pagination {
+  display: flex;
+  list-style: none;
+  gap: 0.5rem;
+}
+.pagination .page-item {
+  display: inline-block;
+}
+.pagination .page-item a {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #9aa0a6;
+  color: #202124;
+  text-decoration: none;
+}
+.pagination .page-item a:hover {
+  background-color: #1a73e8;
+  color: #ffffff;
+  border-color: #1a73e8;
+}
+.pagination .page-item a.active {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+
+.card {
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 8px;
+  gap: 1rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 1.5rem;
+  transition: box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+}
+.card:hover {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.card__header {
+  font-weight: 600;
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
+}
+.card__body {
+  flex: 1;
+}
+.card__footer {
+  margin-top: 1rem;
+  text-align: right;
+}
+.card--hover {
+  cursor: pointer;
+}
+.card--hover:hover {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.card--borderless {
+  border: none;
+}
+.card--elevated {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  padding: 1.5rem;
+}
+.modal.hidden {
+  display: none !important;
+}
+.modal__content {
+  background-color: rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 8px;
+  width: 100%;
+  max-width: 600px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  animation: fade-in 0.3s ease-in-out;
+  color: #ffffff;
+}
+.modal__header {
+  padding: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  border-bottom: 1px solid #9aa0a6;
+}
+.modal__body {
+  padding: 1.5rem;
+}
+.modal__footer {
+  padding: 1rem;
+  text-align: right;
+  border-top: 1px solid #9aa0a6;
+}
+.modal__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #9aa0a6;
+  cursor: pointer;
+}
+.modal__close:hover {
+  color: #ea4335;
+}
+.modal .hidden {
+  display: none !important;
+}
+
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 300px;
+  max-width: 100%;
+  height: 100vh;
+  background-color: #ffffff;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  animation: slide-in 0.3s ease-in-out;
+}
+.drawer__header {
+  padding: 1rem;
+  font-weight: 600;
+  border-bottom: 1px solid #9aa0a6;
+}
+.drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+.drawer__footer {
+  padding: 1rem;
+  border-top: 1px solid #9aa0a6;
+  text-align: right;
+}
+
+.accordion {
+  border: 1px solid #9aa0a6;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.accordion__item {
+  border-bottom: 1px solid #9aa0a6;
+}
+.accordion__item:last-child {
+  border-bottom: none;
+}
+.accordion__header {
+  padding: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  background-color: #f8f9fa;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.accordion__header:hover {
+  background-color: #ffffff;
+}
+.accordion__body {
+  padding: 1rem;
+  display: none;
+}
+.accordion__body.open {
+  display: block;
+}
+
+.panel {
+  padding: 1.5rem;
+  border-left: 4px solid #1a73e8;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin-bottom: 1.5rem;
+}
+.panel--info {
+  border-color: #4285f4;
+}
+.panel--success {
+  border-color: #34a853;
+}
+.panel--warning {
+  border-color: #f9ab00;
+}
+.panel--danger {
+  border-color: #ea4335;
+}
+.panel__title {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.panel__content {
+  font-size: 0.95rem;
+}
+
+.toast {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  background-color: #202124;
+  color: #ffffff;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
+  z-index: 1080;
+  animation: fade-in 0.3s ease-in-out;
+  min-width: 250px;
+}
+.toast--success {
+  background-color: #34a853;
+}
+.toast--error {
+  background-color: #ea4335;
+}
+.toast--info {
+  background-color: #4285f4;
+}
+.toast__message {
+  font-size: 0.95rem;
+}
+.toast__close {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  background: none;
+  border: none;
+  color: #ffffff;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.toast__close:hover {
+  opacity: 0.7;
+}
+
+.tooltip {
+  position: relative;
+  cursor: help;
+}
+.tooltip__content {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(0.25rem);
+  background-color: #202124;
+  color: #ffffff;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  z-index: 1090;
+}
+.tooltip__content::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -6px;
+  border-width: 6px;
+  border-style: solid;
+  border-color: #202124 transparent transparent transparent;
+}
+.tooltip:hover .tooltip__content, .tooltip:focus-within .tooltip__content {
+  opacity: 1;
+}
+
+.popover {
+  position: relative;
+}
+.popover__trigger {
+  cursor: pointer;
+}
+.popover__content {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  min-width: 200px;
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1060;
+  display: none;
+}
+.popover__content.open {
+  display: block;
+}
+.popover--right .popover__content {
+  left: auto;
+  right: 0;
+}
+.popover--top .popover__content {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown__trigger {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  background-color: #ffffff;
+  color: #202124;
+}
+.dropdown__menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  min-width: 160px;
+  z-index: 1000;
+}
+.dropdown__menu.open {
+  display: block;
+}
+.dropdown__menu a {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #202124;
+  text-decoration: none;
+}
+.dropdown__menu a:hover {
+  background-color: #f8f9fa;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1050;
+}
+
+.loader {
+  width: 2rem;
+  height: 2rem;
+  border: 3px solid #f8f9fa;
+  border-top-color: #1a73e8;
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+  margin: auto;
+}
+.loader--sm {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.loader--lg {
+  width: 3rem;
+  height: 3rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.95rem;
+  background-color: #ffffff;
+}
+.table thead {
+  background-color: #f8f9fa;
+  border-bottom: 2px solid #9aa0a6;
+}
+.table th,
+.table td {
+  padding: 0.5rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #9aa0a6;
+}
+.table th {
+  font-weight: 600;
+  color: #202124;
+}
+.table tbody tr:hover {
+  background-color: rgba(26, 115, 232, 0.05);
+}
+.table--striped tbody tr:nth-child(odd) {
+  background-color: #f8f9fa;
+}
+.table--bordered, .table--bordered th, .table--bordered td {
+  border: 1px solid #9aa0a6;
+}
+.table--responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.data-table {
+  position: relative;
+}
+.data-table .data-table__toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.data-table .data-table__toolbar .search-input {
+  max-width: 300px;
+}
+.data-table .data-table__sort {
+  cursor: pointer;
+}
+.data-table .data-table__sort::after {
+  content: " ⇅";
+  font-size: 0.8rem;
+  color: #9aa0a6;
+}
+.data-table .data-table__sort.asc::after {
+  content: " ↑";
+}
+.data-table .data-table__sort.desc::after {
+  content: " ↓";
+}
+.data-table .data-table__status {
+  font-size: 0.875rem;
+  padding: 0.25rem;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+  color: #202124;
+}
+.data-table .data-table__status--active {
+  background-color: #34a853;
+  color: #ffffff;
+}
+.data-table .data-table__status--inactive {
+  background-color: #9aa0a6;
+}
+.data-table .data-table__status--error {
+  background-color: #ea4335;
+  color: #ffffff;
+}
+.data-table .data-table__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.list {
+  margin: 0;
+  padding-left: 1.5rem;
+  color: #202124;
+  line-height: 1.6;
+}
+.list--inline {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding-left: 0;
+}
+.list--unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+.list--bulleted {
+  list-style-type: disc;
+}
+.list--numbered {
+  list-style-type: decimal;
+}
+
+.tree-view {
+  list-style: none;
+  padding-left: 1rem;
+}
+.tree-view .tree-node {
+  margin-bottom: 0.25rem;
+  position: relative;
+}
+.tree-view .tree-node__label {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.tree-view .tree-node__label:hover {
+  background-color: #f8f9fa;
+}
+.tree-view .tree-node__label.expanded::before {
+  content: "▼";
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+.tree-view .tree-node__label::before {
+  content: "▶";
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+.tree-view .tree-node .tree-children {
+  display: none;
+  padding-left: 1rem;
+}
+.tree-view .tree-node.expanded .tree-children {
+  display: block;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: #9aa0a6;
+  color: #ffffff;
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+.avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.875rem;
+}
+.avatar--md {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1rem;
+}
+.avatar--lg {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.25rem;
+}
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.6em;
+  font-size: 0.75rem;
+  border-radius: 9999px;
+  font-weight: 600;
+  background-color: #9aa0a6;
+  color: #ffffff;
+  line-height: 1;
+}
+.badge--primary {
+  background-color: #1a73e8;
+}
+.badge--success {
+  background-color: #34a853;
+}
+.badge--danger {
+  background-color: #ea4335;
+}
+.badge--warning {
+  background-color: #f9ab00;
+}
+.badge--info {
+  background-color: #4285f4;
+}
+.badge--light {
+  background-color: #f8f9fa;
+  color: #202124;
+}
+.badge--dark {
+  background-color: #202124;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  background-color: #f8f9fa;
+  border-radius: 9999px;
+  color: #202124;
+  border: 1px solid #9aa0a6;
+}
+.chip .chip__remove {
+  font-size: 1rem;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: #9aa0a6;
+}
+.chip .chip__remove:hover {
+  color: #ea4335;
+}
+.chip--primary {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.chip--success {
+  background-color: #34a853;
+  color: #ffffff;
+}
+.chip--danger {
+  background-color: #ea4335;
+  color: #ffffff;
+}
+.chip--info {
+  background-color: #4285f4;
+  color: #ffffff;
+}
+
+.divider {
+  border: none;
+  border-top: 1px solid #9aa0a6;
+  margin: 1rem 0;
+}
+.divider--vertical {
+  border-top: none;
+  border-left: 1px solid #9aa0a6;
+  height: 100%;
+  margin: 0 1rem;
+}
+.divider--dashed {
+  border-style: dashed;
+}
+.divider--thick {
+  border-width: 2px;
+}
+
+.image {
+  max-width: 100%;
+  display: block;
+  height: auto;
+  border-radius: 4px;
+}
+.image--rounded {
+  border-radius: 8px;
+}
+.image--circle {
+  border-radius: 50%;
+}
+.image--shadow {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.image--cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.image--contain {
+  object-fit: contain;
+}
+
+.alert {
+  padding: 1rem;
+  border-radius: 4px;
+  border-left: 4px solid;
+  background-color: #f8f9fa;
+  color: #202124;
+  position: relative;
+  margin-bottom: 1rem;
+}
+.alert--success {
+  border-color: #34a853;
+  background-color: rgb(208.8, 240.7, 217.325);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.alert--danger {
+  border-color: #ea4335;
+  background-color: rgb(208.8, 240.7, 217.325);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.alert--warning {
+  border-color: #f9ab00;
+  background-color: rgb(189.3272727273, 234.6727272727, 201.4454545455);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.alert--info {
+  border-color: #4285f4;
+  background-color: rgb(208.8, 240.7, 217.325);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.alert__title {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+.alert__close {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  background: none;
+  border: none;
+  color: #9aa0a6;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.alert__close:hover {
+  color: #ea4335;
+}
+
+.message {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 4px;
+  color: #202124;
+}
+.message--success {
+  background-color: rgb(189.3272727273, 234.6727272727, 201.4454545455);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.message--error {
+  background-color: rgb(253.2107623318, 238.9820627803, 237.7892376682);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.message--info {
+  background-color: rgb(189.3272727273, 234.6727272727, 201.4454545455);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+
+.progress-bar {
+  width: 100%;
+  background-color: #f8f9fa;
+  height: 0.75rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.progress-bar__fill {
+  height: 100%;
+  width: 0%;
+  background-color: #1a73e8;
+  transition: width 0.3s ease-in-out;
+}
+.progress-bar__fill--success {
+  background-color: #34a853;
+}
+.progress-bar__fill--danger {
+  background-color: #ea4335;
+}
+.progress-bar__fill--warning {
+  background-color: #f9ab00;
+}
+
+.snackbar {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #202124;
+  color: #ffffff;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  font-size: 0.875rem;
+  z-index: 1080;
+  animation: fade-in 0.3s ease-in-out;
+}
+.snackbar--success {
+  background-color: #34a853;
+}
+.snackbar--error {
+  background-color: #ea4335;
+}
+.snackbar--info {
+  background-color: #4285f4;
+}
+.snackbar--warning {
+  background-color: #f9ab00;
+}
+
+.skeleton {
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  width: 100%;
+  height: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+.skeleton::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -50%;
+  height: 100%;
+  width: 50%;
+  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: shimmer 1.5s infinite;
+}
+.skeleton--sm {
+  height: 0.75rem;
+}
+.skeleton--lg {
+  height: 1.5rem;
+}
+.skeleton--circle {
+  border-radius: 50%;
+  height: 2rem;
+  width: 2rem;
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  background-color: #f8f9fa;
+}
+.carousel__track {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+  will-change: transform;
+}
+.carousel__slide {
+  min-width: 100%;
+  flex-shrink: 0;
+  padding: 1.5rem;
+}
+.carousel__controls {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  transform: translateY(-50%);
+  padding: 0 1rem;
+  pointer-events: none;
+}
+.carousel__controls button {
+  background: rgba(32, 33, 36, 0.4);
+  border: none;
+  border-radius: 50%;
+  color: #ffffff;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  pointer-events: auto;
+}
+.carousel__controls button:hover {
+  background: #1a73e8;
+}
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+.carousel__indicators .dot {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin: 0 0.25rem;
+  background-color: #9aa0a6;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.carousel__indicators .dot.active {
+  background-color: #1a73e8;
+}
+
+.steps {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+.steps .step {
+  flex: 1;
+  text-align: center;
+  position: relative;
+}
+.steps .step .circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: #9aa0a6;
+  color: #ffffff;
+  border-radius: 50%;
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+.steps .step .circle.active {
+  background-color: #1a73e8;
+}
+.steps .step .circle.completed {
+  background-color: #34a853;
+}
+.steps .step .label {
+  font-size: 0.875rem;
+  color: #202124;
+}
+.steps .step::after {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: -50%;
+  width: 100%;
+  height: 2px;
+  background-color: #9aa0a6;
+  z-index: -1;
+}
+.steps .step:last-child::after {
+  display: none;
+}
+
+.timeline {
+  position: relative;
+  padding-left: 2rem;
+  border-left: 2px solid #9aa0a6;
+}
+.timeline .timeline__event {
+  margin-bottom: 2rem;
+  position: relative;
+}
+.timeline .timeline__event::before {
+  content: "";
+  position: absolute;
+  left: 1.5rem;
+  top: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1a73e8;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+}
+.timeline .timeline__event .title {
+  font-weight: bold;
+  color: #202124;
+}
+.timeline .timeline__event .timestamp {
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+.timeline .timeline__event .content {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.25rem;
+  font-size: 0.85rem;
+}
+.calendar .day {
+  text-align: center;
+  padding: 0.5rem;
+  border-radius: 4px;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: 0.2s;
+}
+.calendar .day:hover {
+  background-color: #f8f9fa;
+}
+.calendar .day--today {
+  border: 1px solid #1a73e8;
+}
+.calendar .day--selected {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.calendar .day--disabled {
+  color: #9aa0a6;
+  pointer-events: none;
+}
+.calendar .weekdays {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  grid-column: span 7;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 0.25rem;
+}
+
+.rating {
+  display: inline-flex;
+  gap: 0.25rem;
+  font-size: 1.25rem;
+  color: #9aa0a6;
+  cursor: pointer;
+}
+.rating .star {
+  transition: color 0.2s;
+}
+.rating .star.filled {
+  color: #f9ab00;
+}
+.rating--sm {
+  font-size: 1rem;
+}
+.rating--lg {
+  font-size: 1.75rem;
+}
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.chat .chat__message {
+  max-width: 70%;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  background-color: #f8f9fa;
+  position: relative;
+  word-wrap: break-word;
+}
+.chat .chat__message--sent {
+  align-self: flex-end;
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.chat .chat__message--received {
+  align-self: flex-start;
+}
+.chat .chat__message .timestamp {
+  font-size: 0.7rem;
+  margin-top: 0.25rem;
+  opacity: 0.6;
+}
+
+.code-block {
+  background-color: #202124;
+  color: #ffffff;
+  font-family: "Fira Code", monospace;
+  font-size: 0.85rem;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+.code-block--light {
+  background-color: #f8f9fa;
+  color: #202124;
+}
+.code-block code {
+  white-space: pre;
+}
+
+.chart-wrapper {
+  background-color: #ffffff;
+  padding: 1rem;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  border: 1px solid #9aa0a6;
+  margin-bottom: 1.5rem;
+}
+.chart-wrapper--bar canvas, .chart-wrapper--line canvas, .chart-wrapper--pie canvas, .chart-wrapper--radar canvas {
+  width: 100% !important;
+  height: 280px !important;
+}
+.chart-wrapper__title {
+  font-weight: bold;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+  color: #202124;
+}
+
+.editor {
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  background-color: #ffffff;
+  padding: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 250px;
+}
+.editor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  border-bottom: 1px solid #9aa0a6;
+  padding-bottom: 0.25rem;
+}
+.editor__toolbar button {
+  background-color: #f8f9fa;
+  border: 1px solid #dadce0;
+  padding: 0.25rem 0.5rem;
+  border-radius: 2px;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.editor__toolbar button:hover {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.editor__toolbar button.active {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.editor__content {
+  flex: 1;
+  min-height: 160px;
+  padding: 0.5rem;
+  border-radius: 2px;
+  border: none;
+  outline: none;
+  color: #202124;
+  background: #ffffff;
+  font-size: 1rem;
+}
+.editor__content p {
+  margin-bottom: 0.5rem;
+}
+.editor__content h1, .editor__content h2, .editor__content h3 {
+  margin: 0.5rem 0;
+  font-weight: bold;
+}
+.editor__content ul, .editor__content ol {
+  padding-left: 1rem;
+  margin: 0.5rem 0;
+}
+.editor__content blockquote {
+  border-left: 4px solid #1a73e8;
+  padding-left: 0.5rem;
+  color: #9aa0a6;
+  margin: 0.5rem 0;
+}
+.editor__content pre {
+  font-family: monospace;
+  background: #202124;
+  color: #ffffff;
+  padding: 0.5rem;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+.editor__content code {
+  background: #f8f9fa;
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-size: 0.9rem;
+}
+.editor__content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 2px;
+  margin: 0.5rem 0;
+}
+.editor__content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+}
+.editor__content table th, .editor__content table td {
+  border: 1px solid #dadce0;
+  padding: 0.25rem;
+  text-align: left;
+}
+.editor__content table th {
+  background: #f1f3f4;
+}
+.editor__content a {
+  color: #1a73e8;
+  text-decoration: underline;
+}
+.editor__content a:hover {
+  color: rgb(18.8928571429, 92, 188.1071428571);
+}
+.editor--readonly {
+  pointer-events: none;
+  background-color: #f8f9fa;
+  border-style: dashed;
+}
+.editor--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/*# sourceMappingURL=main.css.map */