{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "StaffScreen",
      "name": "Admin/StaffManagement",
      "reusable": true,
      "width": 1440,
      "height": 900,
      "fill": "$bg-page",
      "layout": "horizontal",
      "clip": true,
      "children": [
        {
          "type": "frame",
          "id": "SidebarStaff",
          "name": "Sidebar",
          "width": 260,
          "height": "fill_container",
          "fill": "$bg-surface",
          "layout": "vertical",
          "stroke": {"align": "inside", "fill": "$border-default", "thickness": {"right": 1}},
          "children": [
            {
              "type": "frame",
              "id": "LogoAreaStaff",
              "name": "Logo Area",
              "width": "fill_container",
              "fill": {"type": "linear_gradient", "stops": [{"color": "#6B4423", "position": 0}, {"color": "#FF6B35", "position": 1}]},
              "padding": 20,
              "layout": "vertical",
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "LogoIconStaff",
                  "width": 48,
                  "height": 48,
                  "cornerRadius": 24,
                  "fill": "#FFFFFF33",
                  "layout": "horizontal",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "LogoTextStaff", "content": "EK", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 20, "fontWeight": "bold"}
                  ]
                },
                {"type": "text", "id": "BrandNameStaff", "content": "EggyMon Kitchen", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"},
                {"type": "text", "id": "BrandSubStaff", "content": "Quản lý cửa hàng", "fill": "#FFFFFFB3", "fontFamily": "Poppins", "fontSize": 11}
              ]
            },
            {
              "type": "frame",
              "id": "NavAreaStaff",
              "name": "Navigation",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "padding": [16, 12],
              "gap": 4,
              "children": [
                {"type": "text", "id": "NavLblOverviewSt", "content": "TỔNG QUAN", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [12, 8]},
                {
                  "type": "frame",
                  "id": "NavDashSt",
                  "width": "fill_container",
                  "cornerRadius": 10,
                  "padding": [12, 20],
                  "layout": "horizontal",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcDashSt", "iconFontFamily": "lucide", "iconFontName": "layout-dashboard", "width": 20, "height": 20, "fill": "$text-secondary"},
                    {"type": "text", "id": "TxDashSt", "content": "Dashboard", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {"type": "text", "id": "NavLblStoreSt", "content": "CỬA HÀNG", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
                {
                  "type": "frame",
                  "id": "NavOrdersSt",
                  "width": "fill_container",
                  "cornerRadius": 10,
                  "padding": [12, 20],
                  "layout": "horizontal",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcOrdersSt", "iconFontFamily": "lucide", "iconFontName": "shopping-bag", "width": 20, "height": 20, "fill": "$text-secondary"},
                    {"type": "text", "id": "TxOrdersSt", "content": "Quản lý đơn hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "NavStaffActive",
                  "name": "Nav Staff Active",
                  "width": "fill_container",
                  "fill": "$orange-primary",
                  "cornerRadius": 10,
                  "padding": [12, 20],
                  "layout": "horizontal",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcStaffSt", "iconFontFamily": "lucide", "iconFontName": "users", "width": 20, "height": 20, "fill": "#FFFFFF"},
                    {"type": "text", "id": "TxStaffSt", "content": "Nhân sự", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "NavSettingsSt",
                  "width": "fill_container",
                  "cornerRadius": 10,
                  "padding": [12, 20],
                  "layout": "horizontal",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcSettingsSt", "iconFontFamily": "lucide", "iconFontName": "settings-2", "width": 20, "height": 20, "fill": "$text-secondary"},
                    {"type": "text", "id": "TxSettingsSt", "content": "Cài đặt", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {"type": "text", "id": "NavLblBizSt", "content": "KINH DOANH", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
                {
                  "type": "frame",
                  "id": "NavReportSt",
                  "width": "fill_container",
                  "cornerRadius": 10,
                  "padding": [12, 20],
                  "layout": "horizontal",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcReportSt", "iconFontFamily": "lucide", "iconFontName": "bar-chart-2", "width": 20, "height": 20, "fill": "$text-secondary"},
                    {"type": "text", "id": "TxReportSt", "content": "Báo cáo", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "NavLoyaltySt",
                  "width": "fill_container",
                  "cornerRadius": 10,
                  "padding": [12, 20],
                  "layout": "horizontal",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcLoyaltySt", "iconFontFamily": "lucide", "iconFontName": "gift", "width": 20, "height": 20, "fill": "$text-secondary"},
                    {"type": "text", "id": "TxLoyaltySt", "content": "Loyalty", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "UserAreaStaff",
              "width": "fill_container",
              "layout": "vertical",
              "children": [
                {"type": "frame", "id": "DividerStaff", "width": "fill_container", "height": 1, "fill": "$border-default"},
                {
                  "type": "frame",
                  "id": "UserRowStaff",
                  "width": "fill_container",
                  "padding": [16, 20],
                  "layout": "horizontal",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "AvatarStaff",
                      "width": 40,
                      "height": 40,
                      "cornerRadius": 20,
                      "fill": "$orange-primary",
                      "layout": "horizontal",
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [{"type": "text", "id": "AvTextStaff", "content": "TN", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}]
                    },
                    {
                      "type": "frame",
                      "id": "UserInfoStaff",
                      "layout": "vertical",
                      "gap": 2,
                      "children": [
                        {"type": "text", "id": "UserNameStaff", "content": "Trần Nhật", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"},
                        {"type": "text", "id": "UserRoleStaff", "content": "Store Manager", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 12}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "MainContentStaff",
          "name": "Main Content",
          "width": "fill_container",
          "height": "fill_container",
          "fill": "$bg-page",
          "layout": "vertical",
          "padding": 32,
          "gap": 24,
          "children": [
            {
              "type": "frame",
              "id": "HeaderStaff",
              "width": "fill_container",
              "layout": "horizontal",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {"type": "text", "id": "TitleStaff", "content": "Quản lý nhân sự", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 24, "fontWeight": "bold"},
                {
                  "type": "frame",
                  "id": "AddStaffBtn",
                  "fill": "$orange-primary",
                  "cornerRadius": 10,
                  "padding": [10, 20],
                  "layout": "horizontal",
                  "gap": 8,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcPlusStaff", "iconFontFamily": "lucide", "iconFontName": "plus", "width": 18, "height": 18, "fill": "#FFFFFF"},
                    {"type": "text", "id": "BtnTextStaff", "content": "Thêm nhân viên", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "FilterBarStaff",
              "width": "fill_container",
              "layout": "horizontal",
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "SearchStaff",
                  "width": 300,
                  "height": 42,
                  "fill": "$bg-surface",
                  "cornerRadius": 10,
                  "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
                  "padding": [0, 16],
                  "layout": "horizontal",
                  "gap": 8,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "IcSearchStaff", "iconFontFamily": "lucide", "iconFontName": "search", "width": 18, "height": 18, "fill": "$text-tertiary"},
                    {"type": "text", "id": "SearchPlcStaff", "content": "Tìm kiếm nhân viên...", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 14}
                  ]
                },
                {
                  "type": "frame",
                  "id": "FilterPosition",
                  "width": 160,
                  "height": 42,
                  "fill": "$bg-surface",
                  "cornerRadius": 10,
                  "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
                  "padding": [0, 16],
                  "layout": "horizontal",
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "FilterPosText", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14},
                    {"type": "icon_font", "id": "IcChevPos", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "FilterStatus",
                  "width": 160,
                  "height": 42,
                  "fill": "$bg-surface",
                  "cornerRadius": 10,
                  "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
                  "padding": [0, 16],
                  "layout": "horizontal",
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "FilterStatText", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14},
                    {"type": "icon_font", "id": "IcChevStat", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "StaffTableCard",
              "name": "Staff Table",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 14,
              "layout": "vertical",
              "children": [
                {
                  "type": "frame",
                  "id": "StaffTableHeader",
                  "width": "fill_container",
                  "fill": "$bg-elevated",
                  "cornerRadius": [14, 14, 0, 0],
                  "padding": [14, 20],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "StThEmployee", "content": "Nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 220},
                    {"type": "text", "id": "StThPosition", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
                    {"type": "text", "id": "StThPhone", "content": "SĐT", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
                    {"type": "text", "id": "StThShift", "content": "Ca làm", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 180},
                    {"type": "text", "id": "StThStatus", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": "fill_container"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "StRow1",
                  "width": "fill_container",
                  "padding": [14, 20],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
                  "children": [
                    {
                      "type": "frame",
                      "id": "StEmp1Cell",
                      "width": 220,
                      "layout": "horizontal",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "StAv1", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv1Tx", "content": "NT", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
                        {"type": "text", "id": "StName1", "content": "Nguyễn Thu", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
                      ]
                    },
                    {"type": "text", "id": "StPos1", "content": "Pha chế", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StPhone1", "content": "0912 345 678", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StShift1", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
                    {"type": "frame", "id": "StStat1", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge1", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx1", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
                  ]
                },
                {
                  "type": "frame",
                  "id": "StRow2",
                  "width": "fill_container",
                  "padding": [14, 20],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
                  "children": [
                    {
                      "type": "frame",
                      "id": "StEmp2Cell",
                      "width": 220,
                      "layout": "horizontal",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "StAv2", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#D4E0ED", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv2Tx", "content": "LH", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
                        {"type": "text", "id": "StName2", "content": "Lê Hoàng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
                      ]
                    },
                    {"type": "text", "id": "StPos2", "content": "Thu ngân", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StPhone2", "content": "0903 456 789", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StShift2", "content": "Chiều (14-21h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
                    {"type": "frame", "id": "StStat2", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge2", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx2", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
                  ]
                },
                {
                  "type": "frame",
                  "id": "StRow3",
                  "width": "fill_container",
                  "padding": [14, 20],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
                  "children": [
                    {
                      "type": "frame",
                      "id": "StEmp3Cell",
                      "width": 220,
                      "layout": "horizontal",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "StAv3", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#FEF3C7", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv3Tx", "content": "PL", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
                        {"type": "text", "id": "StName3", "content": "Phạm Linh", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
                      ]
                    },
                    {"type": "text", "id": "StPos3", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StPhone3", "content": "0987 654 321", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StShift3", "content": "Tối (17-23h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
                    {"type": "frame", "id": "StStat3", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge3", "fill": "#FEF3C7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx3", "content": "Nghỉ phép", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 12}]}]}
                  ]
                },
                {
                  "type": "frame",
                  "id": "StRow4",
                  "width": "fill_container",
                  "padding": [14, 20],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
                  "children": [
                    {
                      "type": "frame",
                      "id": "StEmp4Cell",
                      "width": 220,
                      "layout": "horizontal",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "StAv4", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv4Tx", "content": "TK", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
                        {"type": "text", "id": "StName4", "content": "Trần Kiên", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
                      ]
                    },
                    {"type": "text", "id": "StPos4", "content": "Bếp trưởng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StPhone4", "content": "0934 567 890", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StShift4", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
                    {"type": "frame", "id": "StStat4", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge4", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx4", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
                  ]
                },
                {
                  "type": "frame",
                  "id": "StRow5",
                  "width": "fill_container",
                  "padding": [14, 20],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
                  "children": [
                    {
                      "type": "frame",
                      "id": "StEmp5Cell",
                      "width": 220,
                      "layout": "horizontal",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "StAv5", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#DBEAFE", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv5Tx", "content": "NN", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
                        {"type": "text", "id": "StName5", "content": "Ngô Ngọc", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
                      ]
                    },
                    {"type": "text", "id": "StPos5", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StPhone5", "content": "0967 890 123", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
                    {"type": "text", "id": "StShift5", "content": "Toàn thời gian", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
                    {"type": "frame", "id": "StStat5", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge5", "fill": "#DBEAFE", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx5", "content": "Thử việc", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 12}]}]}
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaginationStaff",
                  "width": "fill_container",
                  "padding": [14, 20],
                  "layout": "horizontal",
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "PagInfoStaff", "content": "Hiển thị 1-5 / 12 nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13},
                    {
                      "type": "frame",
                      "id": "PagCtrlStaff",
                      "layout": "horizontal",
                      "gap": 4,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "PagPrevSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcPrevSt", "iconFontFamily": "lucide", "iconFontName": "chevron-left", "width": 16, "height": 16, "fill": "$text-secondary"}]},
                        {"type": "frame", "id": "PagPage1St", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg1TxSt", "content": "1", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]},
                        {"type": "frame", "id": "PagPage2St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg2TxSt", "content": "2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
                        {"type": "frame", "id": "PagPage3St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg3TxSt", "content": "3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
                        {"type": "frame", "id": "PagNextSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcNextSt", "iconFontFamily": "lucide", "iconFontName": "chevron-right", "width": 16, "height": 16, "fill": "$text-secondary"}]}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-page": {"type": "color", "value": "#FAF8F4"},
    "bg-surface": {"type": "color", "value": "#FFFFFF"},
    "bg-elevated": {"type": "color", "value": "#FFF8F0"},
    "bg-interactive": {"type": "color", "value": "#F5EDE4"},
    "brown-primary": {"type": "color", "value": "#6B4423"},
    "brown-dark": {"type": "color", "value": "#4A2E15"},
    "orange-primary": {"type": "color", "value": "#FF6B35"},
    "orange-light": {"type": "color", "value": "#FF8A5C"},
    "text-primary": {"type": "color", "value": "#2C2C2C"},
    "text-secondary": {"type": "color", "value": "#6B6B6B"},
    "text-tertiary": {"type": "color", "value": "#9B9B9B"},
    "border-default": {"type": "color", "value": "#E5DDD4"},
    "border-subtle": {"type": "color", "value": "#F0EAE2"},
    "success": {"type": "color", "value": "#22C55E"},
    "warning": {"type": "color", "value": "#F59E0B"},
    "error": {"type": "color", "value": "#EF4444"}
  }
}