zenkit-css 1.0.7 → 1.0.8

package/dist/zenkit.css

@@ -19821,6 +19821,3728 @@ li .kbd {
   background-color: var(--gray-700);
 }
 
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: var(--text-sm);
+  color: var(--text);
+  background-color: var(--bg);
+}
+
+.table thead {
+  background-color: var(--gray-50);
+}
+
+.table th {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  text-align: left;
+  color: var(--text);
+  border-bottom: 2px solid var(--border);
+  white-space: nowrap;
+}
+
+.table td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+
+.table tbody tr {
+  transition: background-color 150ms ease-in-out;
+}
+
+.table-striped tbody tr:nth-child(odd) {
+  background-color: var(--gray-50);
+}
+
+.table-hover tbody tr:hover {
+  background-color: var(--gray-100);
+}
+
+.table-bordered {
+  border: 1px solid var(--border);
+}
+.table-bordered th,
+.table-bordered td {
+  border: 1px solid var(--border);
+}
+
+.table-borderless th,
+.table-borderless td {
+  border: none;
+}
+
+.table-sm th,
+.table-sm td {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-xs);
+}
+
+.table-lg th,
+.table-lg td {
+  padding: 1rem 1.25rem;
+  font-size: var(--text-base);
+}
+
+.table-center th,
+.table-center td {
+  text-align: center;
+}
+
+.table-right th,
+.table-right td {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.table-sortable th {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  padding-right: 1.75rem;
+}
+.table-sortable th:hover {
+  background-color: var(--gray-100);
+}
+.table-sortable th::after {
+  content: "";
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--gray-400);
+  opacity: 0.3;
+}
+
+.table-sortable th.sort-asc::after {
+  border-top: none;
+  border-bottom: 5px solid var(--primary);
+  opacity: 1;
+}
+
+.table-sortable th.sort-desc::after {
+  border-top: 5px solid var(--primary);
+  border-bottom: none;
+  opacity: 1;
+}
+
+.table-sortable th.sort-none::after {
+  opacity: 0.3;
+}
+
+.table-selectable tbody tr {
+  cursor: pointer;
+}
+
+.table-selectable tbody tr.selected {
+  background-color: var(--primary-50);
+}
+.table-selectable tbody tr.selected:hover {
+  background-color: var(--primary-100);
+}
+
+.table-select-col {
+  width: 3rem;
+  text-align: center;
+}
+
+.table-checkbox {
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+
+.table-expandable tr.expandable-row {
+  cursor: pointer;
+}
+
+.table-expand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  transition: transform 200ms ease-in-out;
+}
+.table-expand-icon::before {
+  content: "";
+  border: solid var(--text);
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 3px;
+  transform: rotate(-45deg);
+}
+
+.table-expandable tr.expanded .table-expand-icon::before {
+  transform: rotate(45deg);
+}
+
+.table-expanded-content {
+  background-color: var(--gray-50);
+}
+.table-expanded-content td {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.table-fixed-header {
+  position: relative;
+}
+.table-fixed-header thead {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--bg);
+  box-shadow: 0 1px 0 var(--border);
+}
+
+.table-fixed-col th:first-child,
+.table-fixed-col td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 5;
+  background-color: inherit;
+  box-shadow: 1px 0 0 var(--border);
+}
+
+.table-loading {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.table-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 20;
+}
+
+.table-empty td {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--text-muted);
+}
+
+.table-empty-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.5;
+}
+
+.table-empty-text {
+  font-size: var(--text-sm);
+}
+
+.table tfoot {
+  background-color: var(--gray-50);
+  font-weight: 500;
+}
+.table tfoot td {
+  border-top: 2px solid var(--border);
+  border-bottom: none;
+}
+
+.table caption {
+  padding: 0.75rem 1rem;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  text-align: left;
+  caption-side: bottom;
+}
+
+.table-caption-top caption {
+  caption-side: top;
+}
+
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 767px) {
+  .table-responsive-stack thead {
+    display: none;
+  }
+  .table-responsive-stack tbody tr {
+    display: block;
+    margin-bottom: 1rem;
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+  }
+  .table-responsive-stack td {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .table-responsive-stack td::before {
+    content: attr(data-label);
+    font-weight: 600;
+    margin-right: 1rem;
+  }
+  .table-responsive-stack td:last-child {
+    border-bottom: none;
+  }
+}
+.cell-nowrap {
+  white-space: nowrap;
+}
+
+.cell-truncate {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cell-wrap {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.table tr.row-success {
+  background-color: var(--success-50);
+}
+
+.table tr.row-warning {
+  background-color: var(--warning-50);
+}
+
+.table tr.row-danger {
+  background-color: var(--danger-50);
+}
+
+.table tr.row-info {
+  background-color: var(--info-50);
+}
+
+.table tr.row-muted {
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+
+.table-actions {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.table-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.table-action-btn:hover {
+  background-color: var(--gray-100);
+  color: var(--text);
+}
+.table-action-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-200);
+}
+
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: var(--gray-50);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 0.375rem 0.375rem 0 0;
+  gap: 1rem;
+}
+
+.table-toolbar-left,
+.table-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.table-search {
+  min-width: 200px;
+}
+
+.table-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.table-wrapper {
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+.table-wrapper .table {
+  border: none;
+  border-radius: 0;
+}
+
+.table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: var(--gray-50);
+  border-top: 1px solid var(--border);
+}
+
+.table-page-info {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.table-page-size {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: var(--text-sm);
+}
+
+.table-resizable th {
+  position: relative;
+}
+
+.table-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+}
+.table-resize-handle:hover {
+  background-color: var(--primary);
+}
+
+.table-draggable tbody tr {
+  cursor: grab;
+}
+
+.table-draggable tbody tr:active {
+  cursor: grabbing;
+}
+
+.table-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  color: var(--text-muted);
+  cursor: grab;
+}
+.table-drag-handle::before {
+  content: "⋮⋮";
+  font-size: 0.875rem;
+}
+
+.table-row-dragging {
+  opacity: 0.5;
+  background-color: var(--primary-50);
+}
+
+.table-row-drop-target {
+  box-shadow: 0 -2px 0 var(--primary);
+}
+
+.table-virtual-scroll {
+  position: relative;
+}
+
+.table-virtual-row {
+  position: absolute;
+  width: 100%;
+}
+
+[data-theme=dark] .table {
+  background-color: var(--gray-900);
+  color: var(--gray-100);
+}
+[data-theme=dark] .table thead {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .table th {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .table td {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .table-striped tbody tr:nth-child(odd) {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .table-hover tbody tr:hover {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .table-bordered {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .table-bordered th,
+[data-theme=dark] .table-bordered td {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .table-selectable tbody tr.selected {
+  background-color: rgba(79, 70, 229, 0.2);
+}
+[data-theme=dark] .table-selectable tbody tr.selected:hover {
+  background-color: rgba(79, 70, 229, 0.3);
+}
+[data-theme=dark] .table-expanded-content {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .table-fixed-header thead {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .table-loading-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+[data-theme=dark] .table tfoot {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .table-toolbar,
+[data-theme=dark] .table-pagination {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .table-action-btn:hover {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .table tr.row-success {
+  background-color: rgba(16, 185, 129, 0.15);
+}
+[data-theme=dark] .table tr.row-warning {
+  background-color: rgba(245, 158, 11, 0.15);
+}
+[data-theme=dark] .table tr.row-danger {
+  background-color: rgba(239, 68, 68, 0.15);
+}
+[data-theme=dark] .table tr.row-info {
+  background-color: rgba(6, 182, 212, 0.15);
+}
+
+:root {
+  --sidebar-width: 260px;
+  --sidebar-collapsed-width: 70px;
+  --sidebar-bg: var(--bg);
+  --sidebar-border: var(--border);
+  --sidebar-transition: 0.3s ease;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: var(--sidebar-width);
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border);
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  transition: width var(--sidebar-transition), transform var(--sidebar-transition);
+  overflow: hidden;
+}
+
+.sidebar-right {
+  left: auto;
+  right: 0;
+  border-right: none;
+  border-left: 1px solid var(--sidebar-border);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--sidebar-border);
+  min-height: 64px;
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-decoration: none;
+  color: var(--text);
+  font-weight: 600;
+  font-size: 1.125rem;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sidebar-logo-icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+}
+
+.sidebar-logo-text {
+  opacity: 1;
+  transition: opacity var(--sidebar-transition);
+}
+
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+  flex-shrink: 0;
+}
+.sidebar-toggle:hover {
+  background-color: var(--gray-100);
+  color: var(--text);
+}
+.sidebar-toggle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: transform var(--sidebar-transition);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0.5rem 0;
+}
+.sidebar-content::-webkit-scrollbar {
+  width: 4px;
+}
+.sidebar-content::-webkit-scrollbar-thumb {
+  background-color: var(--gray-300);
+  border-radius: 4px;
+}
+
+.sidebar-nav {
+  padding: 0 0.75rem;
+}
+
+.sidebar-nav-section {
+  margin-bottom: 1rem;
+}
+
+.sidebar-nav-title {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sidebar-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar-item {
+  margin-bottom: 2px;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 0.75rem;
+  color: var(--text);
+  text-decoration: none;
+  border-radius: 0.375rem;
+  transition: all 150ms ease-in-out;
+  white-space: nowrap;
+  overflow: hidden;
+  gap: 0.75rem;
+}
+.sidebar-link:hover {
+  background-color: var(--gray-100);
+  color: var(--text);
+}
+.sidebar-link:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-200);
+}
+
+.sidebar-link.active {
+  background-color: var(--primary-50);
+  color: var(--primary);
+  font-weight: 500;
+}
+.sidebar-link.active .sidebar-icon {
+  color: var(--primary);
+}
+
+.sidebar-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-muted);
+  transition: color 150ms ease-in-out;
+}
+
+.sidebar-text {
+  flex: 1;
+  opacity: 1;
+  transition: opacity var(--sidebar-transition);
+}
+
+.sidebar-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  background-color: var(--primary);
+  color: var(--white);
+  border-radius: 999px;
+}
+
+.sidebar-submenu-toggle {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  color: var(--text);
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+  gap: 0.75rem;
+}
+.sidebar-submenu-toggle:hover {
+  background-color: var(--gray-100);
+}
+
+.sidebar-submenu-arrow {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  margin-left: auto;
+  transition: transform var(--sidebar-transition);
+}
+.sidebar-submenu-arrow::before {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  border: solid var(--text-muted);
+  border-width: 0 2px 2px 0;
+  transform: rotate(-45deg);
+  margin: 4px auto;
+}
+
+.sidebar-item.open .sidebar-submenu-arrow {
+  transform: rotate(90deg);
+}
+
+.sidebar-submenu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--sidebar-transition);
+}
+
+.sidebar-item.open .sidebar-submenu {
+  max-height: 500px;
+}
+
+.sidebar-submenu .sidebar-link {
+  padding-left: 2.75rem;
+  font-size: var(--text-sm);
+}
+
+.sidebar-footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--sidebar-border);
+  margin-top: auto;
+}
+
+.sidebar-user {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  overflow: hidden;
+}
+
+.sidebar-avatar {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.sidebar-user-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.sidebar-user-name {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-user-email {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-collapsed {
+  width: var(--sidebar-collapsed-width);
+}
+.sidebar-collapsed .sidebar-logo-text,
+.sidebar-collapsed .sidebar-text,
+.sidebar-collapsed .sidebar-badge,
+.sidebar-collapsed .sidebar-nav-title,
+.sidebar-collapsed .sidebar-submenu-arrow,
+.sidebar-collapsed .sidebar-user-info {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+.sidebar-collapsed .sidebar-header {
+  justify-content: center;
+  padding: 1rem;
+}
+.sidebar-collapsed .sidebar-logo {
+  justify-content: center;
+}
+.sidebar-collapsed .sidebar-toggle {
+  display: none;
+}
+.sidebar-collapsed .sidebar-link,
+.sidebar-collapsed .sidebar-submenu-toggle {
+  justify-content: center;
+  padding: 0.75rem;
+}
+.sidebar-collapsed .sidebar-submenu {
+  max-height: 0 !important;
+  visibility: hidden;
+}
+.sidebar-collapsed .sidebar-footer {
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+}
+.sidebar-collapsed .sidebar-user {
+  justify-content: center;
+}
+.sidebar-collapsed .sidebar-link,
+.sidebar-collapsed .sidebar-submenu-toggle {
+  position: relative;
+}
+.sidebar-collapsed .sidebar-link::after,
+.sidebar-collapsed .sidebar-submenu-toggle::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.375rem 0.75rem;
+  background-color: var(--gray-900);
+  color: var(--white);
+  font-size: var(--text-xs);
+  border-radius: 0.375rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 150ms ease-in-out;
+  margin-left: 0.5rem;
+  z-index: 100;
+}
+.sidebar-collapsed .sidebar-link:hover::after,
+.sidebar-collapsed .sidebar-submenu-toggle:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.sidebar-collapsed .sidebar-toggle svg {
+  transform: rotate(180deg);
+}
+
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--sidebar-transition), visibility var(--sidebar-transition);
+}
+
+.sidebar-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (max-width: 991px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+  .sidebar-right {
+    transform: translateX(100%);
+  }
+  .sidebar.sidebar-open {
+    transform: translateX(0);
+  }
+  .sidebar-collapsed {
+    width: var(--sidebar-width);
+  }
+  .sidebar-collapsed .sidebar-logo-text,
+  .sidebar-collapsed .sidebar-text,
+  .sidebar-collapsed .sidebar-badge,
+  .sidebar-collapsed .sidebar-nav-title,
+  .sidebar-collapsed .sidebar-submenu-arrow,
+  .sidebar-collapsed .sidebar-user-info {
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+  }
+  .sidebar-collapsed .sidebar-header {
+    justify-content: space-between;
+  }
+  .sidebar-collapsed .sidebar-link,
+  .sidebar-collapsed .sidebar-submenu-toggle {
+    justify-content: flex-start;
+  }
+}
+.sidebar-mobile-toggle {
+  display: none;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  background-color: var(--primary);
+  color: var(--white);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 998;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+  transition: all 200ms ease-in-out;
+}
+.sidebar-mobile-toggle:hover {
+  background-color: var(--primary-600);
+  transform: scale(1.05);
+}
+.sidebar-mobile-toggle svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+@media (max-width: 991px) {
+  .sidebar-mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.main-with-sidebar {
+  margin-left: var(--sidebar-width);
+  transition: margin-left var(--sidebar-transition);
+}
+
+.main-with-sidebar-right {
+  margin-left: 0;
+  margin-right: var(--sidebar-width);
+  transition: margin-right var(--sidebar-transition);
+}
+
+.sidebar-collapsed ~ .main-with-sidebar,
+.sidebar-collapsed + .main-with-sidebar {
+  margin-left: var(--sidebar-collapsed-width);
+}
+
+.sidebar-collapsed ~ .main-with-sidebar-right,
+.sidebar-collapsed + .main-with-sidebar-right {
+  margin-right: var(--sidebar-collapsed-width);
+}
+
+@media (max-width: 991px) {
+  .main-with-sidebar,
+  .main-with-sidebar-right {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+.sidebar-dark {
+  --sidebar-bg: var(--gray-900);
+  --sidebar-border: var(--gray-700);
+  color: var(--gray-100);
+}
+.sidebar-dark .sidebar-logo {
+  color: var(--white);
+}
+.sidebar-dark .sidebar-toggle:hover {
+  background-color: var(--gray-800);
+  color: var(--gray-100);
+}
+.sidebar-dark .sidebar-nav-title {
+  color: var(--gray-500);
+}
+.sidebar-dark .sidebar-link {
+  color: var(--gray-300);
+}
+.sidebar-dark .sidebar-link:hover {
+  background-color: var(--gray-800);
+  color: var(--white);
+}
+.sidebar-dark .sidebar-link.active {
+  background-color: rgba(79, 70, 229, 0.2);
+  color: var(--primary-300);
+}
+.sidebar-dark .sidebar-icon {
+  color: var(--gray-500);
+}
+.sidebar-dark .sidebar-submenu-toggle {
+  color: var(--gray-300);
+}
+.sidebar-dark .sidebar-submenu-toggle:hover {
+  background-color: var(--gray-800);
+}
+.sidebar-dark .sidebar-submenu-arrow::before {
+  border-color: var(--gray-500);
+}
+.sidebar-dark.sidebar-collapsed .sidebar-link::after, .sidebar-dark.sidebar-collapsed .sidebar-submenu-toggle::after {
+  background-color: var(--gray-700);
+}
+.sidebar-dark .sidebar-content::-webkit-scrollbar-thumb {
+  background-color: var(--gray-600);
+}
+
+.sidebar-transparent {
+  background-color: transparent;
+  border: none;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.sidebar-bordered {
+  border: none;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-divider {
+  height: 1px;
+  background-color: var(--sidebar-border);
+  margin: 0.5rem 0.75rem;
+}
+
+.sidebar-compact {
+  --sidebar-width: 220px;
+  --sidebar-collapsed-width: 60px;
+}
+.sidebar-compact .sidebar-link,
+.sidebar-compact .sidebar-submenu-toggle {
+  padding: 0.5rem 0.625rem;
+  font-size: var(--text-sm);
+}
+.sidebar-compact .sidebar-icon {
+  width: 1rem;
+  height: 1rem;
+}
+.sidebar-compact .sidebar-header {
+  min-height: 56px;
+  padding: 0.75rem 1rem;
+}
+
+[data-theme=dark] .sidebar {
+  --sidebar-bg: var(--gray-900);
+  --sidebar-border: var(--gray-700);
+  color: var(--gray-100);
+}
+[data-theme=dark] .sidebar-logo {
+  color: var(--gray-100);
+}
+[data-theme=dark] .sidebar-toggle:hover {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .sidebar-link {
+  color: var(--gray-300);
+}
+[data-theme=dark] .sidebar-link:hover {
+  background-color: var(--gray-800);
+  color: var(--white);
+}
+[data-theme=dark] .sidebar-link.active {
+  background-color: rgba(79, 70, 229, 0.2);
+  color: var(--primary-300);
+}
+[data-theme=dark] .sidebar-link.active .sidebar-icon {
+  color: var(--primary-300);
+}
+[data-theme=dark] .sidebar-icon {
+  color: var(--gray-500);
+}
+[data-theme=dark] .sidebar-submenu-toggle:hover {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .sidebar-content::-webkit-scrollbar-thumb {
+  background-color: var(--gray-600);
+}
+
+.skeleton {
+  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: 0.375rem;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.skeleton-text {
+  height: 1rem;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+.skeleton-text:last-child {
+  width: 80%;
+  margin-bottom: 0;
+}
+
+.skeleton-title {
+  height: 1.5rem;
+  width: 60%;
+  margin-bottom: 1rem;
+}
+
+.skeleton-circle {
+  border-radius: 50%;
+}
+
+.skeleton-rect {
+  border-radius: 0.375rem;
+}
+
+.skeleton-rounded {
+  border-radius: 0.75rem;
+}
+
+.skeleton-xs {
+  height: 0.75rem;
+}
+
+.skeleton-sm {
+  height: 1rem;
+}
+
+.skeleton-md {
+  height: 1.5rem;
+}
+
+.skeleton-lg {
+  height: 2rem;
+}
+
+.skeleton-xl {
+  height: 3rem;
+}
+
+.skeleton-avatar-sm {
+  width: 2rem;
+  height: 2rem;
+}
+
+.skeleton-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.skeleton-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+}
+
+.skeleton-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+}
+
+.skeleton-card {
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+}
+
+.skeleton-card-image {
+  height: 200px;
+  margin-bottom: 1rem;
+  border-radius: 0.375rem;
+}
+
+.skeleton-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.skeleton-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-table {
+  width: 100%;
+}
+.skeleton-table .skeleton-row {
+  display: flex;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border);
+}
+.skeleton-table .skeleton-row:last-child {
+  border-bottom: none;
+}
+.skeleton-table .skeleton-cell {
+  flex: 1;
+  height: 1rem;
+}
+
+.skeleton-table-header .skeleton-row {
+  border-bottom: 2px solid var(--border);
+}
+.skeleton-table-header .skeleton-cell {
+  height: 1.25rem;
+}
+
+.skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.skeleton-list-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.skeleton-list-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.skeleton-paragraph {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.skeleton-paragraph .skeleton-text:nth-child(1) {
+  width: 100%;
+}
+.skeleton-paragraph .skeleton-text:nth-child(2) {
+  width: 95%;
+}
+.skeleton-paragraph .skeleton-text:nth-child(3) {
+  width: 90%;
+}
+.skeleton-paragraph .skeleton-text:nth-child(4) {
+  width: 85%;
+}
+.skeleton-paragraph .skeleton-text:last-child {
+  width: 60%;
+}
+
+.skeleton-button {
+  height: 2.5rem;
+  width: 6rem;
+  border-radius: 0.375rem;
+}
+
+.skeleton-button-sm {
+  height: 2rem;
+  width: 5rem;
+}
+
+.skeleton-button-lg {
+  height: 3rem;
+  width: 8rem;
+}
+
+.skeleton-button-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.skeleton-input {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: 0.375rem;
+}
+
+.skeleton-input-sm {
+  height: 2rem;
+}
+
+.skeleton-input-lg {
+  height: 3rem;
+}
+
+.skeleton-image {
+  width: 100%;
+  aspect-ratio: 16/9;
+  border-radius: 0.375rem;
+}
+
+.skeleton-image-square {
+  aspect-ratio: 1/1;
+}
+
+.skeleton-image-portrait {
+  aspect-ratio: 3/4;
+}
+
+.skeleton-wave {
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+}
+
+.skeleton-pulse {
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+  background: var(--gray-200);
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+.skeleton-static {
+  animation: none;
+  background: var(--gray-200);
+}
+
+.skeleton-wrapper {
+  position: relative;
+}
+
+.skeleton-content {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.skeleton-wrapper.loaded .skeleton {
+  display: none;
+}
+.skeleton-wrapper.loaded .skeleton-content {
+  opacity: 1;
+}
+
+.skeleton-inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.skeleton-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.skeleton-grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.skeleton-grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.skeleton-grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 767px) {
+  .skeleton-grid-2,
+  .skeleton-grid-3,
+  .skeleton-grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+[data-theme=dark] .skeleton {
+  background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
+  background-size: 200% 100%;
+}
+[data-theme=dark] .skeleton-pulse {
+  background: var(--gray-700);
+}
+[data-theme=dark] .skeleton-static {
+  background: var(--gray-700);
+}
+[data-theme=dark] .skeleton-card {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .skeleton-table .skeleton-row {
+  border-color: var(--gray-700);
+}
+
+.resizable {
+  position: relative;
+  display: flex;
+}
+
+.resizable-vertical {
+  flex-direction: column;
+}
+
+.resizable-horizontal {
+  flex-direction: row;
+}
+
+.resizable-panel {
+  position: relative;
+  overflow: auto;
+}
+
+.resizable-panel-content {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.resizable-handle {
+  position: relative;
+  flex-shrink: 0;
+  background-color: var(--border);
+  transition: background-color 150ms ease-in-out;
+  z-index: 10;
+}
+.resizable-handle:hover {
+  background-color: var(--primary);
+}
+.resizable-handle:active {
+  background-color: var(--primary-600);
+}
+
+.resizable-handle-horizontal {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+.resizable-handle-horizontal::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 4px;
+  background-color: var(--gray-400);
+  border-radius: 2px;
+}
+
+.resizable-handle-vertical {
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+}
+.resizable-handle-vertical::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 32px;
+  background-color: var(--gray-400);
+  border-radius: 2px;
+}
+
+.resizable-handle-minimal {
+  background-color: transparent;
+}
+.resizable-handle-minimal::before {
+  display: none;
+}
+.resizable-handle-minimal:hover {
+  background-color: var(--primary-100);
+}
+
+.resizable-handle-bordered {
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+}
+.resizable-handle-bordered.resizable-handle-horizontal {
+  height: 8px;
+  border-left: none;
+  border-right: none;
+}
+.resizable-handle-bordered.resizable-handle-vertical {
+  width: 8px;
+  border-top: none;
+  border-bottom: none;
+}
+
+.resizable-handle-dots::before {
+  background: transparent;
+}
+.resizable-handle-dots::after {
+  content: "···";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--gray-400);
+  font-size: 0.875rem;
+  letter-spacing: 2px;
+}
+.resizable-handle-dots.resizable-handle-vertical::after {
+  content: "⋮";
+  writing-mode: vertical-rl;
+  letter-spacing: 0;
+}
+
+.resizable-handle-sm.resizable-handle-horizontal {
+  height: 2px;
+}
+.resizable-handle-sm.resizable-handle-horizontal::before {
+  width: 24px;
+  height: 2px;
+}
+.resizable-handle-sm.resizable-handle-vertical {
+  width: 2px;
+}
+.resizable-handle-sm.resizable-handle-vertical::before {
+  width: 2px;
+  height: 24px;
+}
+
+.resizable-handle-lg.resizable-handle-horizontal {
+  height: 8px;
+}
+.resizable-handle-lg.resizable-handle-horizontal::before {
+  width: 48px;
+  height: 6px;
+}
+.resizable-handle-lg.resizable-handle-vertical {
+  width: 8px;
+}
+.resizable-handle-lg.resizable-handle-vertical::before {
+  width: 6px;
+  height: 48px;
+}
+
+.resizable-resizing {
+  user-select: none;
+  cursor: col-resize;
+}
+.resizable-resizing.resizable-vertical {
+  cursor: row-resize;
+}
+
+.resizable-resizing .resizable-handle {
+  background-color: var(--primary);
+}
+
+.resizable-panel-collapsed {
+  flex: 0 0 0 !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  overflow: hidden;
+}
+
+.resizable-collapse-btn {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 20;
+  transition: all 150ms ease-in-out;
+}
+.resizable-collapse-btn:hover {
+  background-color: var(--gray-100);
+  border-color: var(--primary);
+}
+.resizable-collapse-btn svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: transform 150ms ease-in-out;
+}
+
+.resizable-handle-vertical .resizable-collapse-btn {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.resizable-handle-horizontal .resizable-collapse-btn {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.resizable-handle.at-min,
+.resizable-handle.at-max {
+  background-color: var(--warning);
+  cursor: not-allowed;
+}
+
+.resizable-split-50-50 .resizable-panel {
+  flex: 1 1 50%;
+}
+
+.resizable-split-30-70 .resizable-panel:first-child {
+  flex: 0 0 30%;
+}
+.resizable-split-30-70 .resizable-panel:last-child {
+  flex: 1 1 70%;
+}
+
+.resizable-split-70-30 .resizable-panel:first-child {
+  flex: 1 1 70%;
+}
+.resizable-split-70-30 .resizable-panel:last-child {
+  flex: 0 0 30%;
+}
+
+.resizable-split-25-75 .resizable-panel:first-child {
+  flex: 0 0 25%;
+}
+.resizable-split-25-75 .resizable-panel:last-child {
+  flex: 1 1 75%;
+}
+
+.resizable-nested {
+  height: 100%;
+  width: 100%;
+}
+
+.resizable-box {
+  position: relative;
+  display: inline-block;
+}
+
+.resizable-box-handle {
+  position: absolute;
+  background-color: transparent;
+}
+.resizable-box-handle:hover {
+  background-color: var(--primary-100);
+}
+
+.resizable-box-handle-e {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: e-resize;
+}
+
+.resizable-box-handle-s {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  cursor: s-resize;
+}
+
+.resizable-box-handle-se {
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+}
+.resizable-box-handle-se::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--gray-400);
+  border-bottom: 2px solid var(--gray-400);
+}
+
+.resizable-box-handle-w {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: w-resize;
+}
+
+.resizable-box-handle-n {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  cursor: n-resize;
+}
+
+.resizable-box-handle-nw {
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nw-resize;
+}
+
+.resizable-box-handle-ne {
+  right: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  cursor: ne-resize;
+}
+
+.resizable-box-handle-sw {
+  left: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: sw-resize;
+}
+
+[data-theme=dark] .resizable-handle {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .resizable-handle:hover {
+  background-color: var(--primary);
+}
+[data-theme=dark] .resizable-handle::before {
+  background-color: var(--gray-500);
+}
+[data-theme=dark] .resizable-handle-bordered {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .resizable-handle-minimal:hover {
+  background-color: rgba(79, 70, 229, 0.2);
+}
+[data-theme=dark] .resizable-collapse-btn {
+  background-color: var(--gray-800);
+  border-color: var(--gray-600);
+}
+[data-theme=dark] .resizable-collapse-btn:hover {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .resizable-box-handle-se::after {
+  border-color: var(--gray-500);
+}
+
+.qrcode {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.qrcode-canvas {
+  display: block;
+  border-radius: 0.375rem;
+}
+
+.qrcode-wrapper {
+  position: relative;
+  display: inline-block;
+  padding: 1rem;
+  background-color: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+}
+
+.qrcode-sm .qrcode-canvas {
+  width: 100px;
+  height: 100px;
+}
+
+.qrcode-md .qrcode-canvas {
+  width: 150px;
+  height: 150px;
+}
+
+.qrcode-lg .qrcode-canvas {
+  width: 200px;
+  height: 200px;
+}
+
+.qrcode-xl .qrcode-canvas {
+  width: 256px;
+  height: 256px;
+}
+
+.qrcode-logo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--white);
+  padding: 4px;
+  border-radius: 0.375rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.qrcode-logo img {
+  display: block;
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.qrcode-lg .qrcode-logo img {
+  width: 40px;
+  height: 40px;
+}
+
+.qrcode-xl .qrcode-logo img {
+  width: 48px;
+  height: 48px;
+}
+
+.qrcode-label {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  text-align: center;
+  max-width: 200px;
+  word-break: break-all;
+}
+
+.qrcode-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.qrcode-download,
+.qrcode-copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  background-color: var(--gray-100);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.qrcode-download:hover,
+.qrcode-copy:hover {
+  background-color: var(--gray-200);
+  color: var(--text);
+}
+.qrcode-download svg,
+.qrcode-copy svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.qrcode-loading .qrcode-canvas {
+  opacity: 0.3;
+}
+.qrcode-loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--primary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.qrcode-expired .qrcode-canvas {
+  filter: blur(3px);
+  opacity: 0.5;
+}
+
+.qrcode-expired-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text);
+  font-size: var(--text-sm);
+  text-align: center;
+}
+
+.qrcode-refresh {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-xs);
+  color: var(--primary);
+  background: transparent;
+  border: 1px solid var(--primary);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.qrcode-refresh:hover {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+.qrcode-error .qrcode-canvas {
+  opacity: 0.3;
+}
+
+.qrcode-error-message {
+  color: var(--danger);
+  font-size: var(--text-sm);
+}
+
+.qrcode-bordered .qrcode-wrapper {
+  border: 2px solid var(--gray-300);
+}
+
+.qrcode-shadow .qrcode-wrapper {
+  border: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.qrcode-rounded .qrcode-wrapper {
+  border-radius: 1rem;
+}
+
+.qrcode-rounded .qrcode-canvas {
+  border-radius: 0.375rem;
+}
+
+.qrcode-primary .qrcode-wrapper {
+  border-color: var(--primary);
+}
+
+.qrcode-success .qrcode-wrapper {
+  border-color: var(--success);
+}
+
+.qrcode-warning .qrcode-wrapper {
+  border-color: var(--warning);
+}
+
+.qrcode-danger .qrcode-wrapper {
+  border-color: var(--danger);
+}
+
+.qrcode-card {
+  padding: 1.5rem;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  text-align: center;
+}
+
+.qrcode-card-title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.qrcode-card-description {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.qrcode-scan-line {
+  position: absolute;
+  left: 1rem;
+  right: 1rem;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--primary), transparent);
+  animation: qrcode-scan 2s ease-in-out infinite;
+}
+
+@keyframes qrcode-scan {
+  0%, 100% {
+    top: 1rem;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    top: calc(100% - 1rem);
+    opacity: 0;
+  }
+}
+[data-theme=dark] .qrcode-wrapper {
+  background-color: var(--white);
+  border-color: var(--gray-600);
+}
+[data-theme=dark] .qrcode-logo {
+  background-color: var(--white);
+}
+[data-theme=dark] .qrcode-download,
+[data-theme=dark] .qrcode-copy {
+  background-color: var(--gray-800);
+  border-color: var(--gray-600);
+  color: var(--gray-300);
+}
+[data-theme=dark] .qrcode-download:hover,
+[data-theme=dark] .qrcode-copy:hover {
+  background-color: var(--gray-700);
+  color: var(--gray-100);
+}
+[data-theme=dark] .qrcode-card {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+
+.masonry {
+  column-gap: 1rem;
+}
+
+.masonry-item {
+  break-inside: avoid;
+  margin-bottom: 1rem;
+}
+
+.masonry-1 {
+  column-count: 1;
+}
+
+.masonry-2 {
+  column-count: 2;
+}
+
+.masonry-3 {
+  column-count: 3;
+}
+
+.masonry-4 {
+  column-count: 4;
+}
+
+.masonry-5 {
+  column-count: 5;
+}
+
+.masonry-6 {
+  column-count: 6;
+}
+
+.masonry-gap-0 {
+  column-gap: 0;
+}
+.masonry-gap-0 .masonry-item {
+  margin-bottom: 0;
+}
+
+.masonry-gap-1 {
+  column-gap: 0.25rem;
+}
+.masonry-gap-1 .masonry-item {
+  margin-bottom: 0.25rem;
+}
+
+.masonry-gap-2 {
+  column-gap: 0.5rem;
+}
+.masonry-gap-2 .masonry-item {
+  margin-bottom: 0.5rem;
+}
+
+.masonry-gap-3 {
+  column-gap: 0.75rem;
+}
+.masonry-gap-3 .masonry-item {
+  margin-bottom: 0.75rem;
+}
+
+.masonry-gap-4 {
+  column-gap: 1rem;
+}
+.masonry-gap-4 .masonry-item {
+  margin-bottom: 1rem;
+}
+
+.masonry-gap-5 {
+  column-gap: 1.25rem;
+}
+.masonry-gap-5 .masonry-item {
+  margin-bottom: 1.25rem;
+}
+
+.masonry-gap-6 {
+  column-gap: 1.5rem;
+}
+.masonry-gap-6 .masonry-item {
+  margin-bottom: 1.5rem;
+}
+
+.masonry-gap-8 {
+  column-gap: 2rem;
+}
+.masonry-gap-8 .masonry-item {
+  margin-bottom: 2rem;
+}
+
+@media (max-width: 639px) {
+  .masonry-sm-1 {
+    column-count: 1;
+  }
+  .masonry-sm-2 {
+    column-count: 2;
+  }
+}
+@media (min-width: 640px) {
+  .sm\:masonry-1 {
+    column-count: 1;
+  }
+  .sm\:masonry-2 {
+    column-count: 2;
+  }
+  .sm\:masonry-3 {
+    column-count: 3;
+  }
+}
+@media (min-width: 768px) {
+  .md\:masonry-1 {
+    column-count: 1;
+  }
+  .md\:masonry-2 {
+    column-count: 2;
+  }
+  .md\:masonry-3 {
+    column-count: 3;
+  }
+  .md\:masonry-4 {
+    column-count: 4;
+  }
+}
+@media (min-width: 1024px) {
+  .lg\:masonry-1 {
+    column-count: 1;
+  }
+  .lg\:masonry-2 {
+    column-count: 2;
+  }
+  .lg\:masonry-3 {
+    column-count: 3;
+  }
+  .lg\:masonry-4 {
+    column-count: 4;
+  }
+  .lg\:masonry-5 {
+    column-count: 5;
+  }
+}
+@media (min-width: 1280px) {
+  .xl\:masonry-1 {
+    column-count: 1;
+  }
+  .xl\:masonry-2 {
+    column-count: 2;
+  }
+  .xl\:masonry-3 {
+    column-count: 3;
+  }
+  .xl\:masonry-4 {
+    column-count: 4;
+  }
+  .xl\:masonry-5 {
+    column-count: 5;
+  }
+  .xl\:masonry-6 {
+    column-count: 6;
+  }
+}
+@supports (grid-template-rows: masonry) {
+  .masonry-grid {
+    display: grid;
+    grid-template-rows: masonry;
+    gap: 1rem;
+  }
+  .masonry-grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .masonry-grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .masonry-grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.masonry-flex {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -0.5rem;
+}
+
+.masonry-flex-item {
+  padding: 0.5rem;
+}
+
+.masonry-flex-2 .masonry-flex-item {
+  width: 50%;
+}
+
+.masonry-flex-3 .masonry-flex-item {
+  width: 33.333%;
+}
+
+.masonry-flex-4 .masonry-flex-item {
+  width: 25%;
+}
+
+@media (max-width: 767px) {
+  .masonry-flex-item {
+    width: 100% !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .masonry-flex-3 .masonry-flex-item,
+  .masonry-flex-4 .masonry-flex-item {
+    width: 50%;
+  }
+}
+.masonry-card {
+  background-color: var(--bg);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
+}
+.masonry-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.masonry-card-image {
+  width: 100%;
+  display: block;
+}
+
+.masonry-card-content {
+  padding: 1rem;
+}
+
+.masonry-card-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.masonry-card-text {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.masonry-overlay {
+  position: relative;
+  overflow: hidden;
+}
+.masonry-overlay img {
+  width: 100%;
+  display: block;
+  transition: transform 200ms ease-in-out;
+}
+.masonry-overlay:hover img {
+  transform: scale(1.05);
+}
+
+.masonry-overlay-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
+  color: var(--white);
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.masonry-overlay:hover .masonry-overlay-content {
+  opacity: 1;
+}
+
+.masonry-loading .masonry-item {
+  animation: masonry-fade-in 0.3s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes masonry-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.masonry-item:nth-child(1) {
+  animation-delay: 0ms;
+}
+
+.masonry-item:nth-child(2) {
+  animation-delay: 50ms;
+}
+
+.masonry-item:nth-child(3) {
+  animation-delay: 100ms;
+}
+
+.masonry-item:nth-child(4) {
+  animation-delay: 150ms;
+}
+
+.masonry-item:nth-child(5) {
+  animation-delay: 200ms;
+}
+
+.masonry-item:nth-child(6) {
+  animation-delay: 250ms;
+}
+
+.masonry-item:nth-child(7) {
+  animation-delay: 300ms;
+}
+
+.masonry-item:nth-child(8) {
+  animation-delay: 350ms;
+}
+
+.masonry-item:nth-child(9) {
+  animation-delay: 400ms;
+}
+
+.masonry-item:nth-child(10) {
+  animation-delay: 450ms;
+}
+
+[data-theme=dark] .masonry-card {
+  background-color: var(--gray-800);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+[data-theme=dark] .masonry-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.splitter-horizontal {
+  flex-direction: row;
+}
+
+.splitter-vertical {
+  flex-direction: column;
+}
+
+.splitter-panel {
+  overflow: auto;
+  position: relative;
+}
+
+.splitter-panel-content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.splitter-gutter {
+  flex-shrink: 0;
+  background-color: var(--gray-100);
+  position: relative;
+  transition: background-color 150ms ease-in-out;
+}
+.splitter-gutter:hover {
+  background-color: var(--gray-200);
+}
+.splitter-gutter:active {
+  background-color: var(--primary-100);
+}
+
+.splitter-horizontal > .splitter-gutter {
+  width: 6px;
+  cursor: col-resize;
+}
+
+.splitter-vertical > .splitter-gutter {
+  height: 6px;
+  cursor: row-resize;
+}
+
+.splitter-gutter-handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.splitter-horizontal .splitter-gutter-handle {
+  width: 4px;
+  height: 24px;
+  border-radius: 2px;
+  background-color: var(--gray-400);
+}
+
+.splitter-vertical .splitter-gutter-handle {
+  width: 24px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: var(--gray-400);
+}
+
+.splitter-gutter-dots {
+  display: flex;
+  gap: 3px;
+}
+
+.splitter-horizontal .splitter-gutter-dots {
+  flex-direction: column;
+}
+
+.splitter-gutter-dots::before,
+.splitter-gutter-dots::after,
+.splitter-gutter-dots span {
+  width: 4px;
+  height: 4px;
+  background-color: var(--gray-400);
+  border-radius: 50%;
+  content: "";
+}
+
+.splitter-gutter-sm.splitter-horizontal > .splitter-gutter {
+  width: 4px;
+}
+.splitter-gutter-sm.splitter-vertical > .splitter-gutter {
+  height: 4px;
+}
+
+.splitter-gutter-lg.splitter-horizontal > .splitter-gutter {
+  width: 10px;
+}
+.splitter-gutter-lg.splitter-vertical > .splitter-gutter {
+  height: 10px;
+}
+
+.splitter-minimal .splitter-gutter {
+  background-color: transparent;
+}
+.splitter-minimal .splitter-gutter::after {
+  content: "";
+  position: absolute;
+  background-color: var(--border);
+  transition: background-color 150ms ease-in-out;
+}
+.splitter-minimal .splitter-gutter:hover::after {
+  background-color: var(--primary);
+}
+
+.splitter-minimal.splitter-horizontal .splitter-gutter::after {
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  transform: translateX(-50%);
+}
+
+.splitter-minimal.splitter-vertical .splitter-gutter::after {
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  transform: translateY(-50%);
+}
+
+.splitter-bordered .splitter-gutter {
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+}
+
+.splitter-bordered.splitter-horizontal .splitter-gutter {
+  border-top: none;
+  border-bottom: none;
+}
+
+.splitter-bordered.splitter-vertical .splitter-gutter {
+  border-left: none;
+  border-right: none;
+}
+
+.splitter-dragging {
+  user-select: none;
+}
+
+.splitter-dragging .splitter-gutter {
+  background-color: var(--primary-100);
+}
+
+.splitter-dragging .splitter-gutter-handle,
+.splitter-dragging .splitter-gutter-dots::before,
+.splitter-dragging .splitter-gutter-dots::after,
+.splitter-dragging .splitter-gutter-dots span {
+  background-color: var(--primary);
+}
+
+.splitter-disabled .splitter-gutter {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.splitter-collapse {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 150ms ease-in-out;
+}
+.splitter-collapse:hover {
+  background-color: var(--gray-100);
+  border-color: var(--primary);
+}
+.splitter-collapse svg {
+  width: 12px;
+  height: 12px;
+  color: var(--text-muted);
+  transition: transform 150ms ease-in-out;
+}
+
+.splitter-panel-collapsed + .splitter-gutter .splitter-collapse svg {
+  transform: rotate(180deg);
+}
+
+.splitter-panel-collapsed {
+  flex: 0 0 0 !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  overflow: hidden;
+  opacity: 0;
+  transition: flex 200ms ease-in-out, opacity 200ms ease-in-out;
+}
+
+.splitter-nested {
+  width: 100%;
+  height: 100%;
+}
+
+.splitter-panel-bordered {
+  border: 1px solid var(--border);
+}
+.splitter-panel-bordered:first-child {
+  border-radius: 0.375rem 0 0 0.375rem;
+}
+.splitter-panel-bordered:last-child {
+  border-radius: 0 0.375rem 0.375rem 0;
+}
+
+.splitter-vertical .splitter-panel-bordered:first-child {
+  border-radius: 0.375rem 0.375rem 0 0;
+}
+.splitter-vertical .splitter-panel-bordered:last-child {
+  border-radius: 0 0 0.375rem 0.375rem;
+}
+
+.splitter-gutter.at-min .splitter-gutter-handle,
+.splitter-gutter.at-max .splitter-gutter-handle {
+  background-color: var(--warning);
+}
+
+.splitter-layout-sidebar .splitter-panel:first-child {
+  flex: 0 0 250px;
+  min-width: 200px;
+  max-width: 400px;
+}
+.splitter-layout-sidebar .splitter-panel:last-child {
+  flex: 1;
+}
+
+.splitter-layout-equal .splitter-panel {
+  flex: 1;
+}
+
+.splitter-layout-main-detail .splitter-panel:first-child {
+  flex: 2;
+}
+.splitter-layout-main-detail .splitter-panel:last-child {
+  flex: 1;
+  min-width: 300px;
+}
+
+.splitter-full-height {
+  height: 100vh;
+}
+
+.splitter-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.splitter-header {
+  flex-shrink: 0;
+  padding: 0.75rem 1rem;
+  background-color: var(--gray-50);
+  border-bottom: 1px solid var(--border);
+  font-weight: 500;
+}
+
+.splitter-body {
+  flex: 1;
+  overflow: auto;
+}
+
+[data-theme=dark] .splitter-gutter {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .splitter-gutter:hover {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .splitter-gutter:active {
+  background-color: rgba(79, 70, 229, 0.2);
+}
+[data-theme=dark] .splitter-gutter-handle,
+[data-theme=dark] .splitter-gutter-dots::before,
+[data-theme=dark] .splitter-gutter-dots::after,
+[data-theme=dark] .splitter-gutter-dots span {
+  background-color: var(--gray-500);
+}
+[data-theme=dark] .splitter-minimal .splitter-gutter::after {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .splitter-bordered .splitter-gutter {
+  background-color: var(--gray-900);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .splitter-collapse {
+  background-color: var(--gray-800);
+  border-color: var(--gray-600);
+}
+[data-theme=dark] .splitter-collapse:hover {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .splitter-panel-bordered {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .splitter-header {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+
+.cmd-palette-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out;
+}
+
+.cmd-palette-overlay.open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.cmd-palette {
+  width: 100%;
+  max-width: 640px;
+  max-height: 70vh;
+  background-color: var(--bg);
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95) translateY(-10px);
+  opacity: 0;
+  transition: transform 150ms ease-in-out, opacity 150ms ease-in-out;
+}
+
+.cmd-palette-overlay.open .cmd-palette {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.cmd-palette-header {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  gap: 0.75rem;
+}
+
+.cmd-palette-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-muted);
+}
+
+.cmd-palette-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  color: var(--text);
+  outline: none;
+}
+.cmd-palette-input::placeholder {
+  color: var(--text-muted);
+}
+
+.cmd-palette-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cmd-palette-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  background-color: var(--gray-100);
+  border: 1px solid var(--gray-300);
+  border-radius: 0.25rem;
+}
+
+.cmd-palette-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.cmd-group {
+  margin-bottom: 0.5rem;
+}
+
+.cmd-group-title {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.cmd-item {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 150ms ease-in-out;
+  gap: 0.75rem;
+}
+.cmd-item:hover, .cmd-item.highlighted {
+  background-color: var(--gray-100);
+}
+.cmd-item.selected {
+  background-color: var(--primary-50);
+}
+
+.cmd-item-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-muted);
+}
+
+.cmd-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cmd-item-title {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cmd-item-description {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cmd-item-shortcut {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.cmd-item-badge {
+  flex-shrink: 0;
+  padding: 0.125rem 0.5rem;
+  font-size: var(--text-xs);
+  background-color: var(--gray-100);
+  border-radius: 999px;
+  color: var(--text-muted);
+}
+
+.cmd-highlight {
+  background-color: var(--warning-100);
+  color: var(--warning-700);
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+.cmd-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.cmd-empty-icon {
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto 0.75rem;
+  opacity: 0.5;
+}
+
+.cmd-empty-title {
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.cmd-empty-text {
+  font-size: var(--text-sm);
+}
+
+.cmd-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  gap: 0.5rem;
+  color: var(--text-muted);
+}
+
+.cmd-loading-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--gray-300);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+.cmd-palette-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border);
+  background-color: var(--gray-50);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.cmd-footer-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.cmd-footer-action {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.cmd-breadcrumb {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  gap: 0.25rem;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.cmd-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.cmd-breadcrumb-item:hover {
+  color: var(--primary);
+}
+
+.cmd-breadcrumb-separator {
+  color: var(--gray-400);
+}
+
+.cmd-back {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  gap: 0.5rem;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+}
+.cmd-back:hover {
+  background-color: var(--gray-50);
+  color: var(--text);
+}
+
+.cmd-recent {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.cmd-recent-indicator {
+  width: 0.375rem;
+  height: 0.375rem;
+  background-color: var(--primary);
+  border-radius: 50%;
+}
+
+.cmd-palette-sm {
+  max-width: 480px;
+}
+
+.cmd-palette-lg {
+  max-width: 800px;
+}
+
+[data-theme=dark] .cmd-palette-overlay {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] .cmd-palette {
+  background-color: var(--gray-900);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+[data-theme=dark] .cmd-palette-header {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .cmd-palette-kbd {
+  background-color: var(--gray-800);
+  border-color: var(--gray-600);
+  color: var(--gray-400);
+}
+[data-theme=dark] .cmd-item:hover,
+[data-theme=dark] .cmd-item.highlighted {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .cmd-item.selected {
+  background-color: rgba(79, 70, 229, 0.2);
+}
+[data-theme=dark] .cmd-item-badge {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .cmd-highlight {
+  background-color: rgba(245, 158, 11, 0.2);
+  color: var(--warning-300);
+}
+[data-theme=dark] .cmd-palette-footer {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .cmd-back {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .cmd-back:hover {
+  background-color: var(--gray-800);
+}
+
+.speed-dial {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.speed-dial-bottom-right {
+  bottom: 1.5rem;
+  right: 1.5rem;
+}
+
+.speed-dial-bottom-left {
+  bottom: 1.5rem;
+  left: 1.5rem;
+}
+
+.speed-dial-top-right {
+  top: 1.5rem;
+  right: 1.5rem;
+  flex-direction: column-reverse;
+}
+
+.speed-dial-top-left {
+  top: 1.5rem;
+  left: 1.5rem;
+  flex-direction: column-reverse;
+}
+
+.speed-dial-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  background-color: var(--primary);
+  color: var(--white);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+  transition: all 200ms ease-in-out;
+  z-index: 10;
+}
+.speed-dial-trigger:hover {
+  background-color: var(--primary-600);
+  transform: scale(1.05);
+}
+.speed-dial-trigger:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3), 0 4px 12px rgba(79, 70, 229, 0.4);
+}
+.speed-dial-trigger svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: transform 200ms ease-in-out;
+}
+
+.speed-dial.open .speed-dial-trigger svg {
+  transform: rotate(45deg);
+}
+
+.speed-dial-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px);
+  transition: all 200ms ease-in-out;
+}
+
+.speed-dial.open .speed-dial-actions {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.speed-dial-top-right .speed-dial-actions,
+.speed-dial-top-left .speed-dial-actions {
+  margin-bottom: 0;
+  margin-top: 0.75rem;
+  transform: translateY(-10px);
+}
+
+.speed-dial-top-right.open .speed-dial-actions,
+.speed-dial-top-left.open .speed-dial-actions {
+  transform: translateY(0);
+}
+
+.speed-dial-action {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  background-color: var(--bg);
+  color: var(--text);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all 150ms ease-in-out;
+  opacity: 0;
+  transform: scale(0.5);
+}
+.speed-dial-action:hover {
+  background-color: var(--gray-100);
+  transform: scale(1.1);
+}
+.speed-dial-action:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-200), 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.speed-dial-action svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.speed-dial.open .speed-dial-action {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.speed-dial-action:nth-child(1) {
+  transition-delay: 0ms;
+}
+
+.speed-dial-action:nth-child(2) {
+  transition-delay: 30ms;
+}
+
+.speed-dial-action:nth-child(3) {
+  transition-delay: 60ms;
+}
+
+.speed-dial-action:nth-child(4) {
+  transition-delay: 90ms;
+}
+
+.speed-dial-action:nth-child(5) {
+  transition-delay: 120ms;
+}
+
+.speed-dial-action:nth-child(6) {
+  transition-delay: 150ms;
+}
+
+.speed-dial-tooltip {
+  position: absolute;
+  right: calc(100% + 0.75rem);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.375rem 0.75rem;
+  background-color: var(--gray-900);
+  color: var(--white);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 150ms ease-in-out;
+  pointer-events: none;
+}
+.speed-dial-tooltip::after {
+  content: "";
+  position: absolute;
+  right: -4px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-left-color: var(--gray-900);
+}
+
+.speed-dial-action:hover .speed-dial-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.speed-dial-bottom-left .speed-dial-tooltip,
+.speed-dial-top-left .speed-dial-tooltip {
+  left: calc(100% + 0.75rem);
+  right: auto;
+}
+.speed-dial-bottom-left .speed-dial-tooltip::after,
+.speed-dial-top-left .speed-dial-tooltip::after {
+  left: -4px;
+  right: auto;
+  border-left-color: transparent;
+  border-right-color: var(--gray-900);
+}
+
+.speed-dial-horizontal {
+  flex-direction: row;
+}
+.speed-dial-horizontal .speed-dial-actions {
+  flex-direction: row;
+  margin-bottom: 0;
+  margin-right: 0.75rem;
+  transform: translateX(10px);
+}
+.speed-dial-horizontal.open .speed-dial-actions {
+  transform: translateX(0);
+}
+.speed-dial-horizontal .speed-dial-tooltip {
+  top: auto;
+  bottom: calc(100% + 0.75rem);
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+.speed-dial-horizontal .speed-dial-tooltip::after {
+  top: auto;
+  bottom: -4px;
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--gray-900);
+}
+
+.speed-dial-horizontal.speed-dial-bottom-right,
+.speed-dial-horizontal.speed-dial-top-right {
+  flex-direction: row-reverse;
+}
+.speed-dial-horizontal.speed-dial-bottom-right .speed-dial-actions,
+.speed-dial-horizontal.speed-dial-top-right .speed-dial-actions {
+  margin-right: 0;
+  margin-left: 0.75rem;
+  transform: translateX(-10px);
+}
+.speed-dial-horizontal.speed-dial-bottom-right.open .speed-dial-actions,
+.speed-dial-horizontal.speed-dial-top-right.open .speed-dial-actions {
+  transform: translateX(0);
+}
+
+.speed-dial-sm .speed-dial-trigger {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+.speed-dial-sm .speed-dial-trigger svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.speed-dial-sm .speed-dial-action {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+.speed-dial-sm .speed-dial-action svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.speed-dial-lg .speed-dial-trigger {
+  width: 4rem;
+  height: 4rem;
+}
+.speed-dial-lg .speed-dial-trigger svg {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.speed-dial-lg .speed-dial-action {
+  width: 3.25rem;
+  height: 3.25rem;
+}
+.speed-dial-lg .speed-dial-action svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.speed-dial-secondary .speed-dial-trigger {
+  background-color: var(--gray-600);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+.speed-dial-secondary .speed-dial-trigger:hover {
+  background-color: var(--gray-700);
+}
+
+.speed-dial-success .speed-dial-trigger {
+  background-color: var(--success);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+}
+.speed-dial-success .speed-dial-trigger:hover {
+  background-color: var(--success-600);
+}
+
+.speed-dial-danger .speed-dial-trigger {
+  background-color: var(--danger);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+}
+.speed-dial-danger .speed-dial-trigger:hover {
+  background-color: var(--danger-600);
+}
+
+.speed-dial-action-primary {
+  background-color: var(--primary) !important;
+  color: var(--white) !important;
+}
+.speed-dial-action-primary:hover {
+  background-color: var(--primary-600) !important;
+}
+
+.speed-dial-action-success {
+  background-color: var(--success) !important;
+  color: var(--white) !important;
+}
+
+.speed-dial-action-danger {
+  background-color: var(--danger) !important;
+  color: var(--white) !important;
+}
+
+.speed-dial-action-warning {
+  background-color: var(--warning) !important;
+  color: var(--gray-900) !important;
+}
+
+.speed-dial-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 200ms ease-in-out;
+  z-index: 999;
+}
+
+.speed-dial.open ~ .speed-dial-backdrop,
+.speed-dial.open .speed-dial-backdrop {
+  opacity: 1;
+  visibility: visible;
+}
+
+[data-theme=dark] .speed-dial-action {
+  background-color: var(--gray-800);
+  color: var(--gray-100);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+[data-theme=dark] .speed-dial-action:hover {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .speed-dial-tooltip {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .speed-dial-tooltip::after {
+  border-left-color: var(--gray-700);
+}
+[data-theme=dark] .speed-dial-bottom-left .speed-dial-tooltip::after,
+[data-theme=dark] .speed-dial-top-left .speed-dial-tooltip::after {
+  border-left-color: transparent;
+  border-right-color: var(--gray-700);
+}
+[data-theme=dark] .speed-dial-horizontal .speed-dial-tooltip::after {
+  border-top-color: var(--gray-700);
+}
+
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  background-color: var(--bg);
+  border-top: 1px solid var(--border);
+  z-index: 1000;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  padding: 0.5rem 0.25rem;
+  color: var(--text-muted);
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 150ms ease-in-out;
+  -webkit-tap-highlight-color: transparent;
+}
+.bottom-nav-item:hover {
+  color: var(--text);
+}
+.bottom-nav-item:focus {
+  outline: none;
+}
+.bottom-nav-item:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
+.bottom-nav-item.active {
+  color: var(--primary);
+}
+
+.bottom-nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-bottom: 0.125rem;
+  transition: transform 150ms ease-in-out;
+}
+.bottom-nav-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.bottom-nav-item:active .bottom-nav-icon {
+  transform: scale(0.9);
+}
+
+.bottom-nav-item.active .bottom-nav-icon {
+  transform: scale(1.1);
+}
+
+.bottom-nav-label {
+  font-size: 0.625rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  transition: opacity 150ms ease-in-out;
+}
+
+.bottom-nav-badge {
+  position: absolute;
+  top: 0.25rem;
+  right: 50%;
+  transform: translateX(1rem);
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1rem;
+  text-align: center;
+  color: var(--white);
+  background-color: var(--danger);
+  border-radius: 999px;
+}
+
+.bottom-nav-badge-dot {
+  min-width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+}
+
+.bottom-nav-item {
+  position: relative;
+}
+
+.bottom-nav-icons-only .bottom-nav-label {
+  display: none;
+}
+.bottom-nav-icons-only .bottom-nav-icon {
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-bottom: 0;
+}
+
+.bottom-nav-labels-active .bottom-nav-label {
+  opacity: 0;
+  height: 0;
+  margin: 0;
+}
+.bottom-nav-labels-active .bottom-nav-item.active .bottom-nav-label {
+  opacity: 1;
+  height: auto;
+}
+
+.bottom-nav-shifting .bottom-nav-item {
+  flex: 1;
+  transition: flex 200ms ease-in-out;
+}
+.bottom-nav-shifting .bottom-nav-item.active {
+  flex: 1.5;
+}
+.bottom-nav-shifting .bottom-nav-label {
+  opacity: 0;
+  max-width: 0;
+}
+.bottom-nav-shifting .bottom-nav-item.active .bottom-nav-label {
+  opacity: 1;
+  max-width: 100%;
+}
+
+.bottom-nav-sm .bottom-nav-item {
+  padding: 0.375rem 0.25rem;
+}
+.bottom-nav-sm .bottom-nav-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.bottom-nav-sm .bottom-nav-label {
+  font-size: 0.5625rem;
+}
+
+.bottom-nav-lg .bottom-nav-item {
+  padding: 0.75rem 0.5rem;
+}
+.bottom-nav-lg .bottom-nav-icon {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.bottom-nav-lg .bottom-nav-label {
+  font-size: 0.75rem;
+}
+
+.bottom-nav-indicator {
+  position: relative;
+}
+
+.bottom-nav-indicator .bottom-nav-item.active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2rem;
+  height: 2px;
+  background-color: var(--primary);
+  border-radius: 0 0 2px 2px;
+}
+
+.bottom-nav-dot .bottom-nav-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background-color: var(--primary);
+  border-radius: 50%;
+}
+
+.bottom-nav-bg-indicator .bottom-nav-item.active {
+  background-color: var(--primary-50);
+  border-radius: 0.375rem;
+  margin: 0.25rem;
+  padding: 0.375rem 0.5rem;
+}
+
+.bottom-nav-with-fab .bottom-nav-item:nth-child(3) {
+  visibility: hidden;
+}
+
+.bottom-nav-fab {
+  position: absolute;
+  top: -1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  background-color: var(--primary);
+  color: var(--white);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+  transition: all 200ms ease-in-out;
+}
+.bottom-nav-fab:hover {
+  background-color: var(--primary-600);
+  transform: translateX(-50%) scale(1.05);
+}
+.bottom-nav-fab svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.bottom-nav-primary {
+  background-color: var(--primary);
+  border-top-color: var(--primary-600);
+}
+.bottom-nav-primary .bottom-nav-item {
+  color: rgba(255, 255, 255, 0.7);
+}
+.bottom-nav-primary .bottom-nav-item:hover {
+  color: var(--white);
+}
+.bottom-nav-primary .bottom-nav-item.active {
+  color: var(--white);
+}
+.bottom-nav-primary .bottom-nav-indicator .bottom-nav-item.active::before {
+  background-color: var(--white);
+}
+
+.bottom-nav-dark {
+  background-color: var(--gray-900);
+  border-top-color: var(--gray-800);
+}
+.bottom-nav-dark .bottom-nav-item {
+  color: var(--gray-500);
+}
+.bottom-nav-dark .bottom-nav-item:hover {
+  color: var(--gray-300);
+}
+.bottom-nav-dark .bottom-nav-item.active {
+  color: var(--white);
+}
+
+.bottom-nav-shadow {
+  border-top: none;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.bottom-nav-blur {
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.bottom-nav-hide {
+  transform: translateY(100%);
+  transition: transform 200ms ease-in-out;
+}
+
+.bottom-nav-show {
+  transform: translateY(0);
+}
+
+.has-bottom-nav {
+  padding-bottom: 4rem;
+}
+
+.has-bottom-nav-sm {
+  padding-bottom: 3.5rem;
+}
+
+.has-bottom-nav-lg {
+  padding-bottom: 5rem;
+}
+
+@media (min-width: 768px) {
+  .bottom-nav-mobile-only {
+    display: none;
+  }
+}
+[data-theme=dark] .bottom-nav {
+  background-color: var(--gray-900);
+  border-top-color: var(--gray-800);
+}
+[data-theme=dark] .bottom-nav-item {
+  color: var(--gray-500);
+}
+[data-theme=dark] .bottom-nav-item:hover {
+  color: var(--gray-300);
+}
+[data-theme=dark] .bottom-nav-item.active {
+  color: var(--primary-300);
+}
+[data-theme=dark] .bottom-nav-blur {
+  background-color: rgba(17, 24, 39, 0.8);
+}
+[data-theme=dark] .bottom-nav-bg-indicator .bottom-nav-item.active {
+  background-color: rgba(79, 70, 229, 0.2);
+}
+[data-theme=dark] .bottom-nav-shadow {
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
+}
+
 .accordion {
   --accordion-color: var(--text);
   --accordion-bg: transparent;